jQuery 选择器、DOM操作、事件、动画

2020-05-22 17:06:50易采站长站整理


事件和动画


事件


(1)       绑定事件


bind(type[,data],fn);


参数:type:事件类型,也可以自定义名称


      data:作为event.data属性值传递给事件对象的额外数据对象


      fn:用来绑定的处理函数


绑定多个事件类型


Ex:$(“div”).bind(“mouseover mouseout”,function(){


$(this).toggleClass(“over”);


})


(2)       合成事件


Hover(enter,leave);


用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个函数(enter);当光标移除这个元素时,会触发指定的第二个函数(leave)


toggle(fn1,fn2,….fnN);


用户模拟鼠标连续单击事件。第一次单击元素,触发指定的第一个函数;当在次单击同一个元素时,则触发指定的第二个函数(fn2);如果有更多的函数,则依次触发,知道最后一个。


(3)       冒泡事件


假设网页上有2个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素也绑定了click事件,当点击最里面元素的事件时,同时其它事件也会触发。从内向外


停止事件冒泡的方法:stopPropagation()


Ex:$(‘span’).bind(“click”,function(event){


Var txt=$().html()+”<p>内层span元素被单击</p>”;


$(‘#msg’).html(txt);


Event.stopPropagation(); 停止事件冒泡


})


 


停止表单默认提交:event.preventDefault()==return false;


(4)       移除事件


Unbind([type][,data]);


Type:事件类型


Data:将要移除的函数


(5)       触发一次函数


One(type,[data],fn);


事件触发后立即解除


动画
















Show()


Slow:600毫秒、normal:400毫秒、fast:200毫秒


Hide()


Fadeln()


在指定的一段时间内降低元素的不透明度,直到元素完全消失


fadeout()


和上相反