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>
