jquery的liveQuery插件
一、livequery插件简介 jQuery的事件绑定功能使得jQuery代码与HTML代码能够完全分离,这样代码的层次关系更加清晰,维护起来也更加简单。然而对于动态加载到页面的HTML元素,每次都需要重新绑定事件到这些元素上,十分不便。一款新的插件由此产生,即livequery,可以利用它给相应的DOM元素注册事件或者触发回调函数。不仅当前选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件。当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可。 通过jQuery选择器选择一个DOM元素,livequery插件会实时地在整个DOM范围将其持久化。这意味着无论元素是先前存在还是后来动态加载的,事件都会被绑定,就像是CSS给元素添加样式一样。同时,这款插件几乎在没占用什么资源的情况下就做到了这些功能。 brandon设计了Iivecluery插件,并进行了改善和维护。现在livequery插件分为3个版本,0.0.3版、1.0.2版和1.0.3版。前者用于支持jQuery 1.O.x版本,中间适用于jQuery 1.1.x至1.2.6版,后者适用于1.3.x以上。 二、下载地址 jQuery livequery插件的下载地址为:http://plugins.jquery.com/project/liveQuery。 在该界面中,读者可以下载该插件、查看英文文档和版本更新说明等。WANGYEXX.COM 三、快速上手 使用普通的方法给元素绑定一个单击事件,代码如下: 折叠展开JavaScript 代码复制内容到剪贴板
这样写法可以为页面上已经存在的超链接元素绑定单击事件,但是通过JavaScript方法动态加载的内容中的超链接元素则不会被绑定单击事件。此时,可以使用livequery插件。无论这些元素是页面上本身已经存在的,还是后来通过JavaScript方式动态加载的,都会被绑定上单击事件,代码如下: 折叠展开JavaScript 代码复制内容到剪贴板
完整代码如下: 折叠展开XML/HTML 代码复制内容到剪贴板
运行代码后,可以发现,新添加到文档中的超链接元素也被绑定了单击事件。 四、与复杂选择器结合使用 livequery还可以与复杂的jQuery选择器结合起来使用。 jQuery代码如下: 折叠展开JavaScript 代码复制内容到剪贴板
本段代码将会匹配并绑定事件到所有的rel属性值中含有“friend”的<a>标签上。当其中一个<a>标签的rel属性的值被修改成不含有“friend”时,那么livequery将不再匹配该标签,该标签所对应的click事件也将会被解除。 来看一个完整的livequery例子。 首先创建一个页面,代码如下: 折叠展开XML/HTML 代码复制内容到剪贴板
然后加入jQuery代码,代码如下: 折叠展开XML/HTML 代码复制内容到剪贴板
可以看到,页面上本身存在一个<a>标签,另外还通过jQuery程序动态创建了两个<a>标签(一个不带rel属性,一个带rel属性)。页面上已有的<a>标签可以触发所有的click事件,而动态创建的<a>标签只触发livequery中的click事件。当单击“修改rel属性的值”按钮后,再去单击rel="friend1"的<a>标签,选择器$('a[rel*=friend]')所绑定的事件不再匹配。 五、触发回调函数 livequery插件还可以为匹配的元素触发一个回调函数,当不再匹配这个元素时,触发另外一个同调函数。这个方法在实际应用中十分有用。举例来说,以下代码使用了一个基于livequery插件的函数去执行jQuery的hover()方法,并在元素不再需要这些事件时移除这些事件。 折叠展开JavaScript 代码复制内容到剪贴板
六、关于插件开发 如果利用插件操作DOM用的不是jQuery提供的方法,例如jQuery方法append()、addClass()等等,那么可以用livequery来注册其他插件。jQuery代码如下: 折叠展开JavaScript 代码复制内容到剪贴板
还可以一次性的同时注册,几个插件方法,jQuery代码如下: 折叠展开JavaScript 代码复制内容到剪贴板
七、API livequery插件的官方API地址为: http://docs.jquery.com/Plugins/livequery。 关于livequery插件的API内容,读者可以参考附录F的介绍。 注意: 在jQuery 1.3.1中新增了live(type,fn)方法,它能给所有当前以及将来会匹配的元素绑定一个事件处理函数(例如click事件),也能绑定自定义事件。目前支持的事件有click,,dblclick,mousedown, mouseup,mousemove,mouseover,mouseout,keydown,keypress,keyup,还不支持的事件有blur,focus,mouseenter,mouseleave,change,submit。 live方法跟传统的bind很像,区别在于用live方法来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果给页面上所有的li标签用live方法绑定了click事件,那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用,而无需重新给这种新增加的元素绑定事件。 Live方法与上面介绍的liveQuery插件很像,但有以下几个主要区别。 ● live方法目前只支持所有事件的子集,支持列表参考上面的说明. ● live方法不支持liveQuery提供的“无事件”样式的回调函数。live0只能绑定事件处理函数。 ● live方法没有“setup”和“cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。 如果需要移除用live()绑定的事件,请用die()方法。 语法格式:die([type], [fn]) ● 如果不带参数,则所有用live方法绑定的事件都会被移除。 ● 如果提供了type参数,那么会移除对应的live事件。 ● 如果也指定了第2个参数function,则只移出指定的事件处理函数。 |
转载请注明本文地址:http://www.wangyexx.com/jquery/jc/1014.html |
jquery的liveQuery插件的更多相关文章
- 几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 提升用户体验的最佳免费 jQuery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery 人脸识别插件,支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- 推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
随机推荐
- linux系统安装gcc
安装nginx时会遇到错误提示gcc: command not found,需要先安装gcc 在centos7上安装成功. # yum group list # yum group install & ...
- Orchard运用 - 导入旧随笔导致归档的问题
归档功能对于一个博客App这应该必须有的需求,故此Orchard中博客模块默认实现这一特性并通过一个叫"Blog Archives" widget, 你可以将其安装博客主页的侧边栏 ...
- js 小数点 取整数
取整数 Math.round() 小数点 (10/3).toFixed(2)
- Python基础(12)--模块
本文地址:http://www.cnblogs.com/archimedes/p/python-modules.html,转载请注明源地址. 模块简介 如果你退出 Python 解释器重新进入,以前创 ...
- 解决 org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type的问题
具体错误如下: Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying be ...
- PHP判断{函数/类/方法/属性}是否存在
1.php判断系统函数或自己写的函数是否存在 bool function_exists ( string $function_name ) 判断函数是否已经定义,例如: if(function_exi ...
- HTML中的attribute和property
一.概述 attribute和property是常常被弄混的两个概念. 简单来说,property则是JS代码里访问的: document.getElementByTagName('my-elemen ...
- CLS(公共语言规范)的CLSCompliant(跨语言调用)
.net的一个很重要的特性就是跨语言的编程,用C#写的dll可以在VB.net里调用,例如:用C#写的一个类,编译到dll中,然后在VB.net中调用: using System;namespace ...
- [Functional Programming] Working with two functors(Applicative Functors)-- Part1 --.ap
What is applicative functor: the ability to apply functors to each other. For example we have tow fu ...
- 阅读jQuery源代码带给我们的18个惊喜
相信大家都非常熟悉jQuery类库,绝对最受欢迎的JS框架,如果你也有兴趣阅读v源代码的话,或者你也会有同感. 以下便是阅读jQuery源代码后挖掘的18条令人惊奇的信息: 原文:阅读jQuery源代 ...