首页 > 代码库 > 一些实用的 jQuery 技巧

一些实用的 jQuery 技巧

2024-07-08 14:59:15   231人阅读

jQuery如今已经成为Web开发中最流行的JavaScript库，通过jQuery和大量的插件，你可以轻松实现各种绚丽的效果。 

本文将为你介绍一些实用的技巧，希望可以帮助你更加高效地使用jQuery。 

Tip 1：使用最新版本 

jQuery每一个新版本都会包含一些性能优化和bug修复，为了便于升级，你可以使用Google CDN服务托管的jQuery库。有以下两种方式： 

包含特定版本 

Html代码 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  



包含某个分支的的最新版本（此方法中jQuery版本的缓存期限只有1小时，不建议用于生产环境） 

Html代码 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>  



Tip 2：使用简单的选择器 

之前获取DOM元素通常使用jQuery的getElementById()、getElementsByTagName()和getElementsByClassName()方法。如今，所有主流浏览器都已经支持querySelectorAll()，该方法能够理解CSS查询器。你应该尝试使用这个更优的方式。 

Javascript代码 
  1. $(‘li[data-selected="true"] a‘) // 看起来不错，但是慢  
  2. $(‘li.selected a‘) // 更好的方法  
  3. $(‘#ElementID) // 最好  



Tip 3：缓存jQuery的结果 

如果你没有别的选择，只能使用DOM选择器，那么你应该缓存jQuery的结果。例如： 

Javascript代码 
  1. var selectedListItem = $(‘li[data-selected="true"]a‘)  



现在，jQuery的结果已经被缓存到变量“selectedListItem”，该变量可以多次使用而不会影响性能。 

Tip 4：使用jQuery扩展选择器的注意事项 


jQuery提供了大量的扩展选择器，比如:visible、:hidden、:animated等，而它们不是有效的CSS3选择器。如果使用这些选择器，将不能再使用querySelectorAll()方法。为了避免这种情况，你可以先选择元素，然后再过滤。例如： 

Javascript代码 
  1. $(‘a.button:hidden‘); //则不能使用querySelectorAll()  
  2. $(‘a.button‘).filter(‘:hidden‘); //最佳方案  



上述结果是相同的，但是第2个更快。 

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 10：本地存储 

Local storage是一个用于在客户端上存储信息的API。使用时，你只需将你的数据作为localStorage全局对象的一个属性： 

Javascript代码 
  1. localStorage.someData = "This data is going to persist across page refreshes and browser restarts";  



旧的浏览器不支持该API，不过有各种jQuery插件可以作为替代方案。这些插件在localStorage不可用时提供了其他存储方案。下面是一个例子： 

Javascript代码 
  1. // Check if "key" exists in the storage.  
  2. var value = $.jStorage.get("key");  
  3. if(!value){  
  4. // if not - load the data from the server  
  5. value = load_data_from_server();  
  6. // and save it  
  7. $.jStorage.set("key",value);  



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 13：测试隐藏元素 

通过.hide()和.show()方法可以改变元素的可见性。使用下面的代码可以检测元素是否可见： 

Javascript代码 
  1. if($(element).is(":visible") == "true") {  
  2. //The element is Visible  
  3. }  



Tip 14：找出最近的父DIV 

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

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



英文原文：jQuery Best Practices


联系
我们