jQuery traversal - penapisan
Julat elemen carian
Tiga kaedah penapisan paling asas ialah: first(), last() dan eq(), yang membolehkan anda memilih elemen tertentu berdasarkan kedudukannya dalam set elemen elemen.
Kaedah penapisan lain seperti penapis() dan bukan() membolehkan anda memilih elemen yang sepadan atau tidak sepadan dengan kriteria yang ditentukan.
kaedah first()
kaedah first() mengembalikan elemen pertama elemen yang dipilih.
<!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","blue");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>Memilih <p> elemen pertama di dalam elemen <div>
kaedah last()
kaedah last() mengembalikan elemen terakhir bagi elemen yang dipilih.
<!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","red");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>Memilih elemen <p> terakhir dalam elemen <div>
kaedah eq()
eq() kaedah mengembalikan elemen dengan nombor indeks yang ditentukan antara elemen yang dipilih.
Indeks bermula pada 0, jadi indeks elemen pertama ialah 0 bukannya 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","green");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p>http://www.php.cn (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>Memilih elemen <p> kedua (indeks 1).
kaedah penapis() Kaedah
penapis() membolehkan anda menentukan kriteria. Elemen yang tidak sepadan dengan kriteria ini dialih keluar daripada koleksi dan elemen sepadan dikembalikan.
<!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>
<p>php中文网 (index 0).</p>
<p class="url">http://www.php.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Mengembalikan semua <p> dengan nama kelas "url".
kaedah not() Kaedah
not() mengembalikan semua elemen yang tidak sepadan dengan kriteria.
Petua: Kaedah not() adalah bertentangan dengan penapis().
<!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","gray");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p class="url">http://www.php.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Mengembalikan semua <p> elemen tanpa nama kelas "url".
![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)
