第四章(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])
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。