JQuery选择器总结(2) 基础过滤选择器-CSDN博客

上一次总结了JQuery的一些基础选择器(http://redstarofsleep.iteye.com/blog/930579 ).

这次继续接下去:

3. 筛选,过滤选择器

(1) :first 这个选择器用来选择符合要求的第一个元素

// 选取第一个DIV
$('div:first')

<div>被选中</div>
<div>没被选中</div>
<div>没被选中</div>

(2) :last 这个跟上面那个相对,选取的是符合要求的最后一个元素

// 选取最后一个DIV
$('div:last');

<div>没被选中</div>
<div>没被选中</div>
<div>被选中</div>

(3) :not(select) 这个选择器是用来选择不符合要求的元素的

// 选择Class不是"test"的元素
$('div:not(.test)');

<div class="test">没被选中</div>
<div class="test">没被选中</div>
<div class="test">没被选中</div>
<div>被选中</div>
<div>被选中</div>

(4) :even 这个选择器用来选择索引是偶数的元素,从0开始编号

// 选取偶数的DIV
$('div:even');

<div>被选中</div>
<div>没被选中</div>
<div>被选中</div>
<div>没被选中</div>
<div>被选中</div>

(5) :odd 与上面的对应,选取索引是奇数的元素(这个就不举例子了)

(6) :eq(index) 这个选择器选择第index个元素

// 选择第3个DIV
$('div:eq(3)');

<div>没被选中</div>
<div>没被选中</div>
<div>没被选中</div>
<div>被选中</div>
<div>没被选中</div>

(7) :gt(index) 选取索引比index大的元素

$('div:gt(2)');

<div>没被选中</div>
<div>没被选中</div>
<div>没被选中</div>
<div>被选中</div>
<div>被选中</div>

(8) :lt(index) 与上面的相反,选取索引比index小的元素

$('div:lt(2)');

<div>被选中</div>
<div>被选中</div>
<div>被选中</div>
<div>没被选中</div>
<div>没被选中</div>