Langkah Pertama jQuery
Langkah Pertama jQuery
Langkah Pertama jQuery ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 1. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 1 pelajaran.
Pengenalan
Helo,
Untuk menggunakan pustaka JQuery, kita perlu menambahkannya pada dokumen HTML terlebih dahulu.
Dalam contoh di bawah, alamat pustaka jQuery telah ditambahkan sebagai nilai atribut src antara tag head.
Sekarang pustaka jQuery sedia digunakan dalam projek 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 kini akan kita panggil DOM), kita perlu memilih elemen tersebut terlebih dahulu.
Dalam jQuery, kaedah $() atau jQuery() digunakan untuk membuat pilihan.
Kaedah $() lebih kerap digunakan oleh pembangun perisian.
Melalui parameter yang akan kita tetapkan kepada kaedah ini, kita menentukan elemen yang ingin dipilih.
Xpath
Ungkapan yang kita hantar kepada kaedah $ ialah pemilih XPath, yang juga kita kenali daripada CSS.
Dalam erti kata lain, kita memilih elemen HTML dalam JQuery dengan cara yang sama seperti kita memilih dalam CSS.
Contoh XPath
Andaikan kod HTML kita adalah seperti berikut.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Mari kita pilih 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 membolehkan kita menulis kod dengan lebih ringkas
Jika kita mahu melakukan perkara yang sama dengan Vanilla (JavaScript biasa), kita perlu menulis lebih banyak baris kod.
jQuery membolehkan kita menulis kod dengan lebih ringkas melalui kaedahnya sendiri.
Amaran
JQuery hanyalah sebuah pustaka dan sebenarnya menjadikan pembangunan web lebih mudah berbanding JavaScript Vanilla.
Maklumat
Satu lagi kelebihan jQuery ialah semua pelayar moden menyokong kod yang kita tulis.
Sesetengah kod yang kita tulis dengan VanillaJS boleh menyebabkan kesan sampingan dalam pelayar tertentu, manakala jQuery menjamin kod tersebut berkelakuan sama dalam setiap pelayar melalui lapisan abstraksi yang disediakannya.
JQuery membebaskan kita daripada perlu memikirkan perbezaan khusus pelayar semasa menulis kod.
$(document).ready
Sebelum kita mempelajari asas jQuery, mari kita pelajari kaedah $(document).ready.
Seperti yang kita ingat tentang HTML, kita telah menyatakan bahawa skrip JavaScript boleh diletakkan di mana-mana sahaja antara tag head atau antara tag body dalam HTML.
$(document).ready 2
Mari kita anggap kita mempunyai kod HTML seperti di bawah.
Pelayar kita akan mentafsir kod bermula daripada tag <!DOCTYPE html> sehingga tag penutup </html>.
Pernyataan <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> akan mula memuat turun pustaka melalui code.jquery.com.
Pada baris seterusnya, kaedah $ jQuery memilih DOM. Walau bagaimanapun, terdapat masalah di sini. Jika dokumen HTML belum dimuatkan sepenuhnya ketika kaedah $ ('# test') dipanggil, kod JS kita akan gagal.
Dalam keadaan ini, kaedah $(document).ready digunakan untuk memastikan dokumen telah dimuatkan sepenuhnya.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Selepas definisi di atas,
Yang perlu kita lakukan hanyalah menggunakan kaedah $(document).ready(). Kaedah ini akan menunggu sehingga semua kandungan dimuatkan, kemudian 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>Soalan
Ayuh, jawab soalan ini!
Tahniah
Tahniah 🎉
Dalam bahagian ini, kita telah mula mempelajari pustaka jQuery dan kaedah $(document).ready()nya.
Dalam bahagian seterusnya, kita akan mempelajari pemilih jQuery.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 48
Soalan Lazim
Adakah pelajaran “Langkah Pertama jQuery” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Langkah Pertama jQuery”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 1 pelajaran.
Apakah yang akan saya pelajari dalam “Langkah Pertama jQuery”?
Langkah Pertama jQuery Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 1.
Berapa lamakah pelajaran “Langkah Pertama jQuery” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.