penapisan jQuery
jQuery Traversal - Penapisan
Julat ringkasan elemen carian
Tiga kaedah penapisan paling asas ialah: pertama(), terakhir ( ) dan eq(), yang membolehkan anda memilih elemen tertentu berdasarkan kedudukannya dalam satu set elemen.
Kaedah penapisan lain seperti penapis() dan bukan() membolehkan anda memilih elemen yang sepadan atau tidak sepadan dengan kriteria yang ditentukan.
kaedah jQuery first()
kaedah first() mengembalikan elemen pertama bagi elemen yang dipilih.
Contoh berikut memilih <p> elemen pertama di dalam <div> elemen pertama:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>Jalankan program dan cuba
kaedah jQuery last()
kaedah last() mengembalikan elemen terakhir bagi elemen yang dipilih.
Contoh berikut memilih elemen <p> terakhir dalam elemen <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>Jalankan program dan cuba
kaedah jQuery eq()
kaedah eq() mengembalikan elemen dengan nombor indeks yang ditentukan antara elemen yang dipilih.
Indeks bermula pada 0, jadi elemen pertama mempunyai indeks 0 dan bukannya 1. Contoh berikut memilih elemen <p> kedua (nombor indeks 1):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>php中文网 (index 0).</p>
<p>//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>Jalankan program dan cuba
kaedah jQuery filter() < Kaedah 🎜>
penapis() membolehkan anda menentukan kriteria. Elemen yang tidak sepadan dengan kriteria ini dialih keluar daripada koleksi dan elemen sepadan dikembalikan. Contoh berikut mengembalikan semua <p> elemen dengan nama kelas "url":<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Jalankan program untuk mencubanyakaedah jQuery not()
kaedah not() mengembalikan semua elemen yang tidak sepadan dengan kriteria.
Petua: Kaedah not() adalah bertentangan dengan penapis().
Contoh berikut mengembalikan semua <p> elemen tanpa nama kelas "url":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").not(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Jalankan program untuk mencubanya
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
