​第四章(jQuery中的事件与动画)

               第四章(jQuery中的事件与动画)

1.事件的绑定:bind(type[,data],fn)

            type:事件类型,包括blur,focus,load,resize,

 scroll,unload,click,dbclick,mousedown

 ,mouseup,mouseover,mouseout,

                 mouseenter,mouseleave,change,select,

 submit,keydown,keypress,keyup和error

                 等.

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

    fn:用来绑定的处理函数.

2.合成事件:(1)hover(enter,leave);模拟鼠标悬停事件,当光标移上时,即触发(enter),相当于mouseover;移除鼠标时就触发(leave),相当于mouseout.触发第二个函数需要用tigger("mouseleave")来触发.

  (2)toggle()方法

             toggle(fn1,fn2....fnN);模拟鼠标连续单击事件,一次触发,直到最后一个.

3.事件冒泡:事件会按照DOM的层次结果由里层向外层元素,直到           DOM顶端被触发.

4.停止事件冒泡:(1)return false;

      (2)stopPropagation();

5.阻止默认行为:(1)preventDefault()方法;

(2)return false;

6.事件捕获:与事件冒泡相反,事件捕获由最顶端往下开始触发.

7.事件对象的属性:

(1)event.type():取事件的类型

(2)event.preventDefault():阻止默认事件行为

(3)event.stopPropagation():阻止事件冒泡

(4)event.target():取触发事件的元素,避免W3C,IE,safari浏览器不同标准的差异

(5)event.relatedTarget()

(6)event.pageX()和event.pageY():取光标相对于页面的坐标

(7)event.which():获取鼠标或者键盘的按键

(8)event.metakey():对键盘的<ctrl>按键解释的不同

(9)event.originaIEvent():指向原来的事件对象

8.移除事件:unbind(type[,data]);

9.one(type[,data],fn);

 注意:one与bind用法一样;只是one只能触发一次,bind可以多次

10.trigger();不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义的事件

(1).传递数据:trigger(type[,data]);以数组传递

(2)执行默认操作:

例如:$("input").trigger("focus");

11.show()和hide():同时修改元素的多个样式属性(高度,宽度,不透明度)

(1)调用hide()时,要设置元素的属性display:none,调用show()时,元素属性设置为:display:block或(inline)

(2)当show()和hide()不带任何参数时,作用时立即隐藏或者显示匹配元素

12.fadein()和fadeOut():只改变元素的不透明度,不改变其高度和宽度

(1)fadeout()在指定的一段时间内降低元素的不透明度,知道元素完全消失(display:none),fadein()则相反

13.slideUp()和slideDown():只改变元素的高度

(1)如果display:none;则slideUp()由上至下显示延伸,slideDown()则由下到上缩短隐藏.

14.自定义动画方法animate()

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

params:一个包含样式属性及值的映射

speed:元素的参数,可选

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

(2) 自定义简单动画:设置属性position:relative或(absolute)才能影响元素的"top","left","bottom","right"样式属性.

(3)累加,累减动画:(+=)或(-=)表示在当前位置累加或累减

15.停止动画和动画状态的判断

(1)停止元素的动画:

stop([clearQueue][,gotoEnd]);

(2)切换元素的可见状态:toggle()与hide()和show()用法相同,可以互换.

toggle(speed,[callback])

(3)通过高度变化来切换匹配元素的可见性:slideToggle()与slideUp(),slideDown()用法相同,可以互相替换.

slideToggle(speed,[callback])

(4)把元素的不透明度以渐进方式调整到指定的值:

fadeTo(speed,opacity,[callback])