8.1 Menghubungkan jQuery
Akhirnya, kami sampai di perpustakaan jQuery. Pada saat artikel ini ditulis, sudah usang dan hampir tidak pernah digunakan dalam proyek baru . Tetapi pada suatu waktu itu sangat populer, didokumentasikan dengan sangat baik, dan ada banyak contoh di Internet dengan penggunaannya .
Oleh karena itu, jika Anda sedang menulis proyek web kecil dan tidak ingin menghabiskan waktu berbulan-bulan mempelajari kerangka kerja modern, saya sarankan Anda menggunakan perpustakaan jQuery.
Untuk menggunakan ribuan fungsi jQuery, Anda hanya perlu memasukkannya ke halaman Anda. Anda dapat melakukannya seperti ini:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Bekerja dengan jQuery dapat dibagi menjadi dua jenis.
Pertama, Anda bisa mendapatkan objek perpustakaan jQuery, yang merupakan elemen HTML biasa yang dibungkus dengan objek jQuery khusus.
Kedua, jQuery memiliki beberapa objek global yang tidak terikat pada elemen HTML. Mereka juga perlu digunakan.
Mari kita mulai dengan yang pertama.
8.2 Bekerja dengan pemilih
jQuery menggunakan penyeleksi untuk bekerja dengan objek (ingat CSS dan kelasnya?). Jadi, di jQuery, jika Anda ingin memilih beberapa objek atau grup objek, Anda perlu mengatur pemilihnya.
Contoh:
| Kode | Keterangan | Catatan | |
|---|---|---|---|
| 1 | $("div") | Memilih semua objek dengan tag DIV | banyak objek |
| 2 | $("img.#gambar123") | Memilih semua objek dengan tag IMG dan ID == image123 | satu objek |
| 3 | $("#gambar123") | Memilih semua objek dengan ID == image123 | satu objek |
| 4 | $("div.artikel") | Memilih semua objek dengan tag DIV yang memiliki artikel kelas | banyak objek |
Katakanlah kita ingin menambahkan penanganan acara ke semua tautan onclick, berikut ini cara melakukannya dengan jQuery:
$("a").click(function() {
alert("Click");
});Tiga langkah diambil di sini:
- Mendapat objek yang cocok dengan pemilih
"a". - Kami membuat fungsi anonim yang memanggil
alert(). - Kami menetapkan fungsi ini sebagai event handler
clickuntuk semua objek dari titik 1.
Hal baik lainnya tentang jQuery adalah kodenya mudah dibaca. Tidak perlu banyak untuk mengetahui bagaimana semuanya bekerja. Jika ada kode yang berfungsi, maka cukup mudah untuk memahami fungsinya.
8.3 Bekerja dengan elemen dokumen
Mari kita lihat beberapa skenario untuk bekerja dengan dokumen menggunakan jQuery.
Dapatkan nilai elemen (untuk elemen yang memiliki nilai):
var result = $ ("selector").value();Tetapkan nilai elemen (untuk elemen yang memiliki nilai):
$ ("selector").value(newValue);Bagaimana cara menambahkan HTML di dalam beberapa elemen?
$ ("selector").html(newHTML);Dan bagaimana cara mendapatkan HTML yang ada di dalam elemen?
var html = $ ("selector").html();Bagaimana jika saya ingin mendapatkan/menambahkan bukan HTML, tetapi teks biasa? Tidak ada kejutan di sini juga.
var html = $ ("selector").text();Bagaimana jika saya ingin mendapatkan/mengubah warna suatu elemen?
$ ("selector").color("red");Jika Anda perlu bekerja dengan gaya, maka ini juga mudah dilakukan:
$ ("selector").css("color", "red");Bagaimana cara menambahkan elemen baru?
$ (".container").append($("h3"));