Apa itu jQuery?
jQuery adalah pustaka JavaScript yang cepat, kecil, dan kaya fitur.
Itu membuat hal-hal seperti traversal dan manipulasi dokumen HTML, penanganan acara, dan animasi menjadi lebih mudah.
Semua kekuatan jQuery diakses melalui JavaScript, jadi memiliki pemahaman yang kuat tentang JavaScript sangat penting untuk memahami, menyusun, dan men-debug kode Sobat Tekno nih.
Pertama, mari kita lihat contoh manipulasi HTML dengan JavaScript.
Untuk mendapatkan elemen dengan id = "start" dan mengubah html menjadi "Go" kita perlu melakukan hal berikut:
var el = document.getElementById("start");
el.innerHTML = "Go";
el.innerHTML = "Go";
Untuk melakukan manipulasi yang sama dengan jQuery, kita hanya perlu satu baris kode:
$("#start").html("Go");
Mulai
Saya akan menggunakan CDN dari situs web jQuery resmi.
Untuk mulai menggunakan jQuery, pertama-tama kita harus menambahkannya ke kepala dokumen HTML menggunakan tag skrip:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
</body>
</html>
Ini adalah praktik yang baik untuk menunggu dokumen HTML dimuat sepenuhnya dan siap sebelum bekerja dengannya.
Untuk itu saya menggunakan acara siap dari objek dokumen:
$(document).ready(function() {
// jQuery code ada disini
});
// jQuery code ada disini
});
"$" Digunakan untuk mengakses jQuery. Dari sini, kode mengakses objek dokumen dan menentukan fungsi yang akan dipanggil ketika acara siap dokumen dipecat.
Ini mencegah kode jQuery dari menjalankan sebelum dokumen selesai memuat.
Karena kode di atas digunakan di hampir semua kasus ketika menggunakan jQuery, ada jalan pintas yang berguna untuk menulisnya:
$(function() {
// jQuery code ada disini
});
// jQuery code ada disini
});
Sekarang, dengan memiliki pustaka jQuery di bagian kepala saya dan telah menentukan acara siap dokumen, kita dapat memulai manipulasi jQuery pertama kami! Mari kita ubah konten elemen div.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div id="start">Start</div>
</body>
</html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div id="start">Start</div>
</body>
</html>
$(function() {
$("#start").html("Go!");
});
$("#start").html("Go!");
});
Syntax
jQuery digunakan untuk memilih (meminta) elemen HTML dan melakukan "aksi" padanya.
Sintaks dasarnya adalah: $ ("selector"). Action ()
- $ mengakses jQuery.
- (pemilih) menemukan elemen HTML.
- Tindakan () kemudian dilakukan pada elemen.
Untuk contoh :
$ ("p"). hide () // menyembunyikan semua elemen <p>
$ (". demo"). sembunyikan () // sembunyikan semua elemen dengan class = "demo"
$ ("# demo"). hide () // menyembunyikan elemen dengan id = "demo"
$ (". demo"). sembunyikan () // sembunyikan semua elemen dengan class = "demo"
$ ("# demo"). hide () // menyembunyikan elemen dengan id = "demo"
Melihat kembali kode dari contoh sebelumnya:
$ ("# start"). html ("Go!");
Penyeleksi
Mari kita lihat semua penyeleksi jQuery.
Seperti yang Sobat lihat dalam pelajaran sebelumnya, pemilih jQuery mulai dengan tanda dolar dan tanda kurung: $ ().
Pemilih paling dasar adalah pemilih elemen, yang memilih semua elemen berdasarkan nama elemen.
$ ("div") // memilih semua elemen <div>
Berikutnya adalah pemilih id dan kelas, yang memilih elemen dengan id dan nama kelas mereka:
$ ("# test") // pilih elemen dengan id = "test"
$ (". menu") // memilih semua elemen dengan class = "menu"
$ (". menu") // memilih semua elemen dengan class = "menu"
Sobat juga dapat menggunakan sintaks berikut untuk penyeleksi:
$ ("div.menu") // semua elemen <div> dengan class = "menu"
$ ("p: first") // elemen <p> pertama
$ ("h1, p") // semua elemen <h1> dan semua <p>
$ ("div p") // semua elemen <p> yang merupakan turunan dari elemen <div>
$ ("*") // semua elemen DOM
$ ("p: first") // elemen <p> pertama
$ ("h1, p") // semua elemen <h1> dan semua <p>
$ ("div p") // semua elemen <p> yang merupakan turunan dari elemen <div>
$ ("*") // semua elemen DOM
Selektor yang Berguna
Oke, demikian lah artikel tutorial jQuery hari ini. Oh ya ini kan baru yang "#1" nih Sobat Tekno. Nah Saya akan membuatnya sampai "#6". Yah sudah saya perkirakan dan di akhir pembahasan setelah "#6" Akan saya selipkan sejarah JQuery.
Gimana belajarnya tadi Sobat Tekno ribet ya? Maaf tapi memang begitulah JQuery. Sobat Tekno dapat menerapkan dalam hati bahwa "BELAJAR BAHASA PEMOGRAMAN ITU MENYENANGKAN" (PROGRAM LANGUAGE IS FUN). Yah sampai jumpa di Next artikel Sobat Tekno!
Salam Tekno~
Terima kasih ilmunya mas. Ijin belajar jquery sapa tau bisa berguna buat masa depan.
ReplyDeleteSama sama mas. Monggo, Selamat belajar mas.
Delete