jQuery中的选择器(上)

从学习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");

秒客网