jQuery中的事件和动画

jQuery中的事件和动画

1   jQuery中的事件

1.1 加载DOM

window.onload = function()  必须等到网页所有内容加载完毕才能执行      不能同时编写多个

等价于$(window).load(function())

$(document).ready(function())   网页的DOM结构绘制完成之后就可以执行   可以同时编写多个

可以缩写为$(function(){})

1.2 事件绑定  

bind(type[, data] , fn )

1.3 合成事件 

hover(enter , leave)

toggle(fn1 , fn2 , fn3 …fnN)  模拟鼠标连续单击事件   依次触发，直到最后 ，再轮番调用

toggle() 还可以切换元素的可见状态

1.4 事件冒泡 

       嵌套的多个元素，如果都绑定了相同的事件，则触发内部的事件也有可能触发嵌外部元素的事

件——这是我理解的事件冒泡。解决方法是先在程序中使用事件对象，很简单只用为函数添加一个

参数event。然后再用调用event.stopPropagation()来停止事件冒泡。（event.preventDefault()用于

阻止元素的默认行为，也可以 return false）

       注：事件捕获和事件冒泡是两个相反的过程，jQuery不支持事件捕获，若要使用事件捕获，必

须使用原生JS。

1.5 事件对象的属性 

         

         event.type                                          event.preventDefault()         event.stopPropagation()  

     

         event.pageX/eventPageY                  event.target                          evnet.metaKey

         

         (光标相对于页面的x坐标和y坐标)      (获取到触发事件的元素)      

                                                          

         event.which  (获取鼠标单机事件中鼠标的左中右键，键盘事件获取键盘的按键）

1.6 移除事件

unbind([type],fn)

1.7 模拟操作

        trgger() —  模拟用户操作，达到效果（例如用户单击按钮，才能触发click事件，trggle( “click” ) 

用户进入页面之后不用主动单击，就能触发click事件）             

       trgger()还可以触发自定义事件，还可以传递数据

2  jQuery中的动画

2.1 show()和hide()方法

2.2 fadeIn()  fadeOut()方法

淡入 淡出 display

2.3 slideUp()  slideDown()   

改变元素的高度   

2.4 animate()

animate(params, speed, callback) 

  

            params: 包含样式属性及值的映射   比如｛property1: “value1”, property2: “value2”｝

callback: 动画完成时执行的函数  可选～

animate()  还可以用于判断元素是否处于运动状态 if ( !$(element).is(“animated”)){}   

2.5 delay()

延迟动画～～～～

2.6 其他的动画

toggle( speed , [ callback ] )

slideToggle( speed, [ easing ], [ callback ] )  通过高度变化来切换匹配元素的可见性

fadeTo( speed, opacity, [ callback ] )    把元素的不透明度已渐变的方式调整到制定的值

fadeToggle( speed, [ easing ], [ callback ] )     通过不透明度变化来切换匹配元素的可见性