jQuery选择器
jquery中的选择器共分为四大类。其简单结构如下：
基本选择器
|-----ID选择器
|-----类选择器
|-----元素选择器
|-----*选择器
|-----联合选择器
层级选择器
|-----祖先-后代选择器
|-----父辈-字辈选择器
|-----同辈选择器
过滤选择器
|-----基本过滤选择器
|-----内容过滤选择器
|-----可见性过滤选择器
|-----属性过滤选择器
|-----子元素过滤选择器
|-----表单对象属性过滤选择器
表单选择器
对于jquery选择器的详细描述如下：
一. 基本选择器
1. ID选择器
$('#idName'):返回一个封装了指定id的dom元素的jQuery对象。
注：如果有多个相同的id值，则以第一个id为准。若没有这个id，则返回空的jquery对象
2. 类选择器（class）
$('.className'):返回封装了带有指定css类名的所有DOM元素的jQuery对象，可能有一个或多个。若没有这个class则返回空jquery对象。
3. 元素选择器（element）
$('span'):返回封装了指定标签名称的DOM元素的jQuery对象。若没有这个标签名称则返回空jquery对象。
4. *选择器
$('*'):选择文档中的所有元素。
5.联合选择器
(′div,p,span′):选择div,p,span标签的元素。在这种选择器中，可以在(′div,p,span′):选择div,p,span标签的元素。在这种选择器中，可以在()中添加多个选择器，而每个选择器也可以很复杂，比如：
$('div p:first-child,p>span:nth-child(3),span:not(.one,.two)')等。
二. 层级选择器
1. 祖先-后代选择器
$('div p'):查找div中所有后代中的p元素
2. 父辈-子辈选择器
$('div>p'):查找div中所有的子代中的p元素
3. 同辈选择器
a. $('h2 + p'):查找和h2相邻的p元素，并且h2和p必须是同级元素且相邻的,如
<div>
<h2>title</h2>
<p>content</p>
</div>
<p>outer</p>
<script>
alert($('div+p').text());
</script>
这段代码的结果是content。
b. $('h2~p'):查找h2后面的所有的p元素，并且h2和p必须是同级元素,但是不需要是相邻的，如
<div>
<p class = 'a'>p1</p>
<span>span1</span>
<p>p2</p>
<span>span2</span>
<p>p3</p>
<span>span3</span>
</div>
<script>
$(function(){
$('.a+span').text('11111');
});
</script>
这段代码中查找的是class为a的后面所有的同级的span元素，将其内容改为11111，可见结果是三个span的内容都为11111。
三. 过滤选择器
1. 基本过滤选择器
a. 首尾元素选择器
$('div:first'):查找第一个div元素
$('div:last'):查找最后一个div元素
注：这两个选择器值选择一个元素，因此从上到下只要找到一个符合条件的元素就立即返回
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script>
$(function(){
alert($('ul li:first').html（）);
});
</script>
上述代码的结果是第一个ul的第一个li中的1。
b. 非选择器
$('span:not(#d)'):选择ID不是d的span元素
注：:not()括号内也为选择器，比如:not(ul li:first-child))或者更加复杂的选择器都可以组合。
<ul>
<li class = 'd'>222</li>
<li class = 'd'>222</li>
<li class = 'd'>222</li>
<li>222</li>
<li>222</li>
<li class = 'd'>222</li>
</ul>
<script>
$(function(){
$('.d:not(ul>li:first-child):not(ul>li:last-child)').text('111');
});
</script>
这段代码的结果是第2，3的text为111。
c. 奇偶选择器
$('div:even'):查找dom中索引值为基数的div元素
注：对于$('div:even')来说，这种选择方式是不区分父辈还是字辈的，是统一进行索引编号的。但是这种情况基本使用不到的。另外索引值使用0开始的，因为0也算偶数，所以第一个都是被选择的。
<div class = 'one'>0 -------index = 0 even
<div class = 'two'>1 -------index = 1
<div class = 'three'>1.1</div> -------index = 2 even
</div>
<div class = 'four'>2</div> -------index = 3
</div>
<div class = 'five'>3</div> -------index = 4 even
<script>
$(function(){
$('div:even').each(function(){
alert($(this).text());
});
});
</script>
这段代码就说明了当出现使用(′div:even′)时的情况，其结果是将class为one,three,five的div的test输出。但是倘若我们不希望将子类的子类中的元素也进行编码，只对最外围的div进行选取，那么选择器就要改成为父辈−子