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

本文实例讲述了高效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常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

(0)

相关推荐

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • jquery选择器-根据多个属性选择示例代码

    根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1.简化代码的编写2.隐式迭代3.无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

  • jQuery选择器全集详解

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu

  • jquery选择器排除某个DOM元素的方法(实例演示)

    jquery选择器众多,使用选取某个DOM的方法有很多种,如何在选取的某个元素集上面做一些排除呢?下面通过几个实例说明: 1.选择所有的img元素,排除class=phpernote的元素的个数: 复制代码 代码如下: $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); 2.获取id=phpernote下面所有没有class=com的li元素的个数 复制代码 代码如下: $('#phpernote

  • Jquery选择器中使用变量实现动态选择例子

    例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

  • jQuery Selector选择器小结

    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • jQuery过滤选择器:not()方法使用介绍

    jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf

  • jquery 属性选择器(匹配具有指定属性的元素)

    jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("

随机推荐