我個人感覺jQuery中最大的好處就是選擇Dom元素方面了。選擇Dom中除了選擇器、過濾,當然還有遍歷了。
總結一下遍歷中的過濾
目錄
eq()
描述:減少匹配元素的集合爲指定的索引的哪一個元素
索引值可以是負值,也可以是正值,
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").eq(1) //p1
$("p").eq(-1) //p3
})
</script>
filter()
描述:篩選元素集合中匹配表達式,或通過傳遞函數測試的那些元素的集合。
參數可以是選擇器、函數、元素、以及jQuery對象
<p>0</p>
<p class="box">1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").filter(":even");
$("p").filter(".box");
$("p").filter(function(){
return $(this).html() == 3;
})
})
</script>
first()
描述:獲取匹配元素集合中的第一個元素
不接受任何參數
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").first();
})
</script>
last()
描述:獲取匹配元素集合中的最後一個元素
不接受任何參數
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").last();
})
</script>
has()
描述:篩選匹配集合元素中的有相匹配的選擇器或Dom元素的後代元素
以子元素或選擇器爲匹配條件選擇Dom元素
<ul>
<li></li>
<li><strong></strong></li>
<li></li>
<li></li>
</ul>
<script>
$(function(){
$("ul li").has("strong") //選擇子元素爲strong元素的li元素
})
</script>
is()
描述:判斷當前匹配集合中的元素是否是一個選擇器、Dom元素、或者jQuery對象
如果這些元素至少一個匹配給定的參數,那麼返回true
<div>
<p class="box"></p>
<p></p>
</div>
<script>
$(function(){
$("div p").is(".box") //true
$("div p").is(function(){
$(this).hasClass("box");
})
})
</script>
not()
描述:從匹配元素集合中移除指定的元素
<div>
<p class="box"></p>
<p></p>
</div>
<script>
$(function(){
$("div p").not(".box")
})
</script>
map()
描述:通過一個函數匹配當前集合中的每個元素,產生一個新的jQuery對象
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
$("div").map(function(){
return $(this).html($(this).html + 1);
})
})
<script>
slice()
描述:根據指定的下標範圍,過濾匹配的元素集合,併產生一個新的jQuery對象
接受兩個參數:start:起始座標(從零開始)、終止座標。匹配規則包括首部但不包括尾部
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
$("div").slice(1,3); //div1 div2
})
</script>