优化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.

优化jQuery选择器的更多相关文章

  1. jQuery选择器的优化选择

    jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]");  ...

  2. jquery选择器效率优化问题

    jquery选择器效率优化问题   jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...

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

    jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...

  4. 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】

    1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

  5. jquery选择器的实现流程简析及提高性能建议!

    当我们洋洋得意的使用jquery强大的选择器功能时有没有在意过jquery的选择性能问题呢,其实要想高效的使用jquery选择器,了解其实现流程是很有必要的,那么这篇文章我就简单的讲讲其实现流程,相信 ...

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

    如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 01 $.fn.be ...

  7. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  8. jQuery常用API之jQuery选择器

    3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...

  9. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

随机推荐

  1. wcf系列(一)--- 寄宿方式

    一.自我寄宿(self-hosting) 1.wcf采用基于终结点(Endpoint)的通信手段:终结点由:地址(Address)+绑定(Binding)+契约(Contract)组成:  Enpoi ...

  2. python自动化运维八:Ansible

    Ansible是新出现的自动化运维工具,基于Python研发.糅合了众多老牌运维工具的优点实现了批量操作系统配置.批量程序的部署.批量运行命令等功能.仅需在管理工作站上安装ansible程序配置被管控 ...

  3. 虚拟机linux安装mysql

    安装mysql时需要的全套安装包 mysql-5.1.73-3.el6_5.i686.rpm mysql-libs-5.1.73-3.el6_5.i686.rpm mysql-server-5.1.7 ...

  4. Android Touch事件分发

    跟touch事件相关的3个方法: public boolean dispatchTouchEvent(MotionEvent ev); //用来分派event public boolean onInt ...

  5. undefined reference to '__android_log_print'解决方案

    1:在源程序中添加头文件 #include <cutils/log.h> 2:在Android.mk中添加 LOCAL_SHARED_LIBRARIES := \ libutils \ l ...

  6. 创建一个catkin工作空间

    先确定自己的环境变量是否设置正确 export | grep ROS 若出现如下的,说明是正确的 declare -x ROSLISP_PACKAGE_DIRECTORIES="" ...

  7. Codeforces Beta Round #7 D. Palindrome Degree —— 字符串哈希

    题目链接:http://codeforces.com/contest/7/problem/D D. Palindrome Degree time limit per test 1 second mem ...

  8. WebDriver API——浏览器控制暨如何学习webdriver API

    在测试过程中我们可能需要对浏览器进行控制,大小控制啊,刷新页面啊,前进后退等等,最常用的两个接口是window和Navigation. 我们最常用的就是这4个,那么你是否感兴趣它们后面是什么,它们是怎 ...

  9. 我在面试.NET/C#程序员时会提出的问题

    我在面试.NET/C#程序员时会提出的问题 2011-03-03 15:38 by 老赵, 28107 visits 说起来我也面试过相当数量的.NET(包括C#,后文不重复)程序员了,有的通过电话, ...

  10. 「UOJ#117」 欧拉回路

    欧拉回路 - 题目 - Universal Online Judge 题意: 给定有向图或无向图,求一条欧拉回路. 题解 心路历程:woc什么傻哔东西->哇真香我的吗!(逃 首先我知道很多人把欧 ...