Langkah-Langkah Awal jQuery
Langkah-Langkah Awal jQuery
Langkah-Langkah Awal jQuery adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 1 pelajaran total.
Pendahuluan
Halo,
Untuk menggunakan pustaka JQuery, pertama-tama kita perlu menambahkannya ke dokumen HTML.
Pada contoh di bawah ini, alamat pustaka jQuery telah ditambahkan sebagai nilai atribut src di antara tag head.
Sekarang pustaka jQuery siap digunakan dalam proyek kita.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Pemilihan jQuery
Untuk melakukan operasi pada elemen HTML (yang selanjutnya akan kita sebut DOM), pertama-tama kita perlu memilih elemen tersebut.
Dalam jQuery, metode $() atau jQuery() digunakan untuk melakukan pemilihan.
Metode $() lebih sering dipilih oleh para pengembang perangkat lunak.
Dengan parameter yang kita tetapkan untuk metode ini, kita menentukan elemen yang ingin dipilih.
XPath
Ekspresi yang kita masukkan ke metode $ adalah pemilih XPath, yang juga kita kenal dari CSS.
Dengan kata lain, kita memilih elemen HTML dalam JQuery dengan cara yang sama seperti saat memilih di CSS.
Contoh XPath
Misalkan kode HTML kita adalah sebagai berikut.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Mari kita memilih elemen HTML menggunakan jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery memungkinkan kita menulis kode dengan lebih ringkas
Jika ingin melakukan hal yang sama dengan Vanilla(JavaScript Murni), kita harus menulis lebih banyak baris kode.
jQuery memungkinkan kita menulis kode dengan lebih ringkas melalui metode-metodenya sendiri.
Peringatan
JQuery hanyalah sebuah pustaka dan sebenarnya membuat pengembangan web lebih mudah daripada Vanilla JavaScript.
Informasi
Keunggulan lain jQuery adalah semua peramban modern mendukung kode yang kita tulis.
Beberapa kode yang kita tulis dengan VanillaJS dapat menimbulkan efek samping pada peramban tertentu, sedangkan jQuery menjamin perilaku yang sama di setiap peramban melalui abstraksi yang disediakannya.
JQuery membebaskan kita dari keharusan memikirkan perbedaan antarperamban saat menulis kode.
$(document).ready
Sebelum mempelajari dasar-dasar jQuery, mari kita pelajari metode $(document).ready.
Seperti yang kita ingat tentang HTML, kita mengatakan bahwa JavaScript dapat ditempatkan di mana saja di antara tag head atau di antara tag body dalam HTML.
$ (document).ready 2
Misalkan kita memiliki kode HTML seperti di bawah ini.
Peramban kita akan menafsirkan kode mulai dari tag <!DOCTYPE html> hingga tag penutup </html>.
Pernyataan <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> akan mulai mengunduh pustaka melalui code.jquery.com.
Pada baris berikutnya, kode tersebut memilih DOM menggunakan metode $ dari jQuery. Namun, ada masalah di sini. Jika dokumen HTML belum sepenuhnya dimuat saat metode $ ('# test') dipanggil, kode JS kita akan gagal.
Dalam kasus ini, metode $(document).ready digunakan untuk memastikan bahwa dokumen telah dimuat sepenuhnya.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$ (document).ready 3
Setelah definisi di atas,
Yang perlu kita lakukan hanyalah menggunakan metode $(document).ready(). Metode ini akan menunggu hingga semua konten selesai dimuat, lalu menjalankannya.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Pertanyaan
Ayo, jawab pertanyaannya!
Selamat
Selamat 🎉
Di bagian ini, kita mulai mempelajari pustaka jQuery dan metode $(document).ready().
Di bagian berikutnya, kita akan mempelajari Selector jQuery.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Langkah-Langkah Awal jQuery” gratis?
Ya — teks lengkap “Langkah-Langkah Awal jQuery” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 1 pelajaran total.
Apa yang akan aku pelajari di “Langkah-Langkah Awal jQuery”?
Langkah-Langkah Awal jQuery Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai jQuery Academy?
Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.
Berapa lama pelajaran “Langkah-Langkah Awal jQuery” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.