1.jQuery的$(document).ready()方法 与 JavaScript的 window.onload方法的区别
1.1 window.onload方法是得等页面所有的元素(包括元素所有的关联文件)加载完毕后,才执行的,$(document).ready(),在DOM完全就绪时就可以被调用。
1.2 window.onload方法只能保留对一个函数的引用,如:
function one(){
alert("one");
}
function two(){
alert("two");
}
window.onload = one;
window.onload = two;
页面加载后只会弹出 two
相反$(document).ready()方法则是每次都是追加新的行为,方法会按照注册顺序依次执行
$(document).ready(function(){
one();
});
$(document).ready(function(){
two();
})
最后弹出 one two
2 jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了“on”。例如click(),对应JavaScript中的onclick()
3 bind()方法使用
$(function(){
$("#panel h5.head").bind("click",function(){
if($(this).next().is(":visible")){
$(this).next().hide();
}else{
$(this).next().show();
}
})
})
4.mouseover mouseout事件
$(function(){
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
})
5 合成事件
jQuery有两个合成事件,hover() 和toggle()方法,类似前面的ready()方法,hover()方法和 toggle()方法都属于jQuery自定义的方法
hover(enter,leave);//用于模拟光标悬停事件,当光标移动到元素上时,会触发指定的第一个函数enter,当光标移出这个元素时,会触发指定的第二个函数leave
$(function({
$("#panel h5.head").hover(function(){
$(this).next().show();
}, funtion(){
$(this).next().hide();
});
});
6 事件冒泡
当一个页面中有多个事件,多个元素相应同一个事件,可能会出现触发其中一个事件,其他的事件也同时触发了,因此 需要对事件的作用范围进行限制。