jquery sizzle 选择器浅析

看了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。下面是流程

/**
1.sizzle 通过
 chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g
这个正则进行匹配，

2.把我们传来的参数'.test'，匹配成'.test' 放到数组

3.检测浏览器是否支持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 出现了nth|eq|gt|lt|first|last|even|odd  这样的字符的时候，从左向右！ 所谓从左向右，比如 $('div img:eq(1)')  先把所有的div 选出来保存，在把img选出来通过eq（1）过滤保存， 在对结果集操作，进行多次选择了

评论

1 楼 haixin3036 2014-07-16  

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。http://www.adminwang.com/jquery/对Css3和各种主流浏览器做了兼容性处理.jquery使开发者把更多的精力用到程序的功能实现上,而不是对兼容性等问题的处理.