《2019年jquery中bind()事件用法分析》由会员分享，可在线阅读，更多相关《2019年jquery中bind()事件用法分析（24页珍藏版）》请在金锄头文库上搜索。
1、2019年JQuery中Bind()事件用法分析 篇一：jQuery事件与应用 目录： 一、事件机制 二、页面载入事件 2.1、ready()方法的工作原理 2.2、ready()方法的几种相同写法 三、绑定事件 四、切换事件 4.1、hover()方法 4.2、toggle()方法 五、移除事件 六、其他事件 6.1、方法one() 6.2、方法trigger() 七、表单应用 7.1、文本框中的事件应用 7.2、下拉列表框中的事件应用 八、列表应用 九、网页选项卡的应用 十、综合案例分析删除数据时的提示效果在项目中的应用 一、事件机制 众所周知，页面在加载时，会触发Load事件。当用户单击
2、某个按钮时，触发该按钮的Click事件，通过种种事件实现各种功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。那么，事件被出发后是如何执行代码的呢？ 严格来说，事件在触发后被分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）；但有些遗憾的是，大多数浏览器并不是都支持捕获阶段，jQuery也不支持。因此在事件触发后，往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。 二、页面载入事件 2.1、ready()方法的工作原理 jQuery中的页面载入事件ready()方法，类似于传统JavaScript中的OnLoad()方法，只不过在事件执行时间上
3、有区别：OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的图片过多或图片过大，那么有可能要等OnLoad()方法执行完毕，用户才能进行其他的操作；如果使用jQuery中的ready()方法加载页面，则只要页面中的DOM模型加载完毕，就会触发ready()方法。因此，两者在事件的执行效果上ready()方法明显优于JavaScript中的OnLoad()方法。 我们剖析一下jQuery()中的ready()方法的工作原理：在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当然遇到执行ready()方法时，通过
4、查看isReady值是否被设置，如果 未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。 2.2、ready()方法的几种相同写法 写法一： $(document).ready(function() /代码部分 ) 写法二： $(function() /代码部分 ) 写法三： jQuery(document).ready(function() /代码部分 ) 写法四： jQuery(function() /代码部分 ) 其中写法二简单明了，使用较为广泛。 三、绑定事件 我们可以使用如下的代码绑定按钮的单击事件
5、： $(function() $(#btnShow).click(function() /执行代码 ) ) 除了上述绑定事件的写法外，在jQuery中，还可以使用bind()方法进行事件的绑定。下面对该方法进行详细的介绍。 bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下： bind(type,data,fn) 其中，参数type为一个或多个类型的字符串，如“click”或“change”，也可以自定义类型；可以被参数type调用的类型包括blur、focus、load、resize、unload、click、dbclick、mousedown、mouseup、mousemo
6、ve、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error。 参数data是作为event.data属性值传递给事件对象的额外数据对象。 参数fn是绑定到每个选择元素的事件中的处理函数。 如果要在一个元素中绑定多个事件，可以将事件用空格隔开。 四、切换事件 在jQuery中，有两个方法用于事件的切换，一个是方法hover()，另一个是方法toggle()。所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。如一个超链接标记，若想实现当鼠标悬停时
7、触发一个事件，鼠标移出时又触发另一个事件，就可以调用jQuery中的hover()方法轻松实现。 4.1、hover()方法 调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换，该方法在实际运用中，也可以通过jQuery中的事件mouseenter与mouseleave进行替换。 hover()功能是当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数，其语法格式如下： hover(over,out) 参数over为鼠标移到元素时触发的函数，参数out为鼠标移出元素时触发的函数。 示例用hover方法绑定事件 #= #
8、FileName:demo12.html #Author:lowkey #Email:361789273qq. #HomePage:http:/ #LastChange:20XX-04-1114:04:39 #= #HomePage:http:/ #LastChange:20XX-04-1114:07:49 #= http:/.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd charset=utf-8 bodyfont-size:13px; imgborder:1pxsolid#ccc;padding:3px; $(function() $(img).
9、toggle(function() $(img).attr(src,logo.jpg); $(img).attr(title,$(img).src);,function() $(img).attr(src,logo1.jpg); $(img).attr(title,$(img).src);,function() $(img).attr(src,logo2.jpg) $(img).attr(title,$(img).src);) ) 五、移除事件 在DOM对象的实践操作中，既然存在用于绑定事件的bind方法，也相应存在用于移除绑定事件的方法，在jQuery中，可以通过unbind()方法移除绑定
10、的所有事件或指定的某一个事件。 unbind()的功能是移除元素绑定的事件，其调用的语法格式如下： unbind(type,fn) 篇二：jquery试题与答案 一、Jquery测试题 1下面哪种不是jquery的选择器？(单选) A、基本选择器B、后代选择器C、类选择器D、进一步选择器 考点:jquery的选择器(C) 2当DOM加载完成后要执行的函数，下面哪个是正确的？(单选) jQuery(expression,context)B、jQuery(html,ownerDocument)C、jQuery(callback)D、jQuery(elements) 考点：jquery的核心函数(C
11、) 3下面哪一个是用来追加到指定元素的末尾的？(单选) A、insertAfter()B、append()C、appendTo()D、after() 考点：jquery的核心函数(C) 4下面哪一个不是jquery对象访问的方法？(单选) A、each(callback)B、size()C、index(subject)D、index() 考点：jquery的核心函数之对象访问（D） 5jquery访问对象中的size()方法的返回值和jQuery对象的_属性一样. 考点：jquery的核心函数之对象访问（length） 6.jquery中$(this).get(0)的写法和_是等价的。 考点：jquery的核心函数之对象访问（$(this)0） 7.有这样一个表单元素 ，想要找到这个hidden元素，下面哪个是正确的？(单选) A、visibleB、hiddenC、visible()D、hidden() 考点：jquery的选择器（B） 8.如果需
