penapisan jQuery
jQuery Traversal - Penapis
Julat ringkasan elemen carian
Tiga kaedah penapisan paling asas ialah: first(), last() dan eq(), yang membolehkan anda memilih elemen tertentu berdasarkan kedudukannya dalam 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()
first() Kaedah mengembalikan elemen pertama elemen yang dipilih.
Contoh berikut memilih elemen <p> pertama di dalam <div> elemen pertama:
Contoh
<!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 Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
kaedah jQuery last()
kaedah last() mengembalikan elemen terakhir elemen yang dipilih.
Contoh berikut memilih <p> elemen terakhir dalam <div> elemen terakhir:
Contoh
<!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 Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
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):
Instance
<!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>菜鸟教程 (index 0).</p>
<p>http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>Jalankan Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
kaedah penapis jQuery()
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":
Instance
<!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>菜鸟教程 (index 0).</p>
<p class="url">http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
kaedah 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":
Instance
<!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>菜鸟教程 (index 0).</p>
<p class="url">http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
