jquery 选择器引擎sizzle浅析
更新时间：2013年02月06日 15:26:35 作者：
用jquery的大概有一年了，只知道$(selector)，其内部选择器是如何实现并不完全不清晰，汗颜啊于是看了jquery的源码,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() 哪个效率高？ 个人认为 后一个高一些，因为 第一从左向右效率低下！没有测试过！理论推导！
今天大致看了下流程，具体的代码没怎么细研究！这里面好的思想值得学习和吸收
欢迎拍砖
上面说了不是很精彩的开场白，我么来个 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() 哪个效率高？ 个人认为 后一个高一些，因为 第一从左向右效率低下！没有测试过！理论推导！
今天大致看了下流程，具体的代码没怎么细研究！这里面好的思想值得学习和吸收
欢迎拍砖
相关文章
这篇文章主要介绍了jQuery基于随机数解决中午吃什么去哪吃问题,涉及jQuery基于事件响应及随机数动态操作页面元素相关实现技巧,需要的朋友可以参考下2018-12-12
迷上jQuery,相对于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研习原生JavaScript.2010-07-07
jQuery增加了并扩展了基本的事件处理机制，不但提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力。本文将对此进行详细介绍，需要的朋友一起来看下吧2016-12-12
这篇文章主要介绍了jqGrid 学习笔记整理——进阶篇(一 )的相关资料,需要的朋友可以参考下2016-04-04
这个tab页是把数据全部取回来再显示，所以没有数据缓存的特点。但是因为数据全部是显示的html代码，所以对搜索引擎是友好的，也许对seo有好处。2009-09-09
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能，很简单很强大，喜欢的朋友可以参考下。2011-04-04
这篇文章主要介绍了jquery动画特效结合css实现侧边弹出的垂直导航的方法及代码分享,需要的朋友可以参考下2014-12-12
这篇文章介绍了jquery利用ajax调用后台方法实例，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家详细介绍了jQuery实现简单弹幕制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。2011-08-08
最新评论