Rumah hujung hadapan web tutorial js Contoh penggunaan kaedah penapis() dalam jQuery_jquery

Contoh penggunaan kaedah penapis() dalam jQuery_jquery

May 16, 2016 pm 04:22 PM
filter() jquery kaedah penggunaan

Kaedah ini boleh menapis elemen atau koleksi elemen yang sepadan dengan ungkapan atau nilai pulangan kaedah yang ditentukan.

Struktur tatabahasa 1:
Tapis set elemen yang sepadan dengan ungkapan yang ditentukan.

Salin kod Kod adalah seperti berikut:
$(selector).filter(expr)

Senarai parameter:

参数 描述
expr 字符串值,用于筛选当前元素集合的选择器表达式。

Kod contoh:

Salin kod Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<kepala>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>filter() function-Script Home</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(dokumen).sedia(fungsi(){
$("li").filter(".js").css("color","biru")
})
</skrip>
</head>
<badan>
<div>
<ul>
<li>Zon HTML</li>
<li class="js">Javascript Zone</li>
<li>Zon Css Div</li>
<li>Zon Jquery</li>
</ul>
</div>
</body>
</html>

Kod ini boleh menetapkan warna fon dalam li dengan nama kelas js kepada biru.

Struktur tatabahasa 2:

Tapis objek jquery yang ditentukan daripada koleksi elemen.

Salin kod Kod adalah seperti berikut:
$(selector).filter(elemen)

Senarai parameter:

参数 描述
element 用于匹配当前元素集合中元素的jQuery对象或者DOM对象。

Kod contoh:

Contoh 1:

Salin kod Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<kepala>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>filter() function-Script Home</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(dokumen).sedia(fungsi(){
$("li").filter(document.getElementById("js")).css("color","biru")
})
</skrip>
</head>
<badan>
<div>
<ul>
<li>Zon HTML</li>
<li id="js">Javascript Zone</li>
<li>Zon Css Div</li>
<li>Zon Jquery</li>
</ul>
</div>
</body>
</html>

Contoh 2:

Salin kod Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<kepala>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>filter() function-Script Home</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(dokumen).sedia(fungsi(){
$("li").penapis($($("li")[0])).css("warna","biru")
})
</skrip>
</head>
<badan>
<div>
<ul>
<li>Zon HTML</li>
<li id="js">Javascript Zone</li>
<li>Zon Css Div</li>
<li>Zon Jquery</li>
</ul>
</div>
</body>
</html>

Struktur tatabahasa tiga:

Tapis set elemen yang sepadan dengan nilai pulangan fungsi yang ditentukan.
Kaedah penapis() akan dikira sekali untuk setiap objek secara dalaman (seperti $.each). Jika fungsi yang dipanggil mengembalikan palsu maka elemen itu dipadamkan, jika tidak, ia akan dikekalkan.

Salin kod Kod adalah seperti berikut:
$(selector).filter(function())

Senarai parameter:

参数 描述
function(index) 定义返回filter()匹配值的函数。
index为当前元素在匹配元素集合中的索引值。

Kod contoh:

Salin kod Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<kepala>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>filter() function-Script Home</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(dokumen).sedia(fungsi(){
$("ul").penapis(fungsi(indeks){
Kembalikan $(".js",this).length==0;
}).css("warna","biru")
})
</skrip>
</head>
<badan>
<div>
<ul>
<li>Zon HTML</li>
<li class="js">Javascript Zone</li>
<li>Zon Css Div</li>
<li>Zon Jquery</li>
</ul>
<ul>
<li>Fon akan bertukar menjadi biru</li>
</ul>
</div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato. Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato. Mar 28, 2024 pm 12:50 PM

Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato.

Bagaimana untuk memasukkan bios pada papan induk Berwarna-warni? Ajar anda dua kaedah Bagaimana untuk memasukkan bios pada papan induk Berwarna-warni? Ajar anda dua kaedah Mar 13, 2024 pm 06:01 PM

Bagaimana untuk memasukkan bios pada papan induk Berwarna-warni? Ajar anda dua kaedah

Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam) Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam) May 01, 2024 pm 12:01 PM

Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam)

Ringkasan kaedah untuk mendapatkan hak pentadbir dalam Win11 Ringkasan kaedah untuk mendapatkan hak pentadbir dalam Win11 Mar 09, 2024 am 08:45 AM

Ringkasan kaedah untuk mendapatkan hak pentadbir dalam Win11

Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan! Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan! Mar 23, 2024 am 10:42 AM

Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan!

Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih) Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih) May 04, 2024 pm 06:01 PM

Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih)

Penjelasan terperinci tentang kaedah pertanyaan versi Oracle Penjelasan terperinci tentang kaedah pertanyaan versi Oracle Mar 07, 2024 pm 09:21 PM

Penjelasan terperinci tentang kaedah pertanyaan versi Oracle

Bagaimana untuk menetapkan saiz fon pada telefon mudah alih (mudah melaraskan saiz fon pada telefon bimbit) Bagaimana untuk menetapkan saiz fon pada telefon mudah alih (mudah melaraskan saiz fon pada telefon bimbit) May 07, 2024 pm 03:34 PM

Bagaimana untuk menetapkan saiz fon pada telefon mudah alih (mudah melaraskan saiz fon pada telefon bimbit)

See all articles