jQuery代码优化 选择符篇

本文就从选择符的角度简单探讨一下优化jQuery代码的问题。

Sizzle的运行机制

jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来，也就是Sizzle引擎。当我们把一个选择符表达式（比如"#id"、".class"、":nth-child(2)"）传递给$()函数时，Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素，以求得最大的执行速度。以下就是Sizzle会优先选用的几个标准的原生方法（各个方法的用途不再赘述）：


代码如下:

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()

如果浏览器不支持某个方法，或者传入的选择符表达式不是标准选择符（如":eq()"、":odd"或其他自定义选择符），Sizzle就会使用document.getElementsByTagName('*')来取得文档中的所有元素，然后再遍历并测试每个元素。显然，这是万不得已才会用的方法；可想而知，这个最笨的方法，效率也是最低的。

优化示例
举个例子，假设我们要取得页面表单中的所有的文本框，即：

<input type="text">
可以使用两个选择符：


代码如下:

$('input[type="text"]')
$('input:text')

第一个选择符是标准的CSS属性选择符，第二个选择符是自定义选择符。根据前面对Sizzle引擎的分析可知，在大多数现代浏览器（支持原生querySelectorAll()方法的浏览器）中，第一个选择符的速度比第二个要快很多。

再举一个例子。假设有下面两个jQuery查询：


代码如下:

$('input').eq(1)
$('input:eq(1)')

第一个查询先通过标准的CSS元素选择符查找所有input元素，然后再调用jQuery的eq()方法取得匹配结果中的第二个元素（eq()方法的索引参数是从0开始计算的）。第二个查询则使用了自定义的伪类选择符:eq()。通过测试可以看出，第一种方法的速度比第二种方法快得就更多了。

结论
要尽可能使用CSS规范中规定的选择符，除非没有标准选择符，才考虑使用jQuery的自定义选择符。

（注：本文基于《jQuery基础教程（第3版）》相关章节内容编撰而成。）

赞 (0)

相关推荐

  • jQuery 选择符详细介绍及整理

    jQuery 选择符 CSS选择符, 如: $('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li). $('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项. jQuery库支持XPath选择符. 如: $('a[@title]')为取得所有带title属性的链接.也可以不用@符号. 如: $('div[ol]')为取得所以包含一个ol属性的div元素.当然,还允

  • 初窥JQuery(一)jquery选择符 必备知识点

    本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的

  • JQUERY的属性选择符和自定义选择符使用方法（二）

    例子:给链接中含用"wangorg"字符的链接文字加粗 css: 复制代码 代码如下: .abold{ font-weight:bold; } html: 复制代码 代码如下: $('document').ready(function(){ $('a[href*=wangorg]').addClass('abold'); }) 属性选择也可以用组合方式: $('a[href^=http] [href*=wangorg]').addClass('abold') 自定义选择符是JQUERY

  • jQuery 关于伪类选择符的使用说明

    jQuery 关于伪类选择符的使用说明

    jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符 :nth-child的用法         nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:"匹配其父元素下的第N个子或奇偶元素".读着感觉有点绕口,下面让我们通过例子来说明: 复制代码 代码如下: <div>    <ul>    <l

  • jquery选择符快速提取web表单数据示例

    jquery选择符快速提取web表单数据示例

    本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法. 以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法. 我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name

  • jQuery入门第一课 jQuery选择符

    jQuery入门第一课 jQuery选择符

    选择符可以认为是一个增强版的getElementById方法.getElementById方法返回的是一个HTML元素,jQuery选择符返回的是HTML元素的一个包装.利用这个包装集,jQuery赋予了HTML元素更多的可以操作的方法.在JQuery中,处于核心地位的一个函数就是$.对,它就是一个函数,名字有点古怪.这个函数就是选择函数,其一般用法是 var obj=$(selector); 其中selector是一个字符串,就是下面要着重介绍的选择符.返回的是元素的包装集合.事实上,JQue

  • jQuery代码优化 选择符篇

    本文就从选择符的角度简单探讨一下优化jQuery代码的问题. Sizzle的运行机制 jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎.当我们把一个选择符表达式(比如"#id".".class".":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度.以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述

  • jQuery代码优化 事件委托篇

    jQuery代码优化 事件委托篇

    jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一

  • jQuery代码优化 遍历篇

    了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能.本文就从jQuery的遍历机制入手简单探讨一下优化jQuery代码的问题. jQuery对象栈 jQuery内部维护着一个jQuery对象栈.每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中.而每个jQuery对象都有三个属性:context.selector和prevObject,其中的prevObject属性就指向这个对象栈中的

  • CSS基础 CSS选择符

    示例: *[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; } 2.类型选择符 语法: E { sRules } 说明: 类型选择符.以文档语言对象(Element)类型作为选择符. 示例: td { font-size:14px; width:120px; } a { text-decoration:none; } 3.属性选择符 语法: E [ attr ] { sRules } E [ attr

随机推荐