2.3.3 过滤选择器

2.3.3  过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,


1.基本过滤选择器

:first               选取第一个元素              单个元素         


$("div:first") 选取所有<div>元素中的第一个<div>元素


<title></title>
<h3>例子</h3>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<a><div>cccccc</div></a>
<p>111111111111111</p>
<div>222222222222222</div>
<div><p>33333333333333</p></div>
<span>444444444</span>
<div><a><span>6666666666</span></a></div>
<p class='myClass'>55555555555</p>
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script>
$(function(){
$("div:first").css("color","red")
}
)
</script>
<script src="jquery-1.6.4.js" type="text/javascript"></script>


:last   选取最后一个元素   单个元素  

$("div:last") 选取所有<div>元素中的最后一个<div>元素

<title></title>
<h3>例子</h3>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<a><div>cccccc</div></a>
<p>111111111111111</p>
<div>222222222222222</div>
<div><p>33333333333333</p></div>
<span>444444444</span>
<div><a><span>6666666666</span></a></div>
<p class='myClass'>55555555555</p>
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script>
$(function(){
$("div:last").css("color","red")
}
)
</script>
<script src="jquery-1.6.4.js" type="text/javascript"></script>


:not(selector)  去除所有与给定选择器匹配的元素 集合元素

$("input:not(.myClass") 选取class不是myClass的<input>元素

node2:/var/www/html#cat m46.html 
<title></title>
<h3>例子</h3>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<a><div>cccccc</div></a>
<p>111111111111111</p>
<div>222222222222222</div>
<div><p>33333333333333</p></div>
<span>444444444</span>
<div><a><span>6666666666</span></a></div>
<p class='myClass'>55555555555</p>
<input class='myClass'>aaaa
<input class='kkkk'>bbbb
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script>
$(function(){
$("input:not(.myClass)").css("background","red")
console.log($("input:not(.myClass)"))
}
)
</script>
<script src="jquery-1.6.4.js" type="text/javascript"></script>

:even  选取索引是偶数的所有元素,所有从0开始 

集合元素 

$("input:even")选取索引是偶数的<input>元素

<title></title>
<h3>例子</h3>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<a><div>cccccc</div></a>
<p>111111111111111</p>
<div>222222222222222</div>
<div><p>33333333333333</p></div>
<span>444444444</span>
<div><a><span>6666666666</span></a></div>
<p class='myClass'>55555555555</p>
<input class='myClass'>aaaa
<input class='kkkk'>bbbb
<input class='kkkk'>cccc
<input class='kkkk'>dddd
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script>
$(function(){
$("input:even").css("background","red")
console.log($("input:not(.myClass)"))
}
)
</script>
<script src="jquery-1.6.4.js" type="text/javascript"></script>