15个值得开发人员关注的jQuery开发技巧和心得

日期：2011/11/16
在这篇文章中，我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢！
1. 尽量使用最新版本的jQuery类库

jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢？
我们也可以使用免费的CDN服务，例如， Google来存放jQuery类库。

1. <br><br><br>

复制代码

2. 使用简单的选择器

直 到最近，返回DOM元素的方式都是解析选择器字符串，javascript循环和内建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三种 方式的整合使用。但是现代浏览器都开始支持querySelectorAll()，这个方法能够理解CSS查询器，而且能带来显著的性能提升。
然而，我们应该避免使用复杂的选择器返回元素。更不用说很多用户使用老版本的浏览器，强迫jQuery去处理DOM树。这个方式非常慢。

1. $('li[data-selected="true"] a')        // Fancy, but slow <br>$('li.selected a')        // Better <br>$('#elem')        // Best

复制代码

选择id是最快速的方式。如果你需要使用class名称， 那么你最好带上tag名称，这样会更快些。特别是在老浏览器和移动设备上。
访问DOM是javascript应用最慢的方式 ，因此尽量少使用。使用变量去保存选择器，这样会使用cache来保存。性能更好。

1. var buttons = $('#navigation a.button');  // Some prefer prefixing their jQuery variables with $: <br>var $buttons = $('#navigation a.button');

复制代码

另 外一个值得做的是jQuery给了你很多的额外便利选择器 ，例如，:visible，:hidden，:animated还有其它，这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用 querySelectorAll()方法。为了弥补这个问题，你需要先选择元素，再过滤，如下：

1. $('a.button:animated');        // Does not use querySelectorAll() <br>$('a.button').filter(':animated');        // Uses it

复制代码

3. 数组方式使用jQuery对象

运行选择器的结果是一个jQuery对象。然而，jQuery类库让你感觉你正在使用一个定义了index和长度的数组。

1. // Selecting all the navigation buttons:<br>var buttons = $('#navigation a.button');<br><br>// We can loop though the collection:<br>for(var i=0;i<buttons.length;i++){<br>        console.log(buttons[i]);        // A DOM element, not a jQuery object<br>}<br><br>// We can even slice it:<br>var firstFour = buttons.slice(0,4);

复制代码

为了存取数据你需要调用如下代码：

1. if(buttons){        // This is always true<br>        // Do something<br>}<br><br>if(buttons.length){ // True only if buttons contains elements<br>        // Do something<br>}

复制代码

如果你想看看实际的例子，请参考这篇教程：使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
data()的jQuery文档：data() in the jQuery docs
15. 本地存储和jQuery

本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:

1. $('#container li:first-child').selector    // #container li:first-child<br>$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

复制代码

但是对于老的浏览器来说，这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。
以上是我们介绍的15个jQuery的开发技巧，如果你有更多的技巧和评论，请在下面给我们留言， 谢谢支持！
15个值得开发人员关注的jQuery开发技巧和心得

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！