jQuery 篩選方法

雲崖先生發表於2020-08-23
jQuery

前言

　　 在jQuery中所有的東西全部都包含在jQuery物件中，並沒有單獨的DOM元素這一說法。

　　 要想獲取單獨的DOM元素請用[index]獲取，下面介紹的所有方法都會返回新的jQuery物件，而不是單一的DOM元素。

獲取方法

first()

　　 獲取jQuery物件中第一個DOM元素，返回一個新的jQuery物件。

<body>
        <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li").first();
        console.log($elements[0].innerText);  // 1

</script>

last()

　　 獲取jQuery物件中最後一個DOM元素，返回一個新的jQuery物件。

<body>
        <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li").last();
        console.log($elements[0].innerText);  // 3

</script>

eq(index)

　　 根據索引值獲取jQuery物件中的DOM元素，返回一個新的jQuery物件。

<body>
        <ul>
                <li>index 0</li>
                <li>index 1</li>
                <li>index 2</li>
                <li>index 3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li").eq(1);
        console.log($elements[0].innerText);  // index 1

</script>

odd()

　　 獲取jQuery物件中索引為奇數的DOM元素，返回一個新的jQuery物件。

<body>
        <ul>
                <li>index 0</li>
                <li>index 1</li>
                <li>index 2</li>
                <li>index 3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li").odd();
        console.log($elements[0].innerText);  // index 1
        console.log($elements[1].innerText);  // index 3

</script>

even()

　　 獲取jQuery物件中索引為偶數的DOM元素，返回一個新的jQuery物件。

<body>
        <ul>
                <li>index 0</li>
                <li>index 1</li>
                <li>index 2</li>
                <li>index 3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li").even();
        console.log($elements[0].innerText);  // index 0
        console.log($elements[1].innerText);  // index 2

</script>

slice()

　　 對jQuery物件根據索引進行切片操作，返回一個新的jQuery物件。

　　 切片取頭不去尾

<body>
        <ul>
                <li>index 0</li>
                <li>index 1</li>
                <li>index 2</li>
                <li>index 3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li");
        console.log($elements.slice(1,3)); 
        // jQuery.fn.init(2) [li, li, prevObject: jQuery.fn.init(4)]
        // index 1 index 2

</script>

增加方法

add()

　　 將一個jQuery物件中的DOM元素與另一個jQuery物件中的DOM元素進行合併，返回一個新的jQuery物件

<body>
        <ul>
                <li>1</li>
                <li class="del">2</li>
                <li>3</li>
                <div>add</div>
                <div>add</div>
                <div>add</div>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li");
        console.log($elements.length); // 3

        let $new_elements = $elements.add($("div"));
        console.log($new_elements.length); // 6

</script>

刪除方法

not()

　　 刪除與指定表示式匹配的DOM元素，返回一個新的jQuery物件。

<body>
        <ul>
                <li>1</li>
                <li class="del">2</li>
                <li>3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li");
        console.log($elements.length);   // 3

        $new_elements = $elements.not($(".del")); 
        console.log($new_elements.length); // 2

</script>

檢測方法

is()

　　 檢測一個元素是否存在於另一個jQuery物件中，返回boolean型別。

<body>
        <ul>
                <li>1</li>
                <li class="show">2</li>
                <li>3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li");
        let $li = $("li.show");
        let result = $li.is($elements);
        console.log(result); // true

</script>

has()

　　 檢測一個元素是否包含另一個元素，如果包含則返回一個新的jQuery物件，該jQuery物件中存有被檢測的DOM元素。

　　 以下示例將演示如果一個<div>中包含<span>則該<div>的背景色變為紅色。

<body>
        <div>無</div>
        <div><span>有</span></div>
        <div>無</div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div").has("span").css("background-color","red");

</script>

遍歷方法

filter()

　　 過濾篩選出與指定表示式匹配的元素集合，返回一個新的jQuery物件。

　　 條件為true的元素會新增到新的jQuery物件中，為false則忽略

　　 與Array的filter()相似，但是回撥函式的引數有差別

引數位置傳遞值
引數1 Array.prototype.filter()為元素本身，$.prototype.filter()為索引值
引數2 Array.prototype.filter()為索引值，$.prototype.filter()為元素本身
引數3 Array.prototype.filter()為被操縱物件，$.prototype.filter()無此引數 
<body>
        <ul>
                <li>1</li>
                <li class="show">2</li>
                <li>3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $elements = $("li");
        let $new_elements = $elements.filter((index, ele) => {
                return ele.classList.contains("show");  // ele是DOM元素
        });

        console.log($new_elements);

        // jQuery.fn.init [li.show, prevObject: jQuery.fn.init(3)]

</script>

map()

　　 對一個jQuery物件中的元素進行挨個操作，並返回一個新的jQuery物件。

　　 以下示例將展示使用map()將jQuery物件中的元素innerHTML改為"一致"

　　 與Array的map()相似，但是回撥函式的引數上有差別

引數位置傳遞值
引數1 Array.prototype.map()為元素本身，$.prototype.map()為索引值
引數2 Array.prototype.map()為索引值，$.prototype.map()為元素本身
引數3 Array.prototype.map()為被操縱物件，$.prototype.map()無此引數 
<script>

        "use strict";
        let $eleDivList = $("div");
        let $newDivList = $eleDivList.map((index, ele) => {
                ele.innerHTML = "一致";
        });

        console.log($newDivList);
        // jQuery.fn.init [prevObject: jQuery.fn.init(4)]

</script>

each()

　　 對一個jQuery物件中的元素進行挨個操作,效果與map()相同，但無返回值。

　　 以下示例將展示使用each()將jQuery物件中的元素innerHTML改為"一致"

　　 與Array的forEach()相似，但是回撥函式的引數有差別

引數位置傳遞值
引數1 Array.prototype.forEach()為元素本身，$.prototype.each()為索引值
引數2 Array.prototype.forEach()為索引值，$.prototype.each()為元素本身
引數3 Array.prototype.forEach()為被操縱物件，$.prototype.each()無此引數 
<body>
        <div>1-</div>
        <div>2-</div>
        <div>3-</div>
        <div>4-</div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $eleDivList = $("div");

        let $newDivList = $eleDivList.each((index, ele) => {
                ele.innerHTML = "一致";
        });

</script>

關係獲取

children()

　　 獲取其子代元素，返回一個新的jQuery物件

　　 如下示例將展示如何獲得li.me標籤。

<body>
        <ul style="list-style: none;">
                <li>1-1</li>
                <li>1-2</li>
                <li>1-3</li>
                <li>
                        <ol style="list-style: none;">
                                <li>2-1</li>
                                <li class="me">2-2</li>
                                <li>2-3</li>
                        </ol>
                </li>

        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $ul = $("ul");
        let $ele = $ul.children("li").children("ol").children("li.me");
        console.log($ele);

        // jQuery.fn.init [li.me, prevObject: jQuery.fn.init(1)]
        
</script>

find()

　　 獲取其後代元素，返回一個新的jQuery物件

　　 如下示例將展示如何獲得li.me標籤。

<body>
        <ul style="list-style: none;">
                <li>1-1</li>
                <li>1-2</li>
                <li>1-3</li>
                <li>
                        <ol style="list-style: none;">
                                <li>2-1</li>
                                <li class="me">2-2</li>
                                <li>2-3</li>
                        </ol>
                </li>

        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $ul = $("ul");
        let $ele = $ul.find("li.me");
        console.log($ele);

        // jQuery.fn.init [li.me, prevObject: jQuery.fn.init(1)]
        
</script>

parent()

　　 獲取其父級元素，返回一個新的jQuery物件

<body>
        <ul style="list-style: none;">
                <li>1-1</li>
                <li>1-2</li>
                <li>1-3</li>
                <li>
                        <ol style="list-style: none;">
                                <li>2-1</li>
                                <li class="me">2-2</li>
                                <li>2-3</li>
                        </ol>
                </li>

        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $ele = $("li.me");
        console.log($ele.parent());

        // jQuery.fn.init [ol, prevObject: jQuery.fn.init(1)]
        
</script>

parents()

　　 獲取其祖先元素，返回一個新的jQuery物件

<body>
        <ul style="list-style: none;">
                <li>1-1</li>
                <li>1-2</li>
                <li>1-3</li>
                <li>
                        <ol style="list-style: none;">
                                <li>2-1</li>
                                <li class="me">2-2</li>
                                <li>2-3</li>
                        </ol>
                </li>

        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $ele = $("li.me");
        console.log($ele.parents());

        // jQuery.fn.init(5) [ol, li, ul, body, html, prevObject: jQuery.fn.init(1)]
        
</script>

parentsUntil()

　　 從當前物件開始，查詢直系祖先級的所有標籤，直到指定的祖先標籤結束，返回一個新的jQuery物件

　　 不取頭，不取尾

　　 相當於孫子問爺爺的爺爺，你的後代除了我還有誰。

<body>
        <main class="taiye">
                <div class="yeye">
                        <section class="baba">
                                <article class="erzi">
                                        <span class="sunzi"></span>
                                </article>
                        </section>
                        
                </div>
        </main>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $sunzi = $(".sunzi");
        console.log($sunzi.parentsUntil(".taiye"));

        // 孫子問太爺，你的後代除了我還有誰。

        // jQuery.fn.init(3) [article.erzi, section.baba, div.yeye, prevObject: jQuery.fn.init(1)]

</script>

closest()

　　 查詢最近的符合選擇器的祖先元素（包括自身），返回一個新的jQuery物件

　　 找祖先，看最近的祖先能不能被選擇器選中，如果不能繼續向上找。

　　 這與JavaScript中的closest()方法基本相同，但Js中返回的是單個DOM元素，而jQ中返回一個jQuery物件。

<body>
        <main class="show">
                <div class="hidden">
                        <article class="float"></article>
                </div>
        </main>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $floatEle = $(".float");
        console.log($floatEle.closest(".show"));

        // jQuery.fn.init [main.show, prevObject: jQuery.fn.init(1)]

</script>

prev()

　　 獲取當前元素同級中的前一個元素，返回一個新的jQuery物件

<body>
        <ul style="list-style: none;">
                <li class="prev">1</li>
                <li class="me">2</li class="me">
                <li class="next">3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $me = $("li.me");
        console.log($me.prev());

        // [li.prev, prevObject: jQuery.fn.init(1)]
        
</script>

prevAll()

　　 獲取當前元素同級裡排在前面的所有元素，返回一個新的jQuery物件

<body>
        <ul style="list-style: none;">
                <div></div>
                <article></article>
                <li class="prev">1</li>
                <li class="me">2</li class="me">
                <li class="next">3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $me = $("li.me");
        console.log($me.prevAll());

        // jQuery.fn.init(3) [li.prev, article, div, prevObject: jQuery.fn.init(1)]
        
</script>

prevUntil()

　　 從當前物件開始，查詢同級向前的所有標籤，直到指定標籤結束，返回一個新的jQuery物件

　　 不取頭，不取尾

　　 相當於弟弟問某一個哥哥，你的其他弟弟是誰

<body>
        <ul style="list-style: none;">
                <li>大哥</li>
                <li>二弟</li>
                <li>三弟</li>
                <li>四弟</li>
                <li>五弟</li>
                <li>六弟</li>
                <li>七弟</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $qidi = $("li:contains(七弟)");
        console.log($qidi.prevUntil("li:contains(大哥)").text());

        // 六弟 五弟 四弟 三弟 二弟
        
</script>

next()

　　 獲取當前元素同級中緊跟其後的一個元素，返回一個新的jQuery物件

<body>
        <ul style="list-style: none;">
                <li class="prev">1</li>
                <li class="me">2</li class="me">
                <li class="next">3</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $me = $("li.me");
        console.log($me.next());

        // jQuery.fn.init [li.next, prevObject: jQuery.fn.init(1)]
        
</script>

nextAll()

　　 獲取當前元素同級裡排在後面的所有元素，返回一個新的jQuery物件

<body>
        <ul style="list-style: none;">
                <li class="prev">1</li>
                <li class="me">2</li class="me">
                <li class="next">3</li>
                <div></div>
                <article></article>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $me = $("li.me");
        console.log($me.nextAll());

        // jQuery.fn.init(3) [li.next, div, article, prevObject: jQuery.fn.init(1)]
        
</script>

nextUntil()

　　 從當前物件開始，查詢同級向後的所有標籤，直到指定標籤結束，返回一個新的jQuery物件

　　 不取頭，不取尾

　　 相當於哥哥問某一個弟弟，你的其他哥哥是誰

<body>
        <ul style="list-style: none;">
                <li>大哥</li>
                <li>二哥</li>
                <li>三哥</li>
                <li>四哥</li>
                <li>五哥</li>
                <li>六哥</li>
                <li>七弟</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $dage = $("li:contains(大哥)");
        console.log($dage.nextUntil("li:contains(七弟)").text());

        // 二哥 三哥 四哥 五哥 六哥
        
</script>

siblings()

　　 獲取當前物件的所有其他同級標籤（不包含自身）

body>
        <ul style="list-style: none;">
                <li>大哥</li>
                <li>二哥</li>
                <li>三哥</li>
                <li>我</li>
                <li>五弟</li>
                <li>六弟</li>
                <li>七弟</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $me = $("li:contains(我)");
        console.log($me.siblings().text());

        // 大哥 二哥 三哥 五弟 六弟 七弟
        
</script>

定位關係

offsetParent()

　　 第一個匹配出元素用於定位的父節點元素將會新增至新的jQuery物件中並返回。

<body>
        <ul style="list-style: none;">
                <li style="position: absolute;">1</li>
                <!-- ul未設定定位，以<html>為參照 -->
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
        </ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let $start = $("li:contains(1)");
        console.log($start.offsetParent()[0].nodeName);

        // HTML
        
</script>

其他方法

andSelf()

　　 將先前一次所選擇的jQuery物件與最近一次所選擇的jQuery物件中的元素進行合併，返回一個新的jQuery物件。

　　 對於篩選或查詢後的元素，要加入先前所選元素時將會很有用。

　　 以下示例將展示選取所有<div>以及內部的<p>，並加上border類

<body>
        <div>
                <p>First Paragraph</p>
                <p>Second Paragraph</p>
        </div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        $("div").find("p").andSelf().addClass("border");

</script>

　　 結果如下

<div class="border">
    <p class="border">First Paragraph</p>
    <p class="border">Second Paragraph</p>
</div>

contents()

　　 查詢匹配元素內部所有的子節點（包括文字節點）。如果元素是一個<iframe>，則查詢文件內容

<body>
        <span>帥哥</span>
        <span>美女</span>
        <span>醜八怪</span>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        let result = $("span").contents();
        console.log(result);

        // jQuery.fn.init(3) [text, text, text, prevObject: jQuery.fn.init(3)]
        
</script>

end()

　　 對jQuery物件進行回溯，當我們操作完一組jQuery物件中的元素後又想拿到操作之前的原本jQuery物件就可使用此方法。

　　 以下示例將展示使用end()選取所有的<p>元素，查詢並將<span>子元素顏色，然後再回過來選取<p>元素

<body>
        <p><span>Hello</span>,how are you?</p>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        "use strict";
        console.log($("p").find("span").css("color","red").end())

        // jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]

</script>

相關文章