Melintasi menggunakan jQuery-tutorial js-php.cn

Perbezaan antara kaedah find() dan penapis()

Kaedah <code>filter() digunakan untuk menapis set elemen semasa yang terkandung dalam set pembalut. Penggunaannya hendaklah dikhaskan untuk tugas yang memerlukan penapisan set elemen terpilih. Contohnya, kod berikut akan menapis tiga elemen <code>filter() 方法用于过滤包装器集中包含的当前元素集。它的使用应该留给需要过滤一组已选择的元素的任务。例如，下面的代码将过滤包装集中包含的三个  元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {  // Alerts middle, by filtering out the first
      // and last <p> elements in the wrapper set.
      alert($('p').filter(':not(:first):not(:last)').text());
  })(jQuery); </script>
</body>
</html>

Salin selepas log masuk

注意：当使用 <code>filter() 时，总是问自己是否绝对有必要。例如， $('p').filter(':not(:first):not(:last)') 可以不写 <code>filter()$('p:not(:first) :not(:last)')。

另一方面，find() 方法可用于进一步查找当前所选元素的后代。认为 find() 更像是使用封装在已选择的元素中的新元素来更新或更改当前的包装集。例如，下面的代码将使用 find() 将包装集从  元素更改为两个  元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "strong"
      alert($('p').find('strong').get(0).nodeName);
  })(jQuery); </script>
</body>
</html>

Salin selepas log masuk

注意：实际上，您可以使用 andSelf() 将使用 find() 方法之前的包装器中的元素与当前元素组合起来 - 例如$('p').find('strong').andSelf().

要带走的概念是 <code>filter() 只会减少（或过滤）包装器集中当前选定的元素，而 find() 实际上可以创建一组全新的包装元素。 注意： find() 和 <code>filter() 都是破坏性方法，可以使用 end() 撤消，这会将包装的集合恢复为使用 find() 或 <code>filter() 之前的状态。

向 filter() 传递函数而不是表达式

在运行并创建用于选择元素的自定义过滤器之前，简单地向遍历 <code>filter() 方法传递一个函数可能更有意义，该函数允许您检查包装器集中的每个元素的特定值场景。

例如，假设您希望将 HTML 页面中的所有 <img alt="Melintasi menggunakan jQuery" > 元素包装在当前未使用该元素包装的  元素中。

您可以创建一个自定义过滤器来完成此任务，或者您可以使用 <code>filter() 方法，向其传递一个函数，该函数将确定该元素的父元素是否为  元素，如果否，则在使用  元素包装集合中剩余的 <img alt="Melintasi menggunakan jQuery" > 元素之前，从集合中删除该元素。

在下面的示例中，我选择 HTML 页面中的每个 <img alt="Melintasi menggunakan jQuery" > 元素，然后向 <code>filter() 方法传递一个用于迭代每个元素的函数（使用 this ) 在包装器集中，检查 <img alt="Melintasi menggunakan jQuery" > 元素的父元素是否为  元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <img>
    <img>
    <p>
        <img>
    </p>
    <img>
    <p>
        <img>
    </p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      $('img').attr('src', 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif').filter(function () { return !$(this).parent('p').length == 1 }).wrap('<p></p>');
  })(jQuery); </script>
</body>
</html>

Salin selepas log masuk

请注意，我正在使用 ! 运算符将布尔值 true 更改为 false。这是因为我想从以  元素作为父元素的集合中删除 <img alt="Melintasi menggunakan jQuery" > 元素。如果函数返回 false，则传递给 <code>filter() 方法的函数只会从集合中删除元素。

要点是，如果您正在处理孤立的情况，请创建自定义过滤器 - 例如:findImgWithNoP - 对于单一情况可以通过简单地向filter方法传递一个可以进行自定义过滤的函数来避免。这个概念非常强大。考虑一下当我们将正则表达式测试与 <code>filter() 方法结合使用时可能发生什么。

<!DOCTYPE html>
<html lang="en">
<body>
    <ul>
        <li>jQuery is great.</li>
        <li>It's lightweight.</li>
        <li>Its free!</li>
        <li>jQuery makes everything simple.</li>
    </ul>
    <script src="https://img.php.cn/"></script>
    <script>  (function($){ 
      // Wrap a <strong> element around any text within
      // a <li> that contains the pattern "jQuery"
      var pattern = /jQuery/i;
      $('ul li').filter(function () { return pattern.test($(this).text()); }).wrap('<strong></strong>');
  })(jQuery); </script>
</body>
</html>

Salin selepas log masuk

向上遍历 DOM

您可以使用 parent()、parents() 和 closest() 方法轻松遍历 DOM 到祖先元素。了解这些方法之间的差异至关重要。检查下面的代码并确保您了解这些 jQuery 遍历方法之间的差异。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="parent2">
        <div id="parent1">
            <div id="parent0">
                <div id="start"></div>
            </div>
        </div>
    </div>
 
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "parent0" x4
      alert($('#start').parent().attr('id'));
      alert($('#start').parents('#parent0').attr('id'));
      alert($('#start').parents()[0].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent0').attr('id'));
      // Alerts "parent1" x4
      alert($('#start').parent().parent().attr('id'));
      alert($('#start').parents('#parent1').attr('id'));
      alert($('#start').parents()[1].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent1').attr('id'));
      // Alerts "parent2" x4
      alert($('#start').parent().parent().parent().attr('id'));
      alert($('#start').parents('#parent2').attr('id'));
      alert($('#start').parents()[2].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent2').attr('id'));
  })(jQuery); </script>
</body>
</html>

Salin selepas log masuk

注意： closest() 和 parents() 可能看起来具有相同的功能，但 closest() 实际上会在其过滤中包含当前选定的元素.

closest() 一旦找到匹配项就会停止遍历，而 parents() 会获取所有父级，然后过滤您的可选选择器。因此，closest() 最多只能返回一个元素。

遍历方法接受 CSS 表达式作为可选参数

CSS 表达式不仅可以传递给 jQuery 函数来选择元素，还可以传递给多个遍历方法。可能很容易忘记这一点，因为许多遍历方法的功能根本不需要使用任何表达式 - 例如next() yang terkandung dalam set pembalut.

#🎜🎜##🎜🎜# rrreee #🎜🎜#Nota: Apabila menggunakan <code>filter(), sentiasa tanya diri anda sama ada ia benar-benar perlu. Contohnya, $('p').filter(':not(:first):not(:last)') tidak perlu menulis <code>filter()$ ('p :not(:first) :not(:last)'). #🎜🎜# #🎜🎜#Sebaliknya, kaedah find() boleh digunakan untuk mencari lebih lanjut keturunan elemen yang dipilih pada masa ini. Fikirkan find() lebih seperti mengemas kini atau menukar set yang dibalut semasa dengan elemen baharu yang dibalut dalam elemen yang dipilih. Sebagai contoh, kod berikut akan menggunakan find() untuk menukar set pembalut daripada elemen #🎜🎜# kepada dua elemen  . #🎜🎜# rrreee #🎜🎜#Nota: Sebenarnya, anda boleh menggunakan andSelf() untuk menggabungkan elemen dalam pembalut sebelum menggunakan kaedah find() dengan The elemen semasa digabungkan - cth. $('p').find('strong').andSelf().#🎜🎜# #🎜🎜#Konsep yang perlu diambil ialah <code>filter() hanya akan mengurangkan (atau menapis) elemen yang sedang dipilih dalam set pembalut, manakala find() sebenarnya melakukannya Cipta satu set elemen pembungkusan yang baharu sepenuhnya. #🎜🎜#Nota: find() dan <code>filter() ialah kaedah yang merosakkan, anda boleh menggunakan end() code > Buat asal, yang memulihkan koleksi yang dibalut kepada keadaannya sebelum menggunakan <code>find() atau <code>filter(). #🎜🎜#

#🎜🎜#Lepasi fungsi untuk menapis() dan bukannya ungkapan#🎜🎜# #🎜🎜# Sebelum menjalankan dan mencipta penapis tersuai untuk memilih elemen, mungkin lebih masuk akal untuk hanya menghantar fungsi ke kaedah traversal <code>filter() yang membolehkan anda memeriksa set pembalut Nilai tertentu untuk setiap elemen senario. #🎜🎜# #🎜🎜#Sebagai contoh, katakan anda ingin membungkus semua elemen <img alt="Melintasi menggunakan jQuery" > dalam halaman HTML dalam elemen #🎜🎜# yang tidak dibalut dengan elemen itu pada masa ini . #🎜🎜# #🎜🎜#Anda boleh mencipta penapis tersuai untuk menyelesaikan tugas ini, atau anda boleh menggunakan kaedah <code>filter(), memberikannya fungsi yang akan menentukan sama ada elemen induk elemen ialah #🎜 🎜# elemen, jika tidak, sebelum membungkus elemen <img alt="Melintasi menggunakan jQuery" > yang tinggal dalam koleksi dengan elemen #🎜🎜#, Alih keluar elemen daripada koleksi. #🎜🎜# #🎜🎜#Dalam contoh di bawah, saya memilih setiap elemen <img alt="Melintasi menggunakan jQuery" > dalam halaman HTML dan kemudian lulus kaedah <code>filter() untuk mengulangi setiap fungsi Elemen (menggunakan ini ) Dalam set pembalut, semak sama ada induk elemen <img alt="Melintasi menggunakan jQuery" > ialah elemen #🎜🎜#. #🎜🎜# rrreee #🎜🎜#Sila ambil perhatian bahawa saya menggunakan operator ! untuk menukar nilai boolean true kepada false. Ini kerana saya ingin mengalih keluar elemen <img alt="Melintasi menggunakan jQuery" > daripada koleksi yang mempunyai elemen #🎜🎜# sebagai induknya. Fungsi yang dihantar kepada kaedah <code>filter() hanya mengalih keluar elemen daripada koleksi jika fungsi mengembalikan palsu. #🎜🎜# #🎜🎜#Maksud utama ialah jika anda berurusan dengan kes terpencil, buat penapis tersuai - contohnya :findImgWithNoP - untuk penapisan tersuai satu kes boleh dilakukan dengan hanya menghantar fungsi ke elakkan. Konsep ini sangat berkuasa. Pertimbangkan perkara yang mungkin berlaku apabila kami menggabungkan ujian ungkapan biasa dengan kaedah <code>filter(). #🎜🎜# rrreee

#🎜🎜#Melintasi DOM#🎜🎜# #🎜🎜#Anda boleh melintasi DOM ke elemen nenek moyang dengan mudah menggunakan kaedah parent(), parents() dan closest(). Adalah penting untuk memahami perbezaan antara kaedah ini. Semak kod di bawah dan pastikan anda memahami perbezaan antara kaedah traversal jQuery ini. #🎜🎜# rrreee #🎜🎜#Nota: closest() dan parents() mungkin kelihatan mempunyai fungsi yang sama, tetapi

closest() sebenarnya akan memasukkan elemen yang dipilih pada masa ini dalam penapisannya.#🎜🎜##🎜🎜#
  #🎜🎜##🎜🎜##🎜🎜##🎜🎜#
<code>closest()

menghentikan traversal sebaik sahaja perlawanan ditemui, manakala parents() mendapatkan semua ibu bapa dan kemudian menapis pemilih pilihan anda. Oleh itu, closest() hanya boleh mengembalikan paling banyak satu elemen. #🎜🎜#

#🎜🎜#Kaedah traversal menerima ungkapan CSS sebagai parameter pilihan#🎜🎜# #🎜🎜#Ekspresi CSS boleh dihantar bukan sahaja kepada fungsi jQuery untuk memilih elemen, tetapi juga kepada pelbagai kaedah traversal. Ia boleh menjadi mudah untuk melupakan ini, kerana banyak kaedah traversal tidak memerlukan penggunaan sebarang ungkapan sama sekali - contohnya next() Untuk kaedah traversal berikut, ungkapan adalah pilihan, tetapi ingat, Anda pilihan boleh menyediakan ungkapan untuk penapisan. #🎜🎜#

kanak-kanak('ungkapan')children('表达式')
next('表达式')
nextAll('表达式')
parent('表达式')
父母（'表达'）
prev('表达式')
prevAll('表达式')
siblings('表达式')
closest('表达式')

seterusnya('ungkapan')

nextAll('ungkapan')#🎜🎜# #🎜🎜#ibu bapa('ungkapan')#🎜🎜# #🎜🎜#Ibu bapa('ungkapan')#🎜🎜# #🎜🎜#sebelumnya('ungkapan')#🎜🎜# #🎜🎜#prevAll('ungkapan')#🎜🎜# #🎜🎜#adik beradik('ungkapan')#🎜🎜# #🎜🎜#paling dekat('ungkapan')#🎜🎜# #🎜🎜##🎜🎜#

Atas ialah kandungan terperinci Melintasi menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!