Penjelasan terperinci kaedah penapis() jQuery merentasi nod DOM operations_jquery

Artikel ini menganalisis kaedah penapis() jQuery yang merentasi nod DOM melalui contoh. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

.penapis(pemilih)

Kaedah ini digunakan untuk menapis mengikut ungkapan pemilih dalam elemen padanan.
Ingat: apabila menggunakan kaedah ini, anda mesti memasukkan parameter ekspresi pemilih, jika tidak, ralat "'nodeType' kosong atau bukan objek" akan dilaporkan

Juga sila ambil perhatian perbezaan antara kaedah penapis ini dan kaedah cari dalam jquery:
Kaedah penapis menapis unsur padanan, manakala kaedah cari menapis unsur turunan unsur padanan.

Bermula dari versi jquery 1.4, dua penggunaan baharu telah ditambahkan pada kaedah penapis, dan kini terdapat empat penggunaan secara keseluruhan.

Mari lihat empat penggunaan ini secara terperinci:

1. penapis(pemilih)

Penggunaan ini adalah untuk menapis elemen yang dipadankan mengikut parameter pemilih yang diberikan (ungkapan pemilih jquery), dan kemudian membungkus elemen yang dipadankan ke dalam koleksi elemen jquery dan mengembalikannya. Kaedah ini digunakan untuk mengecilkan skop padanan Parameter pemilih boleh berbilang ungkapan yang disambungkan dengan koma.

Lihat contoh:

Kod HTML:

<ul>
  <li>11111</li>
  <li class="item">22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li>77777</li>
</ul>

Kod Jquery:

$("ul>li").filter(":even").css("color","red");
//将索引为偶数的li背景变为红色

Kod jquery di atas mempunyai kesan yang sama seperti kod jquery berikut

$("ul>li:even").css("color","red");
//将索引为偶数的li背景变为红色

Mari kita lihat penggunaan ungkapan pemilih yang disambungkan dengan koma:

$("ul>li").filter(":even,.item").css("color","blue");
//将索引为偶数和calss为item的li背景变为蓝色

Contoh demo adalah seperti berikut:

<ul>
  <li>11111</li>
  <li class="item">22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li>77777</li>
</ul>
<input type="button" id="test1" value="获取索引为偶数的li">
<input type="button" id="test2" value="获取索引为偶数和calss为item的li">
<script>
$(function(){
  $("#test1").click(function(){
    $("ul>li").filter(":even").css("color","red");//将索引为偶数的li背景变为红色
    //这个式子和 $("ul>li:even").css("color","red"); 等效
  });
  $("#test2").click(function(){
    $("ul>li").filter(":even,.item").css("color","blue");//将索引为偶数和calss为item的li背景变为蓝色
  });
});
</script>

2. .filter( function(index) )

Kaedah penggunaan ini adalah untuk melintasi elemen padanan Jika nilai yang dikembalikan oleh fungsi(indeks) adalah benar, maka elemen akan dipilih Jika nilai pulangan adalah palsu, maka elemen itu tidak akan dipilih

Parameter indeks ialah indeks unsur padanan semasa dalam koleksi unsur asal.

Jika anda tidak jelas tentang penjelasan di atas (kemahiran ekspresi saya agak kurang~^_^), anda boleh lihat contoh berikut:

Kod HTML:

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>

kod jquery:

$("div").filter(function(index) {
  return index == 1 || $(this).attr("id") == "fourth";
}).css("border", "5px double blue");

Hasil kod di atas ialah sempadan elemen div kedua dan elemen div dengan id "keempat" menjadi warna garisan berganda biru

Contoh demo adalah seperti berikut:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(function(index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "5px double blue");
});
</script>

3. .penapis( elemen )

Parameter elemen ialah objek DOM Jika objek DOM elemen dan elemen dipadankan adalah elemen yang sama, maka elemen ini akan dipadankan. Penggunaan ini baru ditambahkan dalam versi 1.4, saya masih belum mengetahui kegunaannya

Lihat contoh:

Masih melihat kod HTML di atas, lihat kod jquery:

Salin kod Kod adalah seperti berikut:

$("div").filter(document.getElementById("third ")) .css("sempadan", "5px biru berganda");

Hasilnya ialah sempadan elemen div dengan id third telah berubah.

Contoh ini sangat tidak berguna. Lebih baik pergi terus:

$("#third").css("border", "5px double blue");

Memang saya fikir begitu juga, tetapi kerana ia baru ditambah dalam versi 1.4, ia pasti berguna dan tidak akan menjadi sia-sia. Cuma tahap jquery saya masih terlalu rendah dan saya belum menemuinya lagi. Jika mana-mana pembaca mempunyai sebarang idea tentang kegunaan, saya harap anda dapat memberi pencerahan kepada saya!

Contoh demo adalah seperti berikut:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(document.getElementById("third")).css("border", "5px double blue");
});
</script>

4. .penapis(objek jQuery)

Penggunaan ini serupa dengan penggunaan .filter(elemen) di atas, kecuali satu parameter ialah objek DOM dan parameter lain ialah objek jquery, saya masih rasa ianya tidak berguna.

Lihat contoh:

Untuk kod HTML yang sama di atas, lihat kod jquery:

$("div").filter($("#third")).css("border", "5px double blue");

Hasilnya ialah sempadan elemen div dengan id third telah berubah.
Adalah lebih baik untuk menggunakan kod jquery berikut secara langsung:

$("#third").css("border", "5px double blue");

Contoh demo adalah seperti berikut:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter($("#third")).css("border", "5px double blue");
});
</script>

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Algoritma traversal JQuery dan ringkasan kemahiran", "ringkasan kemahiran operasi jadual (jadual) jQuery " , "Ringkasan kesan dan teknik seret jQuery", "Ringkasan teknik sambungan jQuery", "Ringkasan kesan khas klasik biasa jQuery" , "ringkasan penggunaan jQuery dan kesan khas penggunaan", "ringkasan penggunaan pemilih jquery" dan "ringkasan pemalam dan penggunaan biasa jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.