jquery 选择器引擎sizzle浅析

I'm sorry!我用jquery的大概有一年了，只知道$(selector)，其内部选择器的流程走向完全不清晰！于是看了jquery的源码，jquery用的选择器的引擎是sizzle，是jquery的作者另一开源项目，在github上面有，号称最快的dom选择器！不到2000行代码。

上面说了不是很精彩的开场白，我么来个 for example: $('.test') 在jquery的流程是怎么走的呢？
1.首先会做如下的判断


代码如下:

/**
*关于 querySelectorAll函数
*返回当前文档中匹配一个特定选择器的所有的元素
*var nodelist = element.querySelectorAll("div.test");
*支持浏览器 ie8+,Chrome,Firefox(3.5)
* 如果你不清楚可以google 一下
*/
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "<p class='TEST'></p>";
// Safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
Sizzle = function( query, context, extra, seed ) {
//使用querySelectorAll 来查询
}
}

如果你的浏览器是ie8+ 或者 谷歌，直接通过内置的querySelectorAll(".test")返回dom结构。 如果你使用是ie6，那么下面事情发生了
2. 不支持querySelectorAll 就会启动内部 sizzle。下面是流程


代码如下:

/**
.sizzle 通过
chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g
这个正则进行匹配，
.把我们传来的参数'.test'，匹配成'.test' 放到数组
.检测浏览器是否支持getElementsByClassName 如果支持，则通过此函数返回dom，如果不支持此函数则 context.getElementsByTagName( "*" ) ,通过上下文把所有的元素选出来，在通过循环，选择className = 'test' 的元素，放入数组返回dom。
*/

ok，以上是$('.test')的流程，如果你很迷惑，你可以看看源码，调试一下。
关于sizzle的选择器
个人认为，sizzle选择器是增强版的querySelectorAll 函数， 因为querySelectorAll 不支持 'div.test :eq(1)' 这样的selector 和css3选择！
当你的selector里面不出现nth|eq|gt|lt|first|last|even|odd 这样的字符时候， 从右向左，所谓的从右向左，比如 $('div img') 首先会把所有的img 选出来，通过parent 是div 进行过滤 。 这样很高效的原因是只进行一次dom的查询！
当你selector 出现了'eq(1)' 这样的字符的时候，就变正常了，从左向右！这是因为要对结果集进行过滤。
思考
$('div img:eq(0)') 与 $('div img').first() 哪个效率高？ 个人认为 后一个高一些，因为 第一从左向右效率低下！没有测试过！理论推导！

今天大致看了下流程，具体的代码没怎么细研究！这里面好的思想值得学习和吸收
欢迎拍砖

赞 (0)

相关推荐

  • jQuery源码分析之sizzle选择器详解

    前言 Sizzle 原本是 jQuery 中用来当作 DOM 选择器的,后来被 John Resig 单独分离出去,成为一个单独的项目,可以直接导入到项目中使用. 点击这里下:jquery/sizzle. 本来我们使用 jQuery 当作选择器,选定一些 #id 或 .class,使用 document.getElementById 或 document.getElemensByClassName 就可以很快锁定 DOM 所在的位置,然后返回给 jQuery 当作对象.但有时候会碰到一些比较复杂

  • jQuery选择器源码解读（一）：Sizzle方法

    对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明出处,多谢. /* * Sizzle方法是Sizzle选择器包的主要入口,jQuery的find方法就是调用该方法获取匹配的节点 * 该方法主要完成下列任务: * 1.对于单一选择器,且是ID.Tag.Class三种类型之一,则直接获取并返回结果 * 2.对于支持querySelectorAll方法

  • jQuery源码分析-04 选择器-Sizzle-工作原理分析

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: "div > p" 块表达式: "div" "p" 并列选择器表达式: "div, p" 块分割器: Sizzle中的chunker正则,

  • jQuery选择器源码解读（六）：Sizzle选择器匹配逻辑分析

    近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jQuery-1.10.2版本的Sizzle的匹配逻辑(预编译结果)做一整体说明,这里就不谈过多的细节了. Sizzle的匹配过程采用的是以从右到左的逆向匹配法为基础的改进版本,因为HTML的搜索毕竟和文本匹配有差异,它有自己独特的一面,所以,需要针对HTML的搜索进行优化.在此先申明一点,下面所说的关

  • jquery 选择器引擎sizzle浅析

    I'm sorry!我用jquery的大概有一年了,只知道$(selector),其内部选择器的流程走向完全不清晰!于是看了jquery的源码,jquery用的选择器的引擎是sizzle,是jquery的作者另一开源项目,在github上面有,号称最快的dom选择器!不到2000行代码. 上面说了不是很精彩的开场白,我么来个 for example: $('.test') 在jquery的流程是怎么走的呢? 1.首先会做如下的判断 复制代码 代码如下: /** *关于 querySelector

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

    本文实例讲述了高效jQuery选择器的5个技巧.分享给大家供大家参考,具体如下: 顾名思义,jQuery专注于查询(queries).库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素. jQuery使用浏览器原生API方法获取DOM集合.现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法).然而,老版本的浏览器可能只提供getElementById以及getElementB

  • jQuery选择器源码解读（四）：tokenize方法的Expr.preFilter

    Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(runescape, funescape)

  • jQuery选择器全集详解

    jQuery选择器全集详解

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

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

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

  • JQuery选择器、过滤器大整理

    经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了.所有代码均经过测试. 首先HTML代码 复制代码 代码如下: HTML Code <html> <head> <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> </head> <body> <form name=&quo

  • jquery选择器简述

    jquery选择器简述

    jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房,得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性. jquery选择器大方向可以分为这样: 下面我们先来看看基本选择器总的CSS选择器: 1.标签选择器: $("element") 其中,参数element,表示待查找的HTML标记名,如$("div"),标签选择器获取元素的方式是高效的,因为它继承自javascript中的ge

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

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

  • JQuery 选择器、DOM节点操作练习实例

    JQuery 选择器、DOM节点操作练习实例

    一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s

  • jQuery选择器中的特殊符号处理方法

    一般情况下,在jQuery选择器中,我们很少会用到诸如"."."#"."("."["等特殊字符,因为根据W3C规定,HTML文档中属性的值是不能包含有这些个特殊字符的,但是在实际应用中,偶尔也会遇到表达式中含有"#"和"."等特殊字符 那么是如何处理这些个特殊字符的呢? HTML代码: <div id="id.a">aa</div> <d

随机推荐