前言
上篇文章《jQuery源码剖析(六)——类数组》最后聊到了jQuery所用到的选择器引擎Sizzle。
接下来的几篇文章会剖析一下关于Sizzle这个引擎。首先当然是选择器的概念以及Sizzle是如何分析这个选择器的。
CSS选择器
我们知道浏览器最终会将HTML文档(或者说页面)解析成一棵DOM树,如下代码将会翻译成以下的DOM树。
1 2 3 4 5 6 7 8 9 | <div> <p> <input type="text" /> </p> <div class="clr"> <input type="checkbox" name="readme" /> <p>Hello World</p> </div> </div> |
为了操作到当中那个checkbox,我们需要有一种表述方式,使得通过这个表达式让浏览器知道我们是想要操作哪个DOM节点。
这个表述方式就是CSS选择器,它是这样表示的:div > p + .clr input[type="checkbox"]
表达的意思是,div底下的p的兄弟节点,该节点的class为clr,并且其属性type为checkbox。 [Read more...]