不是所有的选择器都需要去分词,生成相应的匹配函数,这样流程比较复杂,当浏览器具备原生的方法去匹配元素是,没有理由不优先匹配,下面看看进入Sizzle后,它是怎么优先匹配这些元素的:

function Sizzle( selector, context, results, seed ) {
/*
执行$("ul.list>li span:eq(1)")时,递归第二次时,
selector
"ul.list>li span" */
var match, elem, m, nodeType,
// QSA vars
i, groups, old, nid, newContext, newSelector; if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
setDocument( context );
} context = context || document;
results = results || []; if ( !selector || typeof selector !== "string" ) {
return results;
} if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) {
return [];
} if ( documentIsHTML && !seed ) {
// Shortcuts
if ( (match = rquickExpr.exec( selector )) ) {//先看是不是简单的ID选择器 TAG选择器 类选择器
// Speed-up: Sizzle("#ID")
if ( (m = match[1]) ) {
if ( nodeType === 9 ) {
elem = context.getElementById( m );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE, Opera, and Webkit return items
// by name instead of ID
if ( elem.id === m ) {
results.push( elem );
return results;
}
} else {
return results;
}
} else {
// Context is not a document
if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
contains( context, elem ) && elem.id === m ) {
results.push( elem );
return results;
}
} // Speed-up: Sizzle("TAG")
} else if ( match[2] ) {
push.apply( results, context.getElementsByTagName( selector ) );
return results; // Speed-up: Sizzle(".CLASS")
} else if ( (m = match[3]) && support.getElementsByClassName && context.getElementsByClassName ) {
push.apply( results, context.getElementsByClassName( m ) );
return results;
}
} // QSA path 是否支持document.querySelectorAll
if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
nid = old = expando;
newContext = context;
newSelector = nodeType === 9 && selector; // qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
groups = tokenize( selector ); if ( (old = context.getAttribute("id")) ) {
nid = old.replace( rescape, "\\$&" );
} else {
context.setAttribute( "id", nid );
}
nid = "[id='" + nid + "'] "; i = groups.length;
while ( i-- ) {
groups[i] = nid + toSelector( groups[i] );
}
newContext = rsibling.test( selector ) && context.parentNode || context;
newSelector = groups.join(",");
} if ( newSelector ) {
try {
push.apply( results,
newContext.querySelectorAll( newSelector )
);
return results;
} catch(qsaError) {
} finally {
if ( !old ) {
context.removeAttribute("id");
}
}
}
}
} // All others
//去除选择器首位空格,并进入select函数
return select( selector.replace( rtrim, "$1" ), context, results, seed );
}

先看:rquickExpr

rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,
当执行:match = rquickExpr.exec( selector ),产生一个长度为4的数组:其中match[1]ID匹配项,match[2]为tag匹配项,match[3]为类匹配项
比如:当执行$("div")时,
match=["div", undefined, "div", undefined]
接下来就判断具体符合哪种选择器了,然后用原生方法直接获得。 如果不是上述三种选择器,那么开始试探querySelectorAll:
// QSA path 是否支持document.querySelectorAll
if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {

然后就就开始try尝试:

if ( newSelector ) {
try {
push.apply( results,
newContext.querySelectorAll( newSelector )
);
return results;
} catch(qsaError) {
} finally {
if ( !old ) {
context.removeAttribute("id");
}
}
}

如果成功就返回results

sizzle源码分析 (2)ID 类 tag querySelectorAll 快速匹配的更多相关文章

  1. Sizzle源码分析 (一)

    Sizzle 源码分析 (一) 2.1 稳定 版本 Sizzle 选择器引擎博大精深,下面开始阅读它的源代码,并从中做出标记 .先从入口开始,之后慢慢切入 . 入口函数 Sizzle () 源码 19 ...

  2. JUC源码分析-其它工具类(一)ThreadLocalRandom

    JUC源码分析-其它工具类(一)ThreadLocalRandom ThreadLocalRandom 是 JDK7 在 JUC 包下新增的随机数生成器,它解决了 Random 在多线程下多个线程竞争 ...

  3. sizzle源码分析 (4)sizzle 技术总结及值得我们学习的地方

    分析sizzle源码并不是为了去钻牛角尖,而是去了解它的思想,学习下期中一些技术的运用. 1,sizzle中的正则表达式jquery源码中充斥着各种正则表达式,能否看懂其源码的关键之一就是对正则表达式 ...

  4. Sizzle源码分析:一 设计思路

    一.前言 DOM选择器(Sizzle)是jQuery框架中非常重要的一部分,在H5还没有流行起来的时候,jQuery为我们提供了一个简洁,方便,高效的DOM操作模式,成为那个时代的经典.虽然现在Vue ...

  5. Struts2 源码分析——Action代理类的工作

    章节简言 上一章笔者讲到关于如何加载配置文件里面的package元素节点信息.相信读者到这里心里面对struts2在启动的时候加载相关的信息有了一定的了解和认识.而本章将讲到关于struts2启动成功 ...

  6. 转:Ogre源码分析之Root类、Facade模式

    Ogre源码分析(一)Root类,Facade模式 Ogre中的Root对象是一个Ogre应用程序的主入口点.因为它是整个Ogre引擎的外观(Façade)类.通过Root对象来开启和停止Ogre是最 ...

  7. 源码分析——Action代理类的工作

     Action代理类的新建 通过<Struts2 源码分析——调结者(Dispatcher)之执行action>章节我们知道执行action请求,最后会落到Dispatcher类的serv ...

  8. 精尽Spring Boot源码分析 - SpringApplication 启动类的启动过程

    该系列文章是笔者在学习 Spring Boot 过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring Boot 源码分析 GitHub 地址 进行阅读 Sprin ...

  9. DolphinScheduler源码分析之EntityTestUtils类

    1 /* 2 * Licensed to the Apache Software Foundation (ASF) under one or more 3 * contributor license ...

随机推荐

  1. Struts2 DomainModel、ModelDriven接收参数

    一.DomainModel(域模型) 1. 应用场景:一般我们在struts2的action中接收参数通常是如下方式 package cn.orlion.user; import com.opensy ...

  2. 深入理解CSS定位中的偏移

    × 目录 [1]定位 [2]包含块 [3]偏移属性[4]绝对定位[5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位 ...

  3. Android属性动画之第一重修炼总结

    经过这两天对ObjectAnimator属性动画的学习,基本对Android提供的属性动画有了一定的认识,现在就为大家以一个类似扇形打开的效果做总结. 效果图: 下面就让我们用刚刚学到的属性动画效果, ...

  4. Spring3 整合 Hibernate4实现数据库操作(1)

    Hibernate知识学习:http://justsee.iteye.com/blog/1061576 注意Hibernate4在开发当中的一些改变  :http://snake-hand.iteye ...

  5. CentOS yum安装Apache + PHP + Tomcat7 + MySQL

    Linux平台上用得最多的web环境就是php.java和MySQL了,会搭建这个环境,就能把很多开源程序跑起来. 作为一个程序猿,虽然并不用精通运维的活,但基本的Linux环境搭建还是要掌握比较好, ...

  6. 再次用CodeIgniter实现简易blog

    天变冷了,人也变得懒了不少,由于工作的需要,最近一直在学习CodeIgniter(CI)框架的使用,没有系统的从PHP基本语法学起,在网上靠百度谷歌,东拼西凑的实现了一些简单的功能.所以,老PHPer ...

  7. 【Java基础】序列化与反序列化深入分析

    一.前言 复习Java基础知识点的序列化与反序列化过程,整理了如下学习笔记. 二.为什么需要序列化与反序列化 程序运行时,只要需要,对象可以一直存在,并且我们可以随时访问对象的一些状态信息,如果程序终 ...

  8. ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题

    今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...

  9. AndroidManifest.xml配置文件

    AndroidManifest.xml启动文件 主activity: <activity android:name="com.example.android01.MainActivit ...

  10. [New Portal]Windows Azure Virtual Machine (11) 在本地使用Hyper-V制作虚拟机模板,并上传至Azure (1)

    <Windows Azure Platform 系列文章目录> 本章介绍的内容是将本地Hyper-V的VHD,上传到Azure数据中心,作为自定义的虚拟机模板. 注意:因为在制作VHD的最 ...