Javascript Selectors 入门篇

作为前端开发工程师，平时对于Dom的查找遍历和操作是家常便饭。对于优秀的前端来说，也肯定早已有了自己的一套方法来封装这些重复的操作。但是，现在市面上已经有很多成熟的框架已经提供了这么一套封装的方法来极大地方便我们的工作，而且在浏览器兼容及效率上也各有深入的研究了，我们何不来看看这些解决方案是否好用，从来再次提高我们的工作效率呢？这些解决方案，有一个统一的命名：Javascript Selectors

Selectors长什么样

常用的Selectors

• “#ElementId” ID为ElementId

• “.ClassName” class包含ClassName

• “TagName” Dom标签为TagName

• “[AttributeName]” Dom包含属性AttributeName

• “(expr1), (expr2)[, (expr3), ...]” 满足表达式1或表达式2或表达式3…

高级的Selectors

• “:empty” 空或’/>’结尾的标签

• “:first-child” 同类同级别第一个Dom

• “:nth-child(odd)” 同类同级别奇数位Dom

• “:nth-child(even)” 同类同级别偶数位Dom

• “(PreExpr)>(NextExpr)” 直接子节点Dom

• “(PreExpr)+(NextExpr)” 同级别紧挨着的Dom

• “(PreExpr)~(NextExpr)” 同级别Dom

• “[AttributeName=(Value)]” Dom包含属性AttributeName且等于Value

• “[AttributeName^=(Value)]” Dom包含属性AttributeName且以Value开头

• “[AttributeName$=(Value)]” Dom包含属性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的效率有了脱胎换骨的优化，是亮点。

IE6下各大框架Selectors的执行效率

怎么用Selectors引擎

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

YAHOO.util.Selector.query

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

Retrieves a set of nodes based on a given CSS selector.
Parameters:
selector The CSS Selector to test the node against.
root optional An id or HTMLElement to start the query from. Defaults to Selector.document.
firstOnly optional Whether or not to return only the first match.
Returns: Array
An array of nodes that match the given selector.
static Array query ( selector, root, firstOnly)

扩展思维

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

YAHOO.util.Selector.query=Sizzle;

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