Hello guys! jQuery merupakan salah satu Library JavaScript yang cukup populer. Kali ini, kita akan membuat Program JavaScript jQuery Sederhana menggunakan Action-Event.
Berikut ini adalah beberapa Aturan Dasar Penulisan Kode dalam jQuery.
1. Pengertian jQuery Object ($)
Sepanjang penggunaan jQuery, hampir selalu didahului tanda $. Tanda dollar '$' (dollar sign) adalah sebuah shortcut untuk mengakses jQuery Object. Di dalam jQuery Object inilah seluruh fungsi-fungsi jQuery berada. Sebagai contoh, untuk mencari element HTML yang memiliki atribut id="tombol", kita bisa menulis :
$("#tombol")
Jika karena sesuatu hal kita tidak bisa menggunakan tanda $ (biasanya karena bentrok dengan library lain), bisa menggunakan jQuery(), seperti berikut :
jQuery("#tombol")
2. Pengertian jQuery Action dan Event
Untuk bisa melakukan 'sesuatu' terhadap element HTML, kita tinggal menyambung penulisan jQuery Object dengan jQuery Action, atau dikenal juga dengan jQuery Event.
Format dasarnya adalah sebagai berikut :
$(selector).action()
Selector digunakan untuk mencari element mana dari HTML yang akan dimanipulasi. Bisa berupa sebuah paragraf <p>, sebuah gambar <img>, atau sesuatu yang lebih kompleks, seperti element <tr> pertama dari tabel kedua. Kita akan membahas jenis-jenis selector jQuery dalam tutorial selanjutnya.
Action adalah sesuatu yang bisa kita lakukan dengan element HTML tersebut, apakah menyembunyikannya, menampilkannya, mengubah warna, menambahkan element baru, dll. Action mirip seperti Event dalam JavaScript, tetapi dengan penambahan berbagai fitur lain. Di dalam jQuery, sebuah action bisa disambung dengan action lain, atau dikenal dengan isitilah chaining.
Berikut contoh penulisan jQuery Object, selector dan action :
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Belajar jQuery Bersama Inzaghi</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>$(document).ready(function () {// Simpan nilai asli dari elemen h1var originalFontSize = $("h1").css("font-size");var originalColor = $("h1").css("color");$("#tombol_hide").click(function () {$("h1").hide();});$("#tombol_show").click(function () {$("h1").show();});$("#tombol_small").click(function () {$("h1").css("font-size", "20px");});$("#tombol_red").click(function () {$("h1").css("color", "red");});$("#tombol_reset").click(function () {$("h1").css("font-size", originalFontSize);$("h1").css("color", originalColor);});});</script></head><body><h1>Belajar jQuery di Inzaghi's Blog</h1><button id="tombol_hide">Sembunyikan</button><button id="tombol_show">Tampilkan</button><button id="tombol_small">Perkecil</button><button id="tombol_red">Merahkan</button><button id="tombol_reset">Ulangi</button></body></html>
Hasil Output :
Tampilan diatas masih sangat sederhana, dimana ketika tombol ditekan, akan terjadi "sesuatu" terhadap tag <h1>. Menggunakan jQuery, kita bisa membuat berbagai efek menarik lainnya.
Untuk sementara, anda dapat abaikan apa maksud kode-kode diatas. Disini saya hanya memperlihatkan bagaimana sebuah kode jQuery ditulis, terutama bagian seperti $("h1").hide(), atau $("h1").css("font-size","20px"). Ini semua adalah cara penulsain gabungan dari jQuery Object, jQuery Selector, dan jQuery Action.
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)