Tutorial Belajar jQuery Part 4: Aturan Dasar Penulisan Kode jQuery

Posted on

Setelah mempelajari event ready() jQuery, kali ini kita akan melihat sekilas aturan dasar penggunaan kode jQuery serta pengertian jQuery Object dan jQuery Event.


Pengertian jQuery Object ($)

Sepanjang pemakaian jQuery, hampir selalu didahului tanda $. Tanda dollar ‘$’ (dollar sign) yaitu sebuah shortcut untuk mengakses jQuery Object. Di di jQuery Object inilah seluruh fungsi-fungsi jQuery berada. Selaku contoh, untuk mencari element HTML yang mempunyai atribut id=”tombol”, kita dapat menulis:

Bila karena sesuatu hal kita tak dapat menggunakan tanda $ (biasanya karena benturan dengan library lain), dapat menggunakan jQuery(), seperti berikut:


Pengertian jQuery Action / jQuery Event

Untuk dapat menjalankan ‘sesuatu’ kepada element HTML, kita tinggal menyambung penulisan jQuery Object dengan jQuery Action, atau dikenal pun dengan jQuery Event.

Format dasarnya yaitu selaku berikut:

Selector digunakan untuk mencari element mana dari HTML yang akan dimanipulasi. Dapat berupa sebuah paragraf <p>, sebuah gambar <img>, atau sesuatu yang lebih kompleks, seperti element <tr> pertama-tama dari tabel kedua. Kita akan membahas jenis-jenis selector jQuery di panduan berikutnya.

Action yaitu sesuatu yang dapat kita lakukan dengan element HTML tersebut, apakah menyembunyikannya, menampilkannya, mengubah warna, menambahkan element baru, dll. Action mirip seperti Event di JavaScript, tetapi dengan penambahan bermacam fitur lain. Di di jQuery, sebuah action dapat disambung dengan action lain, atau dikenal dengan isitilah chaining.

Berikut contoh penulisan jQuery Object, selector dan action:

Silahkan sobat coba sendiri dari link codepen dibawah ini:

See the Pen Aturan Dasar Penulisan Kode jQuery by duniailkom (@duniailkom) on CodePen.10206

Tampilan diatas masih benar-benar sederhana, dimana ketika tombol ditekan, akan terjadi “sesuatu” kepada tag <h1>. Menggunakan jQuery, kita dapat membangun bermacam efek menarik lainnya.

Untuk sementara, sobat 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 yaitu cara penulsain gabungan dari jQuery Object, jQuery Selector, dan jQuery Action.

Di panduan berikutnya, saya akan membahas lebih di mengenai jQuery Selector, yakni Cara Mencari Element HTML dengan jQuery Selector.


Sumber https://www.duniailkom.com/