JQuery小技巧

Tip 5:像数组一样使用jQuery对象

运行一个选择器得到的结果是一个jQuery对象。但是,通过jQuery可以使结果看起来更像一个数组,你可以定义索引元素和长度。

Javascript代码
  1. var buttons = $('#navigation a.button'); //Selecting all the navigation b //Selecting all the navigation buttons  
  2. // We can loop though the collection:  
  3. for(var i=0;i<buttons.length;i++){  
  4. console.log(buttons[i]); // A DOM element, not a jQuery object  
  5. }  



如果你想实现更高的性能,可以使用一个简单的循环(或while语句)来代替$.each(),这样速度会比之前快几倍。

Tip 6:检查一个元素是否存在

确定一个元素集合是否存在或是否包含元素的唯一方法是检查元素的长度。

Javascript代码
  1. If (buttons.length){ // True only if buttons contains elements  
  2. // Do something } 

Tip 7:创建jQuery空对象

创建一个新的jQuery对象有时开销会比较大。不过你可以先创建一个空对象,然后通过add()填充它。

Javascript代码
  1. var container = $([]);  
  2. container.add(another_element);  


Tip 8:统计Web页面中DOM元素数

如果页面中包含大量元素或内容,则浏览器渲染所需的时间也更多。你可以在控制台中执行以下语句,来统计页面中的DOM元素数:

Javascript代码
  1. console.log($('*').length); 

Tip 9:把你的代码变成jQuery插件

如果你希望将你的jQuery代码封装成一个jQuery插件,以便以后重用,你可以通过以下代码来创建:

Javascript代码
  1. function($){  
  2. $.fn.yourPluginName = function(){  
  3. // Your code goes here  
  4. return this;  
  5. };  
  6. })(jQuery); 

Tip 11: Live事件处理

为任何匹配选择器的元素设置一个事件处理程序,即使它在初始页面加载后被添加到DOM:

Javascript代码
  1. $('button.yourClassName').live('click', yourFunctionName);  


这样,通过ajax或javascript加载元素时,事件处理程序会自动为这些元素进行设置:

Javascript代码
  1. $('button.yourClassName').die('click', yourFunctionName);  


尽管与常规事件相比,live事件处理程序有一些局限性,但它还是适用于大部分情况。Live事件支持jQuery 1.3及以上版本。
 
Tip 12:克隆一个对象

使用.clone()方法克隆JavaScript中的DOM对象:

Javascript代码
  1. // Clone the DIV  
  2. var cloned = $('#yourdivID').clone();  


.clone()方法无法克隆JavaScript对象。如果要克隆JavaScript对象,你可以使用下面的代码:

Javascript代码
  1. // Shallow copy  
  2. var newObject = jQuery.extend({}, oldObject);  
  3. // Deep copy  
  4. var newObject = jQuery.extend(true, {}, oldObject);  

Tip 14:找出最近的父DIV

如果你想找出某个元素的父级DIV(无论该DIV是否有ID),那么你可以使用这个jQuery选择器:

Javascript代码
  1. $("#yourControl").closest("div"); 

相关推荐