锋利的jquery-事件和动画

时间:2023-05-23 17:14:08
1 注册事件的触发时机
在jquery中,$(window).load(function(){})
注册在window下的事件等待页面所有资源加载完成(包括dome树的加载和图片视频的资源的加载)
$(document).ready(function(){})
注册在document下的事件等待DOM树加载完成立即执行,不需要等待其他资源的加载
注册在元素上的事件,则会再元素内容加载完成后触发。
2 多次使用
window.onload=function(){}事件只可以挂载一次,挂载多次事件,则会后面一次事件覆盖前面一次事件
$(document).ready(function(){})事件可以多次挂载
3 合成事件(hover())
.hover(enter,leave);
4 事件对象
由事件源开始先祖先元素冒泡,依次触发祖先元素的该相同事件;
①jquery事件对象;event
②jquery事件源;event.target;
jquery对其进行了封装,避免了各浏览器的兼容性
③js事件源:e.srcElement;(IE)
e.target;
e.currentTarget;④停止事件冒泡
e.stopPropagation()
⑤阻止事件的默认行为
e.preventDefault()
⑥jquery中同时停止冒泡和阻止默认行为
return flase
⑦事件对象的类型;
event.type;
⑧event.relatedTarget相当于IE下的fromElement/toElement
常用于onmouseout和onmouseover事件中,相当于,event.target;
jquery对事件做了封装;能兼容各种浏览器
⑨取得光标坐标
event.pageX/event.pageY获取页面光标相对于页面的X、Y坐标;
jquery封装了IE下的event.x/event.y和FF下的event.PageX/event.PageY;和页面有滚动条时的情况;能兼容各种浏览器;
鼠标事件
A:event.which
在鼠标单击和按下键盘时获取键值。
B : event.metaKey/event.shiftKey/event.altKey
metaKey为jquery封装的ctrl按键
5 移除事件
①绑定事件
$("#id").bind("click",function(){}).bind("click",function()){}
使用此方法可以连续绑定多个相同事件
②移除事件
$("#id").unbind("click");使用该方法可以移除该id上绑定的所有click事件;如果没有参数,则移除该id上所有事件;
③绑定带有名称的事件函数;
$("#id").bind("click",myFun=function(){})
④移除某个元素上的某类事件的某一个事件函数;
$("#id").unbind("click",myFun)
⑤对于只触发一次就解除绑定的事件,使用one方法代替bing方法
6模拟操作
① 在某一个函数执行结束后,模拟用户的操作;
$(function(){
$("#btn").trigger("click");
})
以上为在DOM树加载完成后模拟用操作了btn元素的click事件
②触发自定义事件
A:自定义事件;
$("#btn").bind("myClick",function(){});
B : 触发自定义事件
$("#btn").trigger("myClick")
C : 触发事件后不执行默认行为
$("#btn").triggerHandler("focus");
D :为元素绑定多个事件
$("div").bind("mouseover mouseout",function(){})
在鼠标移入移除时都会触发该事件
7 自定义动画animate()
show(),hide();会修改元素的宽高,透明度;
fadeOut(),fadeIn()会修改元素的不透明度
slideDown(),slideUp()会修改元素的高度
除了这些还可以用animate()方法自定义动画;
可以通过对animate的宽高,位置(left/right),透明度(opacity)(0~1)的改变 来设置动画,还可以通过链式调用对动画进行排队;