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

15个值得开发人员关注的jQuery开发技巧和心得 很多jQuery开发人员可能不知道开发技巧，下面笔者总结了15个值得开发人员关注的jQuery开发技巧和心得，供大家学习和参考，希望对开发人员有所帮助： 1. 尽量使用最新版本的jQuery类库 jQuery工程中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢？ 我们也可以使用免费的CDN效劳，例如， Google来存放jQuery类库。 script src= ://ajax.googleapis /ajax/libs/jquery/1.6.1/jquery.min.js/script script src= ://ajax.googleapis /ajax/libs/jquery/1.6/jquery.min.js/script 2. 使用简单的选择器 直到最近，返回DOM元素的方式都是解析选择器字符串，javascript循环和内建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三种方式的整合使用。但是现代浏览器都开始支持querySelectorAll()，这个方法能够理解CSS查询器，而且能带来显著的性能提升。 然而，我们应该防止使用复杂的选择器返回元素。更不用说很多用户使用老版本的浏览器，强迫jQuery去处理DOM树。这个方式非常慢。 $(li[data-selected=true] a) // Fancy, but slow $(li.selected a) // Better $(#elem) // Best 选择id是最快速的方式。如果你需要使用class名称， 那么你最好带上tag名称，这样会更快些。特别是在老浏览器和移动设备上。 访问DOM是javascript应用最慢的方式 ，因此尽量少使用。使用变量去保存选择器，这样会使用cache来保存。性能更好。 var buttons = $(#navigation a.button); // Some prefer prefixing their jQuery variables with $: var $buttons = $(#navigation a.button); 另外一个值得做的是jQuery给了你很多的额外便利选择器 ，例如，:visible，:hidden，:animated还有其它，这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用querySelectorAll()方法。为了弥补这个问题，你需要先选择元素，再过滤，如下： $(a.button:animated); // Does not use querySelectorAll() $(a.button).filter(:animated); // Uses it 3. 数组方式使用jQuery对象 运行选择器的结果是一个jQuery对象。然而，jQuery类库让你感觉你正在使用一个定义了index和长度的数组。 // Selecting all the navigation buttons: var buttons = $(#navigation a.button); // We can loop though the collection: for(var i=;ibuttons.length;i++){ console.log(buttons[i]); // A DOM element, not a jQuery object } // We can even slice it: var firstFour = buttons.slice(,4); 如果性能是你关注的，那么使用简单for或者while循环来处理，而不是$.each()，这样能使你的代码更快。 检查长度也是一个检查你的collection是否含有元素的方式。 if(buttons){ // This is always true // Do something } if(buttons.length){ // True only if buttons contains elements // Do something } 4. 选择器属性 jQuery提供了一个属性，这个属性显示了用来做链式的选择器。 $(#container li:first-child).selector // #container li:first-child $(#container li).fil