8.1 Menyambung jQuery
Akhirnya, kami sampai ke perpustakaan jQuery. Pada masa artikel ini ditulis, ia sudah lapuk dan hampir tidak pernah digunakan dalam projek baharu . Tetapi pada satu ketika ia sangat popular, didokumentasikan dengan sangat baik, dan terdapat banyak contoh di Internet dengan penggunaannya .
Oleh itu, jika anda menulis projek web kecil dan tidak mahu menghabiskan masa berbulan-bulan mempelajari rangka kerja moden, saya mengesyorkan agar anda menggunakan perpustakaan jQuery.
Untuk menggunakan beribu-ribu fungsi jQuery, anda hanya perlu memasukkannya ke dalam halaman anda. Anda boleh melakukannya seperti ini:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Bekerja dengan jQuery boleh dibahagikan kepada dua jenis.
Mula-mula, anda boleh mendapatkan objek perpustakaan jQuery, iaitu elemen HTML biasa yang dibalut dalam objek jQuery tersuai.
Kedua, jQuery mempunyai beberapa objek global yang tidak terikat dengan elemen HTML. Mereka juga perlu digunakan.
Mari kita mulakan dengan yang pertama.
8.2 Bekerja dengan pemilih
jQuery menggunakan pemilih untuk bekerja dengan objek (ingat CSS dan kelasnya?). Jadi, dalam jQuery, jika anda ingin memilih beberapa objek atau kumpulan objek, anda perlu menetapkan pemilihnya.
Contoh:
| Kod | Penerangan | Catatan | |
|---|---|---|---|
| 1 | $("div") | Memilih semua objek dengan tag DIV | banyak objek |
| 2 | $("img.#image123") | Memilih semua objek dengan tag IMG dan ID == image123 | satu objek |
| 3 | $("#imej123") | Memilih semua objek dengan ID == image123 | satu objek |
| 4 | $("div.article") | Memilih semua objek dengan teg DIV yang mempunyai artikel kelas | banyak objek |
Katakan kita mahu menambah pengendalian acara pada semua pautan onclick, berikut ialah cara kita boleh melakukannya dengan jQuery:
$("a").click(function() {
alert("Click");
});Tiga langkah diambil di sini:
- Mendapatkan objek yang sepadan dengan pemilih
"a". - Kami mencipta fungsi tanpa nama yang memanggil
alert(). - Kami menetapkan fungsi ini sebagai pengendali acara
clickuntuk semua objek dari titik 1.
Satu lagi perkara yang baik tentang jQuery ialah kodnya mudah dibaca. Tidak perlu banyak untuk memikirkan bagaimana semuanya berfungsi. Jika terdapat kod yang berfungsi, maka cukup mudah untuk memahami fungsinya.
8.3 Bekerja dengan elemen dokumen
Mari lihat beberapa senario untuk bekerja dengan dokumen menggunakan jQuery.
Dapatkan nilai elemen (untuk elemen yang mempunyai nilai):
var result = $ ("selector").value();Tetapkan nilai elemen (untuk elemen yang mempunyai nilai):
$ ("selector").value(newValue);Bagaimana untuk menambah HTML di dalam beberapa elemen?
$ ("selector").html(newHTML);Dan bagaimana untuk mendapatkan HTML yang ada di dalam elemen?
var html = $ ("selector").html();Bagaimana jika saya ingin mendapatkan/menambah bukan HTML, tetapi teks biasa? Tiada kejutan di sini juga.
var html = $ ("selector").text();Bagaimana jika saya ingin mendapatkan/menukar warna sesuatu elemen?
$ ("selector").color("red");Jika anda perlu bekerja dengan gaya, maka ini juga mudah dilakukan:
$ ("selector").css("color", "red");Bagaimana untuk menambah elemen baharu?
$ (".container").append($("h3"));