pemilih jQuery
Pemilih jQuery membenarkan anda mengendalikan kumpulan elemen HTML atau elemen individu.
Pemilih jQuery
Pemilih jQuery membenarkan anda untuk beroperasi pada kumpulan elemen HTML atau pada elemen individu.
Pemilih jQuery "cari" (atau pilih) elemen HTML berdasarkan id, kelas, jenis, atribut, nilai atribut, dsb. Ia berdasarkan pemilih CSS sedia ada, sebagai tambahan kepada beberapa pemilih tersuai.
Semua pemilih dalam jQuery bermula dengan tanda dolar: $().
Pemilih Elemen
Pemilih elemen jQuery memilih elemen berdasarkan namanya.
Pilih semua <p> elemen dalam halaman:
Instance
Selepas pengguna mengklik butang, semua <p> elemen disembunyikan:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>Jalankan instance»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
#id selector
jQuery #id selector memilih elemen yang ditentukan melalui atribut id daripada elemen HTML.
Id elemen dalam halaman hendaklah unik, jadi jika anda ingin memilih elemen unik dalam halaman, anda perlu lulus pemilih #id.
Sintaks untuk memilih elemen mengikut id adalah seperti berikut:
Contoh
Apabila pengguna mengklik butang, elemen dengan atribut id="test" akan disembunyikan:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
.pemilih kelas
Pemilih kelas jQuery boleh cari elemen mengikut kelas yang ditentukan.
Sintaks adalah seperti berikut:
Instance
Pengguna mengklik butang Semua elemen dengan atribut class="test" disembunyikan:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>Jalankan instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Lagi contoh
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选取所有元素 | 在线实例 |
| $(this) | 选取当前 HTML 元素 | 在线实例 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 | 在线实例 |
| $("p:first") | 选取第一个 <p> 元素 | 在线实例 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("[href]") | 选取带有 href 属性的元素 | 在线实例 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | 在线实例 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | 在线实例 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | 在线实例 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | 在线实例 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 | 在线实例 |
Menggunakan fungsi jQuery dalam fail kendiri
Jika tapak web anda mengandungi banyak halaman dan anda mahu fungsi jQuery anda mudah diselenggara , kemudian sila letakkan fungsi jQuery anda ke dalam fail .js yang berasingan.
Apabila kami menunjukkan jQuery dalam tutorial, kami menambah fungsi terus ke bahagian <head> Walau bagaimanapun, adalah lebih baik untuk meletakkannya dalam fail berasingan, seperti ini (merujuk fail melalui atribut src):
Instance
< ;script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="my_jquery_functions.js " ></script>
</head>
