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
Pemilih jQuery juga digunakan untuk mencari elemen Selepas kita mencari elemen, kita boleh menggunakan beberapa kaedah yang diberikan untuk mengubah suai, memadam atau memindahkan 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中文网(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>这是一个标题</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中文网(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>标题</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中文网(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) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
bahagian seterusnya