zoukankan      html  css  js  c++  java

  • 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 代码复制内容到剪贴板
    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.      
    19. </head>  
    20. <body>  
    21.   <a href="#">超链接A</a>  
    22. </body>  
    23. </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.   
    10.     $('a[rel*=friend]').livequery('click', function(event) {    
    11.         alert('livequery匹配rel属性值中含有"friend"的A标签导致的点击');    
    12.         return false;    
    13.     });   
    14.   
    15.     $('a').click( function(){   
    16.         alert('普通的点击');    
    17.         return false;    
    18.     });   
    19.        
    20.     $(":button").click(function(){   
    21.         $("#test").attr("rel","another");   
    22.     });   
    23.   
    24.     $("body").append('<p><a href="#">被动态创建的A标签包裹</a>');   
    25.     $("body").append('<p><a href="#" rel="friend1" id="test">被动态创建的rel属性值中含有"friend"的A标签包裹</a>');   
    26. });   
    27. </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
  • 相关阅读:
    .NET Core/.NET5/.NET6 开源项目汇总7：电商项目
    .NET Core/.NET5/.NET6 开源项目汇总6：框架与架构设计（DDD、云原生/微服务/容器/DevOps/CICD等）项目
    .NET Core/.NET5/.NET6 开源项目汇总5：(权限)管理系统项目
    .NET Core/.NET5/.NET6 开源项目汇总4：CMS、Blog项目
    .NET Core/.NET5/.NET6 开源项目汇总3：工作流组件
    .NET Core/.NET5/.NET6 开源项目汇总2：任务调度组件
    .NET Core/.NET5/.NET6 开源项目汇总1：常用必备组件
    .NET平台系列31：.NET团队送给.NET开发人员的云原生学习资源汇总
    .NET平台系列30：.NET Core/.NET 学习资源汇总
    .NET平台系列29：.NET Core 跨平台奥秘
  • 原文地址：https://www.cnblogs.com/yangguoe/p/8244464.html
Copyright © 2011-2022 走看看