jQuery遍歷-過濾

 我個人感覺jQuery中最大的好處就是選擇Dom元素方面了。選擇Dom中除了選擇器、過濾,當然還有遍歷了。

總結一下遍歷中的過濾

目錄

eq()

filter()

first()

last()

has()

is()

not()

map()

slice()


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>

主頁傳送門

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章