高效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 replace方法去空格
May 08 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jquery实现拖拽小方块效果
Dec 10 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
详解php用static方法的原因
2018/09/12 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
发现的以前不知道的函数
2006/09/19 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python pycharm的安装及其使用
2019/10/11 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
土木工程应届生求职信
2013/10/31 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
市场部管理制度
2014/02/02 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
办公室规章制度范本
2015/08/04 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android