03_jQuery的事件和动画

jQuery中的事件和动画

一、jQuery中的事件

1.1、事件绑定

用bind()方法来对匹配的元素进行特定事件的绑定，方法调用格式：bind{type [,data], fn};

三个参数说明：

第一个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等或自定义名称。

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定的处理函数。

示例0301

1.2、合成事件

jQuery有两个合成事件：hover()方法和toggle()方法

hover()方法：当鼠标移到元素上时，会触发指定的第一个函数；当鼠标移出元素时，会触发指定的第二个函数。

Toggle()方法：第一次单击元素，触发指定的第一函数，第二次单击触发第二个函数，依次触发直到最后一个，随后每次单击重复对这几个函数的轮番调用。

示例0302

1.3、冒泡事件

页面上有多个事件，也可以有多个元素响应同一个事件。

冒泡事件问题的解决方法，为函数添加一个参数event，通过event.stopPropagation()来停止事件冒泡。

示例0303

1.4、事件对象的属性

1)event.type：获取到事件的类型。

2)event.target：获取到触发事件的元素。

3)event.pageX和event.pageY：获取光标相对于页面的x光标和y光标。

4)event.which：在鼠标单击事件中获取鼠标的左、中、右键；在键盘事件中获取键盘的按键。

示例0304

1.5、移出事件

unbind()：删除所有绑定的事件。

unbind(“click”)：删除单击事件。

unbind(“click”,myFun)：删除myFun事件。

示例0305

1.6、模拟操作

用trigger()方法触发事件。如：

$(‘#btn’).trigger(“click”);

可简写为：

$(‘#btn’).click();

触发自定义事件：

$(‘#btn’).trigger(“MyClick”);

 

Trigger(type[,dta])方法有两个参数，第一个参数是触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。

示例0306

二、动画

2.1、show()方法和hide()方法

隐藏/显示元素是通过改变元素的display样式的值:none、block/inline。如：

$(“element”).show()

可以为方法指定一个速度参数让元素动起来。如：

$(“element”).show(“slow”)、$(“element”).show(1000)

示例0307

2.2、fadeIn()方法和fadeOut()方法

只改变元素的不透明度，不改变其高速和宽度。

示例0308

2.3、slideUp()方法和slideDown()方法

只改变元素的高度。

示例0309

2.4、自定义动画方法animate()

语法结构：animate(params, speed, callback);

Params：一个包含样式属性及值的映射，比如{property1:”value1”,property2:”value2”,…}

Speed：速度参数，可选

Callback：在动画完成时执行的函数，可选

示例0310

2.5、动画回调函数

示例0311

2.6、停止动画和判断是否处于动画状态

Stop([clearQueue][,gotoEnd]);两个参数都是可选Boolean值。

clearQueue指是否要清空未执行完的动画队列，

gotoEnd指是否直接将正在执行的动画跳转到末状态。

If(!$(element).is(“:animated”)){

                   //…

}

示例0312

2.7、其它动画方法

Toggle(speed,[callback])方法：切换元素的可见状态。

slideToggle(speed,[callback])方法：通过高度变化来切换元素的可见性。

fadeTo(speed,opacity,[callback])方法：把元素的不透明度以渐进方式调整到指定的值。

示例0313

2.8、动画方法总结

方法名	说明
Hide()和show()	同时修改多个样式属性即高度、宽度和不透明度
fadeIn()和fadeOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
Toggle()	用来代替hide()方法和show方法，所以会同时修改多个样式属性即高度、宽度和不透明度
slideToggle()	用来代替slideUp方法和slideDown()方法，所以只能改变高度
Animate()	属于自定义动画的方法，以上各种方法实质内部都调用了animate()方法。

示例0314