高效jQuery选择器的5个技巧实例分析


Posted in jQuery onNovember 26, 2019

本文实例讲述了高效jQuery选择器的5个技巧。分享给大家供大家参考,具体如下:

顾名思义,jQuery专注于查询(queries)。库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素。

jQuery使用浏览器原生API方法获取DOM集合。现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法)。然而,老版本的浏览器可能只提供getElementById以及getElementByTagName。在最坏的情况下,jQuery的Sizzle引擎必须解析选择器字符串来匹配元素。

下面是可以帮助你优化jQuery选择器的5点提示:

1. 尽量使用ID

HTML ID属性在每一个页面上都是唯一的,并且即使老版本的浏览器也可以非常迅速地定位一个元素:

$("#myelement");

2. 避免只使用类名称

下面的类选择器在现代浏览器中执行迅速:

$(".myclass");

不幸的是,在老版本的浏览器,比如IE6/7和Firefox 2,jQuery必须检查页面上的每一个元素来确定“myclass”是否被元素所包含。

如果通过标签名加以限定可以让选择器更加的高效,例如:

$("div.myclass");

jQuery现在可以将搜索范围限定在DIV元素。

3. 保持简单!

避免过于复杂的选择器。除非你要查找一个极其复杂的HTML文档,很少有需要使用多于2,3个修饰符的情况。

考虑下面的复杂选择器:

$("body #page:first-child article.main p#intro em");

p#intro 一定是唯一的,因而选择器可以这样简化:

$("p#intro em");

4. 从左往右增加特异性

了解一点jQuery选择器引擎的相关知识是有帮助的。查找首先从最后一个选择器开始,因此,在老版本的浏览器中,一个类似于这样的查询:

$("p#intro em");

将所有的em元素加载进一个数组。然后判断每一个节点的父元素,进而排除那些找不到p#intro父节点标签的元素。如果页面上包含数百个em标签的话,查询会变得十分的低效。

根据你的文档,查询可以通过优先使用最佳限定符来获得优化。其结果可以作为子选择器的出发点,例如:

$("em", $("p#intro")); // or
$("p#intro").find("em");

5. 避免重复选择

很少需要重复使用同样的选择器两次。下面的代码对每一个p标签都选择了3次:

$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");

记住jQuery支持链式操作;多个方法可以应用于同一个集合之上。因此,同样效果的代码可以通过单一的选择器重写:

$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");

如果需要多次使用同一组元素集合,你应该将jQuery对象使用变量加以缓存,例如:

var $p = $("p");
$p.css("color", "blue");
$p.text("Text changed!");

与标准的DOM集合不同,jQuery集合并不是实时的,并且对象不会在paragraph标签从文档中新增或者移除时自动更新。你可以利用这个限制,创建DOM集合,并在需要时将其传递给jQuery函数,例如:

var p = document.getElementByTagName("p");
$(p).css("color", "blue");
// update the DOM
$(p).text("Text changed!");

原文链接:5 Tips for More Efficient jQuery Selectors

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
Jquery异步上传文件代码实例
Nov 13 #jQuery
You might like
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
js分页代码分享
2014/04/28 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python编程中的异常处理教程
2015/08/21 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
财务会计应届生求职信
2013/11/24 职场文书
项目转让协议书
2014/10/27 职场文书
个人德育工作总结
2015/03/05 职场文书
赤壁观后感(2)
2015/06/15 职场文书
单身证明范本
2015/06/15 职场文书
在职证明书模板
2015/06/15 职场文书
道士塔读书笔记
2015/06/30 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python