一、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 代码复制内容到剪贴板
  1. $('a').click(function(){
  2. //doSomething();
  3. });

这样写法可以为页面上已经存在的超链接元素绑定单击事件，但是通过JavaScript方法动态加载的内容中的超链接元素则不会被绑定单击事件。此时，可以使用livequery插件。无论这些元素是页面上本身已经存在的，还是后来通过JavaScript方式动态加载的，都会被绑定上单击事件，代码如下：

折叠展开JavaScript 代码复制内容到剪贴板
  1. $('a').livequery('click', function () {
  2. // doSomething();
  3. });

完整代码如下：

折叠展开XML/HTML 代码复制内容到剪贴板
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7. <script src="lib/jquery.livequery.js" type="text/javascript"></script>
  8. <script>
  9. $(document).ready(function(){
  10. $('a').livequery('click', function() {
  11. alert('livequery导致的点击');
  12. return false;
  13. });
  14. $("body").append('<p><a href="#">超链接B</a>');
  15. $("body").append('<p><a href="#">超链接C</a>');
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <a href="#">超链接A</a>
  21. </body>
  22. </html>

运行代码后，可以发现，新添加到文档中的超链接元素也被绑定了单击事件。

四、与复杂选择器结合使用

livequery还可以与复杂的jQuery选择器结合起来使用。

jQuery代码如下：

折叠展开JavaScript 代码复制内容到剪贴板
  1. $('a[rel*=friend]').livequery('click', function(event) {
  2. //doSomething();
  3. });

本段代码将会匹配并绑定事件到所有的rel属性值中含有“friend”的<a>标签上。当其中一个<a>标签的rel属性的值被修改成不含有“friend”时，那么livequery将不再匹配该标签，该标签所对应的click事件也将会被解除。

来看一个完整的livequery例子。

首先创建一个页面，代码如下：

折叠展开XML/HTML 代码复制内容到剪贴板
  1. <a href="#">被HTML页面中的a标签包裹</a>
  2. <button>修改rel属性的值</button>

然后加入jQuery代码，代码如下：

折叠展开XML/HTML 代码复制内容到剪贴板
  1. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  2. <script src="lib/jquery.livequery.js" type="text/javascript"></script>
  3. <script>
  4. $(document).ready(function(){
  5. $('a').livequery('click', function(event) {
  6. alert('livequery导致的点击');
  7. return false;
  8. });
  9. $('a[rel*=friend]').livequery('click', function(event) {
  10. alert('livequery匹配rel属性值中含有"friend"的A标签导致的点击');
  11. return false;
  12. });
  13. $('a').click( function(){
  14. alert('普通的点击');
  15. return false;
  16. });
  17. $(":button").click(function(){
  18. $("#test").attr("rel","another");
  19. });
  20. $("body").append('<p><a href="#">被动态创建的A标签包裹</a>');
  21. $("body").append('<p><a href="#" rel="friend1" id="test">被动态创建的rel属性值中含有"friend"的A标签包裹</a>');
  22. });
  23. </script>

可以看到，页面上本身存在一个<a>标签，另外还通过jQuery程序动态创建了两个<a>标签（一个不带rel属性，一个带rel属性）。页面上已有的<a>标签可以触发所有的click事件，而动态创建的<a>标签只触发livequery中的click事件。当单击“修改rel属性的值”按钮后，再去单击rel="friend1"的<a>标签，选择器$('a[rel*=friend]')所绑定的事件不再匹配。

五、触发回调函数

livequery插件还可以为匹配的元素触发一个回调函数，当不再匹配这个元素时，触发另外一个同调函数。这个方法在实际应用中十分有用。举例来说，以下代码使用了一个基于livequery插件的函数去执行jQuery的hover()方法，并在元素不再需要这些事件时移除这些事件。

折叠展开JavaScript 代码复制内容到剪贴板
  1. $(document).ready(function(){
  2. $('li').livequery(function(){
  3. // 使用hover函数 绑定mouseover和mouseout事件
  4. $(this)
  5. .hover(function() {
  6. $(this).addClass('hover');
  7. }, function() {
  8. $(this).removeClass('hover');
  9. });
  10. }, function(){
  11. // 解除绑定mouseover和mouseout事件
  12. $(this)
  13. .unbind('mouseover')
  14. .unbind('mouseout');
  15. });
  16. });

六、关于插件开发

如果利用插件操作DOM用的不是jQuery提供的方法，例如jQuery方法append()、addClass()等等，那么可以用livequery来注册其他插件。jQuery代码如下：

折叠展开JavaScript 代码复制内容到剪贴板
  1. if (jQuery.livequery){
  2. jQuery.livequery.registerPlugin("pluginMe thodName");
  3. }

还可以一次性的同时注册，几个插件方法，jQuery代码如下：

折叠展开JavaScript 代码复制内容到剪贴板
  1. if (jQuery.livequery){
  2. jQuery.livequery.registerPlugin("method1", "method2", "method3");
  3. }

七、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，则只移出指定的事件处理函数。

点击下载jQuery教程案例资源 返回《彻底研究jQuery教程》教程列表
转载请注明本文地址:http://www.wangyexx.com/jquery/jc/1014.html

jquery的liveQuery插件的更多相关文章

  1. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  2. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  3. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  4. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  5. jQuery 人脸识别插件，支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  6. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  7. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  8. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  9. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

随机推荐

  1. Android内存调试命令

    adb shell dumpsys meminfo 包名 比如: adb shell dumpsys meminfo cn.com.test

  2. 织梦(Dedecms)select_soft_post.php页面变量未初始漏洞

    漏洞版本: Dedecms 5.5 漏洞描述: 漏洞产生文件位于include\dialog\select_soft_post.php,其变量$cfg_basedir没有正确初始化,导致可以饶过身份认 ...

  3. Orchard运用 - 设置网站Favicon标识

    Favicon其实是访问其网站时在浏览器地址栏最前边呈现的类似logo的图标,可以作为品牌的标识,一般是其网站logo的缩小版并一般是ico格式的图片.详细解释可看这里: Favicon - 维基百科 ...

  4. PHP实现链表

    看了很久数据结构但是没有怎么用过,在网上看到了关于PHP的数据结构,学习了一下,与大家一起分享一下. 简短不割                                              ...

  5. React同构直出优化总结

    收录待用,修改转载已取得腾讯云授权 作者:郭林烁 joeyguo 原文地址 React 的实践从去年在 PC QQ家校群开始,由于 PC 上的网络及环境都相当好,所以在使用时可谓一帆风顺,偶尔遇到点小 ...

  6. [置顶] 深入浅出Spring（四） Spring实例分析

    上次的博文中 深入浅出Spring(二) IoC详解 和 深入浅出Spring(三) AOP详解中,我们分别介绍了一下Spring框架的两个核心一个是IoC,一个是AOP.接下来我们来做一个Sprin ...

  7. shareSDK（分享第三方库）的 使用

    首先,下载第三方库,可以去官网下载,官网的地址我忘记了,但下面有一个我之前下的和我写的例子,其实官方的例子也写我们只是告诉大家用时需要把哪些代码复制出来就可以用了. 1.导入如下框架和第三方库 新浪微 ...

  8. python发送QQ邮箱方法

    import smtplib from email.mime.text import MIMEText mail_user = "user1@qq.com" mail_pwd = ...

  9. java程序设计题库

    选择题 答题要求:单选题,每题只有一个正确答案,选择正确给分,不正确不给分. 1. 下面(   A    )数据类型可用于main()方法中传递的参数 A.String   B.Integer   C ...

  10. MySQL 工具

    MySQL 客户端工具: 1:mysql       #mysql的功能和Oracle的sqlplus一样,它为用户提供一个命令行接口来管理Mysql服务器. 2:mysqladmin #mysqla ...