jQuery选择器(Sizzle)的拆分

时间:2022-12-18 17:20:37
主要包括元素的getElementsByTagName()和getElementById()方法
元素的childNodes、firstChild、lastChild、nextSibling、parentNode、previousSibling属性


Sizzele选择器的工作:
1、Sizzle引擎主要包含一个构造器Sizzle(),3个核心功能函数(matches()、find()和filter()),以及一个表达式对象selectors。

2、Sizzle过滤器主要包含两部分:
1)过滤函数(jQuery.filter()),在该函数中将需要过滤的表达式及其对应的表达式处理函数执行分析,并返回过滤后的jQuery对象
2)过滤表达式对象(Expr = Sizzle.selectors),该对象包含了所有表达式处理方法和匹配的正则表达式。

3、选择器引擎的匹配速度:
ID选择器 > 类型选择器 > Class选择器
//ID选择器速度最快是因为JavaScript内置函数getElementById(),其次是类型选择器,因为使用JavaScript内置函数getElementsByTagName()。速度最慢的是Class选择器,其需要通过解析HTML文档树,并且需要在浏览器内核外递归,这种递归遍历是无法被优化的。

例如:
$("div.red:nth-child(odd)[title=bar]#wap p");
//
解析步骤:
(1)选择DOM文档树中所有的p元素,建立初步结果集
(2)在结果集中选择父级元素为div的元素,形成新的结果集
(3)在新的结果集中筛选class属性为red的元素
(4)解析伪类选择器:nth-child(odd),在结果集中筛选元素的子元素为偶数的元素
(5)解析属性选择器[title=bar],在结果集中筛选元素的title属性为bar的元素
(6)在结果集中筛选id等于wrap的元素