jquery使用的15个.docxVIP

1. 尽量使用最新版本的jQuery类库jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢？我们也可以使用免费的CDN服务，例如， Google来存放jQuery类库。!-- Include a specific version of jQuery --script src=/ajax/libs/jquery/1.6.1/jquery.min.js/script!-- Include the latest version in the 1.6 branch --script src=/ajax/libs/jquery/1.6/jquery.min.js/script2. 使用简单的选择器直 到最近，返回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 it3. 数组方式使用jQuery对象 运行选择器的结果是一个jQuery对象。然而，jQuery类库让你感觉你正在使用一个定义了index和长度的数组。// Selecting all the navigation buttons:var buttons = $(#navigation a.button);// We can loop though the collection:for(var i=0;ibuttons.length;i++){console.log(buttons[i]);// A DOM element, not a jQuery object}// We can even slice it:var firstFour = buttons.slice(0,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).filter(:first-child).selector // #container li.filter(:first-child)虽然上面的例子针对同样的元素，选择器则完全不一样。第二个实际上是非法的，你不可