转载于: http://www.wangyexx.com/jquery/jc/1014.html
一、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
三、快速上手
使用普通的方法给元素绑定一个单击事件,代码如下:
- $('a').click(function(){
- //doSomething();
- });
这样写法可以为页面上已经存在的超链接元素绑定单击事件,但是通过JavaScript方法动态加载的内容中的超链接元素则不会被绑定单击事件。此时,可以使用livequery插件。无论这些元素是页面上本身已经存在的,还是后来通过JavaScript方式动态加载的,都会被绑定上单击事件,代码如下:
- $('a').livequery('click', function () {
- // doSomething();
- });
完整代码如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script src="lib/jquery.livequery.js" type="text/javascript"></script>
- <script>
- $(document).ready(function(){
- $('a').livequery('click', function() {
- alert('livequery导致的点击');
- return false;
- });
- $("body").append('<p><a href="#">超链接B</a>');
- $("body").append('<p><a href="#">超链接C</a>');
- });
- </script>
- </head>
- <body>
- <a href="#">超链接A</a>
- </body>
- </html>
运行代码后,可以发现,新添加到文档中的超链接元素也被绑定了单击事件。
四、与复杂选择器结合使用
livequery还可以与复杂的jQuery选择器结合起来使用。
jQuery代码如下:
- $('a[rel*=friend]').livequery('click', function(event) {
- //doSomething();
- });
本段代码将会匹配并绑定事件到所有的rel属性值中含有“friend”的<a>标签上。当其中一个<a>标签的rel属性的值被修改成不含有“friend”时,那么livequery将不再匹配该标签,该标签所对应的click事件也将会被解除。
来看一个完整的livequery例子。
首先创建一个页面,代码如下:
- <a href="#">被HTML页面中的a标签包裹</a>
- <button>修改rel属性的值</button>
然后加入jQuery代码,代码如下:
- <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script src="lib/jquery.livequery.js" type="text/javascript"></script>
- <script>
- $(document).ready(function(){
- $('a').livequery('click', function(event) {
- alert('livequery导致的点击');
- return false;
- });
- $('a[rel*=friend]').livequery('click', function(event) {
- alert('livequery匹配rel属性值中含有"friend"的A标签导致的点击');
- return false;
- });
- $('a').click( function(){
- alert('普通的点击');
- return false;
- });
- $(":button").click(function(){
- $("#test").attr("rel","another");
- });
- $("body").append('<p><a href="#">被动态创建的A标签包裹</a>');
- $("body").append('<p><a href="#" rel="friend1" id="test">被动态创建的rel属性值中含有"friend"的A标签包裹</a>');
- });
- </script>
可以看到,页面上本身存在一个<a>标签,另外还通过jQuery程序动态创建了两个<a>标签(一个不带rel属性,一个带rel属性)。页面上已有的<a>标签可以触发所有的click事件,而动态创建的<a>标签只触发livequery中的click事件。当单击“修改rel属性的值”按钮后,再去单击rel="friend1"的<a>标签,选择器$('a[rel*=friend]')所绑定的事件不再匹配。
五、触发回调函数
livequery插件还可以为匹配的元素触发一个回调函数,当不再匹配这个元素时,触发另外一个同调函数。这个方法在实际应用中十分有用。举例来说,以下代码使用了一个基于livequery插件的函数去执行jQuery的hover()方法,并在元素不再需要这些事件时移除这些事件。
- $(document).ready(function(){
- $('li').livequery(function(){
- // 使用hover函数 绑定mouseover和mouseout事件
- $(this)
- .hover(function() {
- $(this).addClass('hover');
- }, function() {
- $(this).removeClass('hover');
- });
- }, function(){
- // 解除绑定mouseover和mouseout事件
- $(this)
- .unbind('mouseover')
- .unbind('mouseout');
- });
- });
六、关于插件开发
如果利用插件操作DOM用的不是jQuery提供的方法,例如jQuery方法append()、addClass()等等,那么可以用livequery来注册其他插件。jQuery代码如下:
- if (jQuery.livequery){
- jQuery.livequery.registerPlugin("pluginMe thodName");
- }
还可以一次性的同时注册,几个插件方法,jQuery代码如下:
- if (jQuery.livequery){
- jQuery.livequery.registerPlugin("method1", "method2", "method3");
- }
七、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,则只移出指定的事件处理函数。