【学习笔记】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)

     

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

                  

---恢复内容结束---

时间: 2024-10-16 23:25:52

【学习笔记】jquery中的事件和动画的相关文章

JQuery学习笔记-JQuery中的事件

window.onlaod 必须等网页中所有内容(包括图片)加载完毕才能执行,不能同时编写多个 $(document).ready() 网页中所有DOM结构绘制完毕后执行,可能DOM元素关联的东西并没有加载完毕,能同时编写多个,简写$() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <h

jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function(){   // 编写代码... }); $(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行,可能此时DOM元素关联的东西(比如图片)并没有加载完. $(document).ready()方法能同时编写多个,每次调用$(document).ready()方法都

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

JavaScript学习笔记——jquery中html()、text()、val()的区别

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值.其中.和.text()方法不能使用在表单元素上,而.val()

jQuery中的事件和动画效果

刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可以极大的提高web应用程序的响应速度.(不做过多的讲解) 2.鼠标事件 鼠标事件就是用户在文档上移动或者点击时引发的操作. 1.click(); 2.mouseout(); 3.mouseout(); $(function () { $('li').on('mouseenter',function

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不

jQuery之第4章 jQuery中的事件和动画

一.jQuery中的事件: 1.加载DOM: jQuery:$(document).ready(); JavaScript:window.onload(); $(window).load(function(){ }) 等价于 window.onload = function(){} 简写方式: (1)$(document).ready(functon(){}) (2)$().ready(functon(){}) (3)$(function(){}) 2.事件绑定: bind(); 3.合成事件: