《锋利的jQuery》阅读笔记

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  事件冒泡

当一个页面中有多个事件,多个元素相应同一个事件,可能会出现触发其中一个事件,其他的事件也同时触发了,因此 需要对事件的作用范围进行限制。











猜你喜欢

转载自blog.csdn.net/emily201314/article/details/50448360
今日推荐