Javascript Selectors by:Denis

UED Team Design

目录• Selectors长什么样• JS Selectors & CSS

Selectors• JS Selectors与框架• 怎么用 Selectors引擎• YAHOO.util.Selector.query

常用的 Selectors

•“#ElementId”•“.ClassName”•“TagName”•“[AttributeName]”

高级的 Selectors

• “:empty”• “:first-child”• “:nth-child(odd)”• “:nth-child(even)”• “(PreExpr)>(NextExpr)”• “(PreExpr)+(NextExpr)”• “(PreExpr)~(NextExpr)”• “[AttributeName=(Value)]”• “[AttributeName^=(Value)]”• “[AttributeName$=(Value)]”

表单中的 Selectors

• “:checked”

JS Selectors & CSS Selectors

• 两者在使用上并没有直接关系。但两者长得很像，并从不同的角度管理着HTML页面上的 Dom节点。

• JS Selectors通过 JS原生的方法或者浏览器支持的方法，结合正则，筛选 Dom

• CSS Selectors通过浏览器内置的渲染引擎筛选 Dom

• 两者最终得到的结果互不相干

JS Selectors与框架• 通俗地说， Selectors引擎是独立的，是作为 JS框架的一个组件存在的。

• 目前有很多引擎，大多没有独立的名字，是跟随 JS框架出现的 (如YUI ， Ext ， Dojo)

• jQuery的引擎为 Sizzle，目前效率最高的引擎之一。此外还有 Peppy。

• YUI 2.x的引擎效率惨不忍睹， 3.x的效率有了脱胎换骨的优化，是亮点。

怎么用 Selectors引擎• 其实很简单：• JS Selectors引擎，用山寨的话来解释，那就是：一个返回类型是 array 的function，它必须包含一个 string类型的 Selector表达式参数，之后的可选参数等你用段日子再了解也不迟！

• 于是，我们用 YUI 2.x 中的引擎来玩玩吧！

YAHOO.util.Selector.query

• 看到标题了吗？这就是 YUI 2.x 中的Selectors引擎所在的命名空间(YAHOO.util.Selector) 和方法名 (query) 。

• 来看看 query这个方法的官方 API:static Array query ( selector, root, firstOnly)

• 看完了？理解了？就这么简单！• 接下去我们来实战演习一下：

YAHOO.util.Selector.query

• 看完了？理解了？就这么简单！• 接下去我们来实战演习一下：

扩展思维• YUI 2.x 的 Selectors引擎效率低，我们能否切换一个效率更高的引擎呢？答案是肯定的！YAHOO.util.Selector.query作为一个静态函数我们可以用更高的引擎来重写它，比如我们用Sizzle的引擎来替换它：YAHOO.util.Selector.query=Sizzle;

• 当然我们也可用从 YUI 3.x版本中剥离出高效的引擎来重写 2.x中的引擎