【锋利的jQuery阅读笔记】jQuery中的事件和动画

jQuery中的事件

1、加载DOM

jQuery使用 $(document).ready( )方法，在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。

window.onload方法和$(document).ready方法的区别

	window.onload	$(document).ready
执行时机	在网页中所有元素完全加载到浏览器后才执行	在DOM完全就绪时就可以被调用
多次使用	一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数	每次调用，都会在现有行为上追加新的行为，这些行为函数会根据注册的顺序依次执行
简写方式	无	$(function( )){   }

2、事件绑定  bind（）方法

     bind（type ,[data],fn） 第一个参数是事件类型，第二个参数是可选参数，第三个参数是用来绑定的处理函数

3、is( )方法

     返回布尔类型 is（":visible"）

4、合成事件

      （1） hover（）方法

               语法结构： hover（enter，leave）    

               hover（）方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter）；当光标移出这个元素时，会触发指定的第2个函数（leave）

     （2）toggle（）方法

               语法结构：toggle（fn1，fn2，...fnN）

               ① toggle（）方法用于模拟鼠标连续单击事件，第i次单击触发第fni个函数；

               ② toggle（）方法在jQuery中还有另外一个作用：切换元素的可见状态。如果元素是可见的，单击切换后则为隐藏；如果元素是隐藏的，单击切换后则为可见的。

5、事件冒泡

     事件按照DOM的层次结构像水泡一样不断向上直至顶端。

      ①  事件对象 event

          在程序中使用事件对象非常简单，只需要为函数添加一个参数（event），这个事件对象只有事件处理函数能访问到，函数执行完毕后，事件对象就被销毁。

     ② 停止事件冒泡 stopPropagation（）

          event.stopPropagation( );

     ③ 阻止默认行为 preventDefault（）

          event.preventDefault( );

     在事件处理函数中返回false，是在事件对象上同时调用stopPropagation（）和preventDefault（）的简写

     ④ 事件捕获

          事件捕获与事件冒泡的顺序相反

6、事件对象的属性

     

event.target	获取到触发事件的元素
event.relatedTarget	获取相关元素
event.pageX  event.pageY	获取到光标相对于页面的X坐标和Y坐标
event.which	在鼠标单击事件中，获取到鼠标的左中右键 在键盘事件中，获取键盘的按键
event.metaKey	在键盘事件中获取<ctrl>键

7、移除事件 unbind（[type],[data]）

     (1) 如果没有参数，则删除所有绑定的事件

     (2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件

     (3) 如果只提供了处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除

     one（）方法 ：针对于只需要触发一次，随后就要立即解除绑定的情况。处理函数被触发一次后立即被删除

8、trigger（）

     trigger（）方法触发事件后，会执行浏览器默认操作。

     如果只想触发绑定的事件，而不想执行浏览器默认操作，可以使用jQuery中另一个方法 triggerHandler（）方法

jQuery中的动画

1、 显示和隐藏元素：show（）方法和hide（）方法

     （1） show（）和hide（）不带任何参数时，相当于css（“display”，“none/block/inline”）

     （2）为show（）和hide（）指定速度参数：元素会慢慢的显示/隐藏 “slow”“normal”“fast”，使用关键字时要用引号

    

2、改变元素的透明度：fadeIn（）和fadeOut（）

3、改变元素的高度：slideUp（）和slideDown（）

     slideDown：由上到下延伸展示

     slideUp：由下到上延伸展示

4、自定义动画方法：animate（）

     语法结构：animate（params，speed，callback）

     参数说明：① params：包含样式属性及值的映射 如：{property1：“value1”}

                     ② speed： 速度参数，可选

                     ③ callback：在动画完成时执行的函数，可选。

5、停止动画和判断是否属于动画

     （1） 停止元素的动画 stop（）方法，只会停止正在进行的动画

              语法结构：stop（[clearQueue],[gotoEnd]）

     （2） 判断元素是否处于动画状态

               在使用animate（）方法时，要避免动画积累而导致的动画与用户行为的不一致

               用  is(":animated") 判断元素是否处于动画状态

6、延迟动画

     delay（）

7、动画方法总结

方法名	说明
hide（）和show（）	同时修改多个样式属性：高度、宽度和不透明度
fadeIn（）和fadeOut（）	只改变不透明度
slideUp（）和slideDown（）	只改变高度
fadeTo（）	只改变不透明度
toggle（）	用来代替hide（）和show（）方法
slideToggle（）	用来代替slideUp（）和slideDown（）
fadeToggle（）	用来代替fadeIn（）和fadeOut（）
animate（）	自定义动画