pemilih jQuery
Komponen teras jQuery ialah: enjin pemilih, yang mewarisi sintaks CSS dan boleh dengan cepat dan tepat memilih nama teg, nama atribut, status, dll. elemen DOM tanpa perlu risau tentang keserasian penyemak imbas >Jadi kebanyakan pemilih jQuery yang kami perkenalkan di bawah adalah serupa dengan pemilih CSS yang kami pelajari sebelum ini
Pemilih CSS digunakan untuk mencari dan mencari elemen pada halaman, dan menetapkan gaya Pergi ke elemen <. ??>
Apabila menggunakan pemilih jQuery, kita mesti menggunakan fungsi "$()" untuk membungkus peraturan css kami, dan selepas peraturan css diluluskan sebagai parameter kepada objek jQuery, ia dikembalikan Mengandungi objek jQuery elemen yang sepadan dalam halaman Kemudian, kita boleh melakukan operasi tingkah laku pada nod DOM yang diperoleh.
Pemilih Elemen
Pemilih elemen jQuery memilih elemen berdasarkan namanya.
Pilih semua <p> elemen dalam halaman:$("p")
Contoh
Selepas pengguna mengklik butang, semua <p> akan bertukar warna:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css('color','red'); //添加一個行為
});
});
</script>
</head>
<body>
<h2>這是一個標(biāo)題</h2>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<button>點我</button>
</body>
</html>Jalankan program untuk mencubanya#id selector
jQuery #id selector memilih elemen yang ditentukan melalui atribut id elemen HTML.
Nota: ID hanya dibenarkan muncul sekali pada halaman Kami biasanya memerlukan pembangun untuk mematuhi dan mengekalkan peraturan ini. Tetapi jika anda muncul tiga kali dalam halaman dan menggunakan gaya css, maka ketiga-tiga elemen ini masih akan melaksanakan kesannya Tetapi jika anda melakukan ini dalam jQuery, anda akan menghadapi masalah Hanya satu ID akan berkuat kuasa, jadi kami mesti Jadikannya kebiasaan menggunakan hanya satu ID pada halaman Sintaks untuk memilih elemen mengikut id adalah seperti berikut:$("#test")
Instance
Apabila pengguna mengklik butang, elemen dengan atribut id="test" akan bertukar merah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").css('color','red');
});
});
</script>
</head>
<body>
<h2>標(biāo)題</h2>
<p>段落</p>
<p id="test">我變顏色了</p>
<button>點我</button>
</body>
</html>Jalankan program untuk mencubanya.pemilih kelas
Pemilih kelas jQuery boleh mencari elemen mengikut kelas yang ditentukan.
Sintaksnya adalah seperti berikut:
$(".test")
Contoh
Selepas pengguna mengklik butang, semua elemen dengan atribut class="test" akan bertukar warna:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").css('color','blue');
});
});
</script>
</head>
<body>
<h2 class="test">class選擇器</h2>
<p class="test">class選擇器</p>
<button>點我</button>
</body>
</html>Jalankan program untuk mencubanya
Lebih banyak contoh pemilih
| 語法 | 描述 |
|---|---|
| $(this) | 當(dāng)前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
