【Sizzle选择器引擎介绍】的更多相关文章

Sizzle选择器引擎介绍

一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍.Sizzle发展到现在,以jQuery1.8为分水岭,大体上可以分为两个阶段,后面的版本中引入了编译函数的概念,Sizzle的源码变得更加难读.不再兼容低版本浏览器,而且看起来更加零散.本次阅读的是Sizzle第一个阶段的最终版本jQuery1.7,从中收获颇多,一方面是框架设计的思路,另外一方面是…

[转]JQuery - Sizzle选择器引擎原理分析

原文: https://segmentfault.com/a/1190000003933990 ----------------------------------------------------------------------- 说明:14年学习的jquery源码,搬到这里供大家交流. 一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍.S…

jQuery源码分析系列（三）Sizzle选择器引擎-下

选择函数:select() 看到select()函数,if(match.length === 1){}存在的意义是尽量简化执行步骤,避免compile()函数的调用. 简化操作同样根据tokenize()函数获得标签数组,然后对标签数组首元素是特殊ID选择器的情况进行了判断,之后对标签数组进行遍历匹配,只有当匹配到正确的选择器seed=find(){}并且token为空,此时才是找到了正确结果. select = Sizzle.select = function (selector, conte…

jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——编译原理

这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白.这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏. 看这一部分的源码需要有一个完整的概念后去看才比较容易看懂,所以我们先把整个编译的原理阐述以后再进行解析. 还是以上次的那个CSS选择器为例:#chua > a + .group labe[for="age"].按照我们正常解析CSS的思路从右往左解析(这是效率较高的处理方法),解析之前词法分析完毕,词法分析结果保存在to…

jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——词法解析

jQuery源码9600多行,而Sizzle引擎就独占近2000行,占了1/5.Sizzle引擎.jQuery事件机制.ajax是整个jQuery的核心,也是jQuery技术精华的体现.里面的有些策略确实很值得学习,先膜拜之,然后细细学习. 在学习Sizzle引擎之前我们先准备一点知识,和先了解Sizzle引擎的一点工作原理. <div id="chua"> <a> <span>chua的测试用例</span> </a> &l…

jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——总结与性能分析

Sizzle引擎的主体部分已经分析完毕了,今天为这部分划一个句号. a. Sizzle解析流程总结 是时候该做一个总结了.Sizzle解析的流程已经一目了然了. 1.选择器进入Sizzle( selector, context, results, seed )函数,先对选择器不符合要求的(比如没有选择器.选择器不为字符串.上下文环境context不是节点元素且不是document)排除,直接返回:接着判断如果选择器是简单的选择器(只有一个元选择器,比如“#ID”.“.CLASS”.“TAG”等)…

jQuery源码分析系列（二）Sizzle选择器引擎-上

前言 我们继续从init()方法中的find()方法往下看, jQuery.find = Sizzle; ... find: function (selector) { /** ... */ ret = this.pushStack([]); // 还是调用的递归栈方法 for (i = 0; i < len; i++) { jQuery.find(selector, self[i], ret); // 寻找selector,也就是进入Sizzle构造函数 } return len > 1 ?…

jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——一些有用的Sizzle API

说一下Sizzle中零碎的API.这些API有的被jQuery接管,直接使用jQuery.xxx就可以使用,有的没有被接管,如果要在jQuery中使用,使用方法是jQuery.find.xxx. 具体看一下有哪些API //筛选出elements满足CSS选择器表达式expr的节点[最终返回的是节点数组]Sizzle.matches = function( expr, elements ) {...} //判断dom元素elem是否匹配CSS选择器表达式exprSizzle.matchesSel…

jQuery选择器引擎和Sizzle介绍

一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍.Sizzle发展到现在,以jQuery1.8为分水岭,大体上可以分为两个阶段,后面的版本中引入了编译函数的概念,Sizzle的源码变得更加难读.不再兼容低版本浏览器,而且看起来更加零散.本次阅读的是Sizzle第一个阶段的最终版本jQuery1.7,从中收获颇多,一方面是框架设计的思路,另外一方面是…

sizzle选择器的使用

<!doctype html> <html> <head> <meta charset="utf-8"> <title>sizzle选择器</title> <meta name="keywords" content=""> <meta name="description" content=""> </hea…