从学习jquery开始，现在已经是第三遍看锋利的jQuery这本书了，现在打算对jQuery中的各种选择器进行一下总结，主要是是为了进一步系统的巩固自己对知识的掌握，另外也可以为那些学习jQuery并不小心进入我的博客的同学提供一个知识交流的机会。
jQuery选择器分为基本选择器，层次选择器，过滤选择器和表单选择器
1.基本选择器
基本选择器其实就是通过元素的id，class和标签名等查找DOM元素的规则的集合，也是jquery中常用的最基本的选择器，掌握基本选择器对于学习jquery很重要。
在这里我打算把书中的基本选择器表照搬显示出来，因为个人觉得这个表给出的解释已经是十分的详细明了。
| 基本选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据给定元素的id查找匹配一个元素(注意在网页中每一个id只能使用一次) | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 元素数组(或者说集合元素) | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名称匹配元素 | 元素数组(或者说集合元素) | $("p")选取所有的<p>元素 |
| * | 匹配所有的元素 | 元素数组(或者说集合元素) | $("*")选取所有的元素 |
| selector1,selector2,....selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素数组(集合元素) | $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素 |
2.层次选择器
层次选择器就是通过DOM元素之间的层次关系来获取特定元素的规则表示。那什么是元素之间的层次关系呢？
如下面一段代码:
<div id="one"> <p class="hehe">测试</p> <ul > <li>测试1</li> <li>测试2</li> </ul> </div> <div id="two">测试3</div>
在这段代码中id为two的div是id为one的div元素的相邻元素，这两个元素之间的层次关系就是相邻关系 。
class为"hehe"的p元素和ul元素还有li元素都是id为"one"的div元素的后代元素，他们和id为"one"的div元素之间的层次关系就是后代关系（即p元素，ul元素，li元素都是div元素的后代元素）。
而class为"hehe"的p元素和ul元素还是id为"one"的div元素的子元素(注意这里没有li元素,li元素是ul的子元素)，就是说，当前元素的直接的孩子元素就是其子元素，而当前元素内部所包含的所有的元素节点都是其后代元素。
可能说的还是不太清楚。
再次给出书中层次选择表，呵呵。。。
| 层次选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $("ancestor descendant") | 选取ancestor元素里面的所有的descendant(后代)元素 | 元素数组(集合元素) | $("div span")选取<div>里的所有<span>元素 |
| $("parent > child") | 选取parent元素下的child(子)元素，与$("ancestor descendant")有区别的哦，$("ancestor descendant")选择的是后代元素，大家要搞明白 | 元素数组(集合元素) | $("div > span")选取<div>元素下 元素名是<span>的子元素(其实就是直接孩子节点中的span元素) |
| $("prev + next") | 选取紧接在prev元素后的next元素 | 元素数组(集合元素) | $(".one + div")选取class为one的下一个<div>同辈元素 |
| $("prev~siblings") | 选取prev元素之后的所有的siblings元素 | 元素集合(集合元素) | $("#two~div")选取id为two的元素后面的所有的<div>同辈元素 |
在层次选择器中，前面两种使用的比较广泛，后面两种由于在jquery中有更简单的方法代替，因此使用的几率相对较少 。
可以使用next()方法代替$("prev + next"). 选择器 $(".one + div "); 等价于$(".one").next("div");
可以使用nextAll()方法代替选择器$("#prev~siblings"). 选择器$("#prev~div")等价于$("#prev").nextAll("div");
//选取#prev之后的同辈div元 $("#prev ~ div").css("background","#aaa"); //同上 $("#prev").nextAll("div").css("background","#aaa");