Sebelum kita mempelajari jquery lebih mendalam, ada baiknya kita mengetahui terlebih dahulu apa sih jquery itu? jQuery merupakan sebuah library yang ada pada javascript, seperti bahasa pemrograman pada umumnya yang memiliki beberapa library, javascript juga memiliki library yang berisikan fungsi-fungsi sintaks yang siap digunakan untuk memudahkan dalam penulisan kode javascript.
Setelah mengetahui apa yang dimaksud dengan jquery, mari kita belajar untuk menggunakan jquery. kali ini saya akan membahas tentang 5 tutorial dasar untuk memudahkan belajar jquery bagi pemula yang mudah untuk dipahami. Langsung aja nih kita bahas satu-satu di bawah ini.
1. Menginputkan File jQuery ke HTML
Pertama-tama kita akan membahas tentang penginputan file jquery ke HTML atau dengan kata lain menghubungkan file jquery yang ada di eksternal dengan HTML. Ada 2 cara dalam pengunputan file jquery ini, yang pertama dengan mengunduh dan mengakses jquery secara lokal (offline), dan yang kedua menggunakan content Delivery Network.
Kita akan membahas cara penginputan file jquery yang pertama yaitu dengan offline sehingga kita harus melakukan pengunduhan terlebih dahulu. Pengunduhan jquery dapat dilakukan pada situs resmi jquery yaitu jquery.com dan pada halaman tersebut terdapat button atau tombol "Download jQuery". Untuk sekarang jQuery yang ada pada situs resmi tersebut adalah versi 3.1.1. Setelah mengunduh file jquery, maka file dletakan di dalam 1 folder dengan kode HTML. Adapun sintaks untuk menghubungkannya sebagai berikut.
Setelah tertulis dalam kode HTML maka jquery sudah terhubung dengan HTML. untuk cara yang kedua dalam penginputan file jquery, yaitu dengan menggunakan CDN (Content Delivery Network). CDN hampir sama dengan hardisk namun dapat diakses oleh siapapun salah satu CDN adalah Google CDN dengan kaca menghubungkannya sebagai berikut.
Keunggulan dari penginputan file jquery dengan menggunakan CDN ini adalah kita tidak perlu repot-repot mengunduh file jquery seperti yang dilakukan pada cara offline.
2. Menjalankan Kode jQuery
Setelah kita menngetahui bahwa jquery itu sendiri adalah bagian dari javascript, maka pendeklarasian ataupun pengkodean pada jquery sama dengan javascript. pada javascript kita telah mengenal bahwa pendeklarasian kode javascript pada html diawali dengan <script> dan diakhiri dengan </script>. sama halnya dengan jquery akan sama pendeklarasikan seperti tersebut. kita akan lebih memahami dengan melihat kode html yang ada di bawah ini.
Dalam kode html yang ada di atas kita telah dapat menggunakan fungsi jquery namun harus disertakan dengan fungsi pada setiap kode yaitu event ready().
Pasti Anda bertanya-tanya pada sih event ready() tersebut? Dalam penyebutan event ready() ini sendiri ada juga yang menyebutnya document ready event. adapun saya lebih mudah menyebutnya dengan event ready(). Event ready() ini bertugas untuk melakukan simulasi efek dari event onload pada javascript tetapi lebih efisien. Adapun cara penulisan event ready() pada sebuah kode html sebagai berikut.
Tentu pada kode html di atas hampir sama dengan kode html yang saya tuliskan sebelumnya, perbedaanya terdapat pada pendeklarasian fungsi event yang terlihat di antara <script> dan </script>, yaitu $(document).ready(function(). Adapun fungsi $(document).ready(function() akan dijalankan setelah seluruh tag html dari <html> sampai dengan </html> selesai di load oleh web browser. Sebagai referensi untuk Anda, saya mencontohkan sebuah kode program yang difungsikan untuk memahami event ready() itu sendiri. Contoh tersebut sebagai berikut.
3. Peraturan Dasar Penulisan Kode jQuery
Setiap penulisan kode atau sintaks program ada peraturan yang mengatur cara penulisannya. Setiap penggunaan jquery, selalu didahului dengan tanda $ yang merupakan sebuah jalan pintas dalam pengaksesan jquery object. contohnya dalam pemanggilan id="submit" maka kita dapat menulis dengan cara pintas $("#tombol"). Penggunaan $ dapat pula digantikan dengan jquery() misalnya jquery("#tombol") ini digunakan untuk menghindari bentrok dengan library lain.
Untuk dapat melakukan sesuatu hal terhadapat element html, kita hanya perlu menghubungkan html dan jquery object dengan jquery action. jQuery action memiliki nama lain yaitu jquery event. adapun konsep dasar atau sintaks dasar dari jquery action adalah $(selector).action(). Selector digunakan untuk mencari element html yang akan kita manipulasi, bisa berupa tag <p>, sebuah gambar <img> atau sesuatu yang lebih kompleks seperti tag pada tabel seperti <th>, <tr>, <td>. Sementara action merupakan sesuatu yang bisa dilakukan dengan element html, baik menyembunyikan, mengubah warna, menampilkan ataupun menambahkan sesuatu yang baru. Adapun contoh penulisan kode jquery yang dapat saya contohkan untuk menggambarkan jquery object, selector, dan action sebagai berikut.
4. Mencari Elemen HTML dengan jQuery Selector
Di dalam jquery yang digunakan dalam javascript untuk mencari elemen di dalam html kita dapat menggunakan method atau procedure getElementById() yang berfungsi untuk mencari elemen html berdasarkan atribut id yang ada pada setiap field penginputan baik teks ataupun button. Untuk lebih memahami lagi mari kita lihat contoh.
Jika pada kode html dengan kode berikut <button id="tombol">Klik Disini"</button> untuk pengaksesan element pada jquery dapat dilakukan dengan var x = document.getElementById("tombol");
jQuery memudahkan proses dalam pencarian element html dengan menggunakan jquery selector. Adapun pengertian selector sudah kita bahas pada point 3. Selain atribut id, kita juga dapat menggunakan class atau kombinasi antara keduanya.
Adapun contoh penggunaan dari jquery selector agar lebih mudah untuk dipahami sebagai berikut.
Pada contoh di atas kita dapat mengubah menjadi bentuk jquery selector, yaitu.
- $("tombol")
- $("p")
- $("#belajar")
- $(".warna")
- $("#test.saja")
- $("div p.warna")
5. Mengenal lebih tentang jQuery Event dan Penggunaannya
Inti dari jquery adalah selector dan event, dengan menggabungkan kedua fungsi jquery ini maka interaksi pada laman web akan lebih menarik. Event merupakan suatu hal yang dapat dilkukan user ke dalam elemen yang ada pada html misalnya saja click, double click, atau mouseover, maupum mouseout. Kita misalkan saja ingin membuat pesan alert() ketika paragraf di kli dengan javascript yang dapat kita pahami pada kode berikut.
pada pesan alert() akan tampil jika paragraf di klik dan akan menampilkan pesan "Saya sudah Anda klik". Selain fungsi onclick kita juga dapat menggunakan fungsi lain misalnya ondblclick, onmouseover, dan masih banyak lagi.
Selanjutnya kita akan membahas tentang jquery event dengan penulisan yang lebih praktis. Berikut saya akan memberikan contoh penulisan jquery event di bawah ini.
Selain event click ada juga event lain yang dapat berjalan di antaranya mouseenter, mouseover, mouseleave. Sebagai pemahaman lebih mari kita lihat contoh dibawah agar mengerti tentang fungsi event pada jquery.
Bagaimana dengan tutorial yang saya berikan? Apakah Anda sudah memiliki bayangan dari pemahaman jquery dasar bagi pemula? Semoga bisa menambah pemahaman Anda.
Mungkin ini yang dapat saya sharing kepada Anda, semoga bermanfaat bagi kita semua. Tunggu tutorial selanjutnya.
