javascript 选择器简明教程

本来准备开讲jQuery源码学习笔记六的，但心中有佛才能看到佛，有些人连选择器都不知什么东西，直接讲下去，估计有人会看得云里雾里，满头雾水了。加之，John Resig有一种把代码写得不知所云的魔力，他拥有强大的驭驾代码的实力，他自己看当然没问题，其他人则要命了。常常是一句代码调用几个方法，每个方法相隔几十行甚至上百行，而且这些方法还常常是幌子，真正做事是其他代码。这样盘根错节的代码与Base2有得一拼。最后，选择器本身也是非常复杂的东西，有必须独立提出来说一下。
选择器其实早已实现，不过都是一些不起眼但超常用的方法：getElementById，getElementsByName，getElementsByTagName。但外国人不满意这些API，于是搞出了getElementsByClassName，进而是getElementsBySelector，支持当时已公布的所有CSS2.1选择符！然后Prototype用一个$与一个$$把它们统括起来。之所以这样，其动机显然易见，如果返回一个就不用索引号去取了！像jQuery那样无论是返回多少个，反正都包裹在jQuery对象，都要用索引号或get方法把真正DOM元素取出来，因此用不用$$都差不多，于是$统一天下！
但这个包打天下的选择器其实包括多少东西呢？细算一下，ID选择器，标签选择器，联合选择器，属性选择器，关系选择器与伪类选择器。ID选择器，就是以#开头的，标签选择器就是tagName，联合选择器就是那个逗号，属性选择器就是用中括号括起来的字段，里面也非常复杂，可以单纯只有属性名，不用属性值，如果有属性值，又分好几种情况匹配（详见我的另一篇博文《getElementsByAttribute》）。像getElementsByName应该归并于属性选择器，因为name也是一个属性。关系选择符又细分为四个：兄长（~），亲子（>），相邻（+）与后代（空格）。伪类选择器的成员非常庞大，因为CSS3新添加的这些伪类选择符也是如此。除了伪元素选择符与页面伪类与链接伪类等少量无法转换为选择器外，其他基本都能。这些符合资格的伪类有目标伪类，结构伪类，语言伪类与UI状态伪类。语言伪类与UI状态伪类与属性选择符很相近，因此实现手段也一致。目标伪类我们可以通过截取地址栏上的参数，用IE选择器搞定。结构伪类则又是个大家族，分为两派:root与其他。:root就是根节点documentElement。其他都可以统称这子元素过滤器，我们可以根据顺序(nth-child)来筛选，可以根据类型来选(only-of-type)，又可以组合类型与顺序来选，还可以根据元素里面有没有内容来选（empty），里面还有一些变种，如那些