优化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. |
优化jQuery选择器的更多相关文章
- jQuery选择器的优化选择
jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]"); ...
- jquery选择器效率优化问题
jquery选择器效率优化问题 jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...
- jQuery 选择器和JavaScript 选择器的技巧与异常原因
jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...
- 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- jquery选择器的实现流程简析及提高性能建议!
当我们洋洋得意的使用jquery强大的选择器功能时有没有在意过jquery的选择性能问题呢,其实要想高效的使用jquery选择器,了解其实现流程是很有必要的,那么这篇文章我就简单的讲讲其实现流程,相信 ...
- 如何优化JQuery each()函数的性能
如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 01 $.fn.be ...
- JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- jQuery常用API之jQuery选择器
3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
随机推荐
- wcf系列(一)--- 寄宿方式
一.自我寄宿(self-hosting) 1.wcf采用基于终结点(Endpoint)的通信手段:终结点由:地址(Address)+绑定(Binding)+契约(Contract)组成: Enpoi ...
- python自动化运维八:Ansible
Ansible是新出现的自动化运维工具,基于Python研发.糅合了众多老牌运维工具的优点实现了批量操作系统配置.批量程序的部署.批量运行命令等功能.仅需在管理工作站上安装ansible程序配置被管控 ...
- 虚拟机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 ...
- Android Touch事件分发
跟touch事件相关的3个方法: public boolean dispatchTouchEvent(MotionEvent ev); //用来分派event public boolean onInt ...
- undefined reference to '__android_log_print'解决方案
1:在源程序中添加头文件 #include <cutils/log.h> 2:在Android.mk中添加 LOCAL_SHARED_LIBRARIES := \ libutils \ l ...
- 创建一个catkin工作空间
先确定自己的环境变量是否设置正确 export | grep ROS 若出现如下的,说明是正确的 declare -x ROSLISP_PACKAGE_DIRECTORIES="" ...
- Codeforces Beta Round #7 D. Palindrome Degree —— 字符串哈希
题目链接:http://codeforces.com/contest/7/problem/D D. Palindrome Degree time limit per test 1 second mem ...
- WebDriver API——浏览器控制暨如何学习webdriver API
在测试过程中我们可能需要对浏览器进行控制,大小控制啊,刷新页面啊,前进后退等等,最常用的两个接口是window和Navigation. 我们最常用的就是这4个,那么你是否感兴趣它们后面是什么,它们是怎 ...
- 我在面试.NET/C#程序员时会提出的问题
我在面试.NET/C#程序员时会提出的问题 2011-03-03 15:38 by 老赵, 28107 visits 说起来我也面试过相当数量的.NET(包括C#,后文不重复)程序员了,有的通过电话, ...
- 「UOJ#117」 欧拉回路
欧拉回路 - 题目 - Universal Online Judge 题意: 给定有向图或无向图,求一条欧拉回路. 题解 心路历程:woc什么傻哔东西->哇真香我的吗!(逃 首先我知道很多人把欧 ...