jQuery选择器引擎Sizzle工作原理

时间:2021-04-16

  1、选择器引擎Sizze:

 主要包括元素getElementsByTagName() 和 getElementsById()方法,以及元素的 childNodes、firstChild、nextSibling、parentNode、previousSinbling 属性。

  2、选择器与过滤器

  由:a、$("div[id=value]");选择器,就知道JavaScript 先匹配 div 元素,然后判断 div 元素的 id 属性是否等于 value,如果不等于就从结果集中进行操作。

  b、对于$("div#value"); 选择器也是一样的, div#value 与 div[id=value] 是完全相同的操作,同样的,对于div.class也可以转换为属性选择器符进行操作。

  得:可以把CSS选择器拆分为两大组成部分,或者说可以把选择器分为两类。

  第一类:选择器(selector)。即根据给定的选择符,从DOM 文档树找到相关的元素节点,并存储到结果集中。

  第二类:过滤器(Filter)。根据表达式的条件,在结果集中过滤元素。

  3、Sizzle 过滤器:

  第一部分:过滤函数(jQuery.filter()),在该函数中将对需要过滤的表达式及其对应的表达式处理函数执行分析,并返回过滤后的jQuery对象。

  第二部分:过滤表达式对象(Expr = Sizzle.selectors), 该对象包含了所有表达式处理的方法和匹配的正则表达式。

  4、注:

  第一:多用ID选择器。即使不存在 ID 选择器,也可以从父级元素中添加一个 ID 选择器,这样就会缩短节点访问的路程。

  第二:少直接使用 class 选择器。可以使用复合选择器,例如,使用 tag.class 代替 .class。文档的标签是有限的,但是类可以拓展标签的语义,那么在大部分情况下,使用同一个类的标签也是相同的。当然,对于不必要的复合表达式就应该进行简化,例如 #id2#id1 或者tag#id1 表达式,不如直接使用 #id1即可。

  第三:多用父子关系,少用嵌套关系。例如,使用parent>child 代替 parent child。因为 ">" 是 child 选择器,只从子节点中匹配,不递归。 而 ”“表示为后代选择器,递归匹配所有子节点及子节点的子节点,即后代节点。

  第四:缓存 jQuery 对象。如果选出结果不发生变化,则不妨缓存 jQuery 对象,这样就可以提高系统性能,养成缓存 jQuery 对象的习惯可以让你在不经意间就能够完成主要的性能优化。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章