什么是過濾選擇器？
過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需要的DOM元素兆旬，過濾規(guī)則與CSS中的偽類選擇器語法相同结胀。
image.png
舉個例子分別？
基本過濾選擇器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div>Part 1</div>
<div>Part 2</div>
<div>part 3</div>
<script>
$("div:first").css("background-color","yellow");
</script>
結(jié)果如下
image.png
內(nèi)容過濾選擇器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div>Part 1</div>
<div>Part 2</div>
<div>part 3</div>
<script>
$("div:contains(2)").css("background-color","yellow");
</script>
結(jié)果如下
image.png
子元素過濾選擇器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div>Part 1</div>
<div>Part 2</div>
<div>part 3</div>
<script>
$("div:nth-child(odd)").css("background-color","yellow");
</script>
結(jié)果如下
image.png
屬性過濾選擇器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="demo">Part 1</div>
<div id="de">Part 2</div>
<div>part 3</div>
<script>
$("div[id]").css("background-color","yellow");
</script>
結(jié)果如下饵隙，也就是選擇了含有id屬性的元素。
image.png
如果把其中改為
<script>
$("div[id=demo]").css("background-color","yellow");
</script>
則結(jié)果為
image.png
為何屬性過濾選擇器不用冒號沮脖？
避免混淆金矛，比如說有個元素有個first屬性，那么div:first就和基本過濾器中的first混淆了勺届。另一方面驶俊，如果用不同的方式也便于一眼識別出屬性選擇器。
為何需要過濾選擇器免姿？
因為其他選擇器難以實(shí)現(xiàn)饼酿，比如子元素過濾選擇器中選擇所有偶數(shù)行。或者選擇所有是3的倍數(shù)的行故俐。
更加詳細(xì)的內(nèi)容參考
詳解強(qiáng)大的jQuery選擇器之過濾選擇器想鹰、表單選擇器 - artwl - 博客園
