1 加载DOM (javascript中的window.onload() 和 jquery中的 $(document).ready())
Window.onload()方法是在网页中的所有元素(包含元素的所有关联文件)完全加载到浏览器后才执行
Jquery的$(document).ready()) 方法注册的时间处理程序,在dom完全就绪就可以被调用
如果一个网站有很多图片,那么用window.ready() 加载 就要等图片都下好后 才可以执行操作,而用$(document).ready())则是dom加载完就会执行操作了。 $(document).ready())
由于dom已经被解析,但图片还有可能没被加载完毕,所以例如图片的高度和宽度这样的属性不一定有效,jquery还提供另一种加载方法,load()方法、load方法会在元素的onload事件绑定一个处理函数。如果处理函数绑定给一个window对象,则会在所有内容(包括窗口,框架,对象,图像)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
jquery代码如下
$(window.load)(function(){
//代码
})
同javascript
Window.onload=function(){
//代码
}
2,多次使用
Function one() Function two()
{ {
Alert(“one”); Alert(“two”);
} }
使用window.onload加载
Window.onload=one;window.onload=two; 运行代码后 发现智慧显示 two
因为javascript的onload事件一次只能保存对一个函数的引用。后面的函数会自动覆盖前面的函数
两个函数效果顺序实现
Window.onload=function(){
One();
Two();
}
Jquery每次都会在现有的行为上追加新的行为
$(document).ready(function(){
One();
})
$(document).ready(function(){
two();
})
3,简写
$(function(){
代码
})
<script type="text/javascript">
function fn1(){alert("OK");}
function fn2(){alert("再来一次!")}
//document.getElementById('div1').attachEvent('onclick',fn1);
//document.getElementById('div1').addEventListener('click',fn1,false);
//document.getElementById('div1').addEventListener("click",fn2,false);
//document.getElementById('div1').onclick=fn1;
//document.getElementById('div1').attachEvent('onclick',fn2);
//document.getElementById('div1').onclick=function(){fn2();fn1()}
//document.getElementById('div2').attachEvent('onclick',fn3);
function addEventHandler(obj,sEvent,fnHandler){
if(obj.addEventListener){
obj.addEventListener(sEvent,fnHandler,false);
} else if(obj.attachEvent){
obj.attachEvent("on"+sEvent,fnHandler);
}else{
alert();
}
}
function removeEventHandler(obj,sEvent,fnHandler){
if(obj.removeEventListener){
obj.removeEventListener(sEvent,fnHandler,false);
} else if(obj.detachEvent){
obj.detachEvent("on"+sEvent,fnHandler);
}else{
alert();
}
}
var obj=document.getElementById('div1');
var obj2=document.getElementById('div2');
addEventHandler(obj,"click",fn1);
addEventHandler(obj,"click",fn2);
addEventHandler(obj2,"click",function fn3(){removeEventHandler(obj,"click",fn2); alert("我是FN3");}
)
addEventHandler(document.getElementById('div3'),"click",function(){removeEventHandler(obj2,"click",fn3); alert("run");});
//addEventHandler(window,"load",function aa(){alert("当WINDOW加载完成后运行的");});
//removeEventHandler(window,"load",aa);
</script>