优化jQuery选择器

优化jQuery选择器

选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。

jQuery 扩展

如果可能的话,避免使用jQuery扩展选择器。这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧。


1

2

3

4

5

// Slower (the zero-based :even selector is a jQuery extension)

$( "#my-table tr:even" );

// Better, though not exactly equivalent

$( "#my-table tr:nth-child(odd)" );

记住,许多jQuery的扩展,包括在上面的例子中的:even,没有在CSS规范准确的对应。在某些情况下,这些扩展的方便性可能会超过其性能成本。

避免过度使用选择器


1

2

3

4

$( ".data table.attendees td.gonzalez" );

// Better: Drop the middle if possible.

$( ".data td.gonzalez" );

减少DOM节点同样可以提高选择器的效率,因为这样可以使寻找元素时减少遍历的层数。

ID选择器

使用以ID选择器开始的选择器确保万无一失。


1

2

3

4

5

// Fast:

$( "#container div.robotarm" );

// Super-fast:

$( "#container" ).find( "div.robotarm" );

第一种方法 DOM 使用document.querySelectorAll(). 第二种方法 jQuery 使用效率更高的document.getElementById(), 尽管提高的效率会受后续的.find()的影响。

关于老版本的浏览器

使用就浏览器比如ie8或ie8-时有必要考虑一下建议

明确选择器

右边的选择器尽可能明确,左边的不用。


1

2

3

4

5

// Unoptimized:

$( "div.data .gonzalez" );

// Optimized:

$( ".data td.gonzalez" );

如果可能的话,在你的右边选择器使用tag.class形式,左边使用tag或.class。

避免使用通用选择器

通用选择器放在任何地方效率都不高。


1

2

3

4

5

6

$( ".buttons > *" ); // Extremely expensive.

$( ".buttons" ).children(); // Much better.

$( ":radio" ); // Implied universal selection.

$( "*:radio" ); // Same thing, explicit now.

$( "input:radio" ); // Much better.

时间: 2024-10-24 11:31:40

优化jQuery选择器的相关文章

我自作聪明,擅自主张的优化了jQuery选择器。

</pre><pre name="code" class="javascript">闲了一会,写篇博客. 最近项目里面,我自作聪明,擅自主张的,自我感觉的优化了一下jQuery选择器.哈哈哈~~~~ ( ﹁ ﹁ ) 我这么想的: jQuery最底层采用getById getByTagName,2.0版本之后结合最近html5的API--getByClassName. 如果没有getByClassName.将进行所搜查找className选择器

jquery选择器效率优化问题

jquery选择器效率优化问题   jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("click",function() {}); $('#btn').css("border","1px solid red"); $("#btn").css("background-color","green&qu

jQuery 选择器和JavaScript 选择器的技巧与异常原因

jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器变得简洁易用. 而且避免了易错问题. jquery选择器返回的永远是一个数组对象,如果没有找到指定的元素,就会返回一个空的数组, 所以判断一个jquery对象是否存在时,不能用如下语句 if($("tr")){ //code } 而应该用数组长度来判断,如下语句 if($("tr

前端编程提高之旅(十三)----jquery选择器

  Jquery代表javascript和query,即对javascript查询操作的类库,jquery是web前端界的事实标准.最近读<锋利的jquery>,发现这本书最大特点是,更深层的讨论一些jquery使用情境和优化方法,对于有一定jquery使用经验的开发者有独特价值.本篇算是乐帝读此书,对选择器和DOM操作加深理解的总结.    javascript自身包含三大弊端: 复杂的文档对象模型(DOM) 不一致的浏览器实现和便捷的开发 调试工具的缺乏    Jquery存在的意义就在于

如何优化JQuery each()函数的性能

如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 01 $.fn.beautifyTable = function(options) {   02     //定义默认配置项,再用options覆盖   03     return this.each(function() {   04         var table = $(this),   05        

jQuery 选择器2

jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class=&qu

JavaScript(15)jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

JQuery选择器

JQuery选择器 通过一个样例来分辨这些选择器,首先做一个初始的页面: 1.HTML 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>选择器</title> 6 <script type="text/javascript" src="../JQue