【学习笔记】jquery中的事件和动画
---恢复内容开始---
jquery中的事件
- jquery用$(document).ready()方法来代替传统JavaScript的window.onload方法。
window.onload方法在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后执行,通过 $(document).ready()方法注册的事件处理程序的DOM完全就绪时就可以被调用。此时,网页中的所有元素对jquery都是可以访问的。
- load()方法会在元素的onload事件中绑定一个处理函数,若绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,若绑定给元素,则会在元素的内容加载完毕后触发。但根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
例如
$(window).load(function(){ //编写代码 })
等价于javascript中的以下代码
window.onload=function(){ //编写代码 }
- $(document).ready(function(){//代码}) 可简写为 $(function(){//代码}) 或 $().ready(function(){//代码})
事件绑定
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
语法:$(selector).bind(event,data,function)
替代语法:$(selector).bind({event:function, event:function, ...})
自 jQuery 版本 1.7 起,on()方法是向被选元素添加事件处理程序的首选方法。
合成事件
hover() 方法
规定当鼠标指针悬停在被选元素上时要运行的两个函数。jQuery 1.7 版本前该方法触发 mouseenter和mouseleave 事件。jQuery 1.8 版本后该方法触发mouseover和mouseout事件。
语法:$(selector).hover(inFunction,outFunction)
$( selector ).hover( handlerIn, handlerOut );等于
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
如果只规定了一个函数,则它将会在 mouseover 和 mouseout 事件上运行。
$(selector).hover(handlerInOut)等于$( selector ).on( "mouseover mouseout", handlerInOut );
toggle()方法
当指定元素被点击时,在两个或多个函数之间轮流切换。
如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
语法:$(selector).toggle(function1(),function2(),functionN(),...)
toggle() 方法在 jQuery 版本 1.8 中被废弃,在版本 1.9 中被移除。
还存在一个名为 toggle() 的jquery效果方法。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
事件冒泡
在程序中使用事件对象,jquery代码如下
$("element").bind("click",function(event){//event:事件对象 //..... });
当单击“element”元素时,事件对象就被创建。事件处理函数执行完毕后,事件对象就被销毁。
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行
event.stopPropagation()方法:阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。
event.preventDefault() 方法:阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
使用event.isDefaultPrevented()方法来检查指定的事件上是否调用了 preventDefault() 方法。
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false(return false;)。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
事件对象的属性
event.type 属性返回哪种事件类型被触发。
event.target 属性返回哪个 DOM 元素触发了事件。这对比较 event.target 和 this 是非常有用的,以便判断事件是否因事件冒泡被处理。
event.relatedTarget 属性返回当鼠标移动时哪个元素进入或退出。
event.pageX 属性返回鼠标指针的位置,相对于文档的左边缘。
event.pageY 属性返回鼠标指针的位置,相对于文档的上边缘。
event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下。
移除事件
unbind() 方法:移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
该方法也可以通过 event 对象取消绑定的事件处理程序。
该方法也用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。
unbind() 方法适用于任意由 jQuery 添加的事件处理程序。
自 jQuery 版本 1.7 起,on()和 0ff()方法是在元素上添加和移除事件处理程序的首选方法。
语法:$(selector).unbind(event,function,eventObj)
![](https://images2015.cnblogs.com/blog/916034/201603/916034-20160319115017021-368883185.png)
one() 方法:为被选元素添加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理程序函数。
模拟操作
trigger() 方法:触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
该方法与triggerHandler()方法类似,不同的是 triggerHandler() 不触发事件的默认行为。
语法:$(selector).trigger(event,eventObj,param1,param2,...)
trigger(type,[data])方法:第一个参数是要触发的事件类型,第二个参数是要传递给事件处理函数的附加数据,以数组形式传递。
jquery中的动画
show() 方法:显示隐藏的被选元素。
适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)
语法:$(selector).show(speed,easing,callback)
hide() 方法:隐藏被选元素。
fadeIn() 方法:逐渐改变被选元素的不透明度,从隐藏到可见(褪色效果)。
语法:$(selector).fadeIn(speed,easing,callback)
fadeOut() 方法:逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。
slideUp() 方法:以滑动方式隐藏被选元素。
语法:$(selector).slideUp(speed,easing,callback)
slideDown() 方法:以滑动方式显示被选元素。
animate() 方法:执行 CSS 属性集的自定义动画。
通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")
使用 "+=" 或 "-=" 来创建相对动画。
语法:(selector).animate({styles},speed,easing,callback)
stop() 方法:为被选元素停止当前正在运行的动画。
delay() 方法:对队列中的下一项的执行设置延迟。
语法:$(selector).delay(speed,queueName)
以上内容参考自《锋利的jquery》一书,以及网站http://www.runoob.com/jquery/jquery-tutorial.html
http://www.w3school.com.cn/jquery/index.asp
---恢复内容结束---