Memahami Konsep Dasar Penggunaan JQuery

Yenda Purbadian  Selasa, 05 September 2017  JQuery & Ajax  182 0
no images

Mungkin dari sebagian para pembaca sudah tahu apa itu JQuery. Namun bagi yang belum tahu apa itu JQuery atau yang hanya mendengar JQuery tapi tidak tahu fungsinya apa, penulis akan beri tahu disini. JQuery adalah salah satu pustaka yang dikembangkan dengan menggunakan javascript. JQuery merupakan library (kumpulan fungsi) javascript siap pakai. Dengan menggunakan JQuery, penulisan kode dari javascript menjadi lebih singkat (kodenya menjadi ringkas) daripada menggunakan javascript murni. Tentu saja dengan hadirnya JQuery mempercepat para developer web dalam membuat kode javascript, karena sesuai dengan slogan dari JQuery itu sendiri yaitu “write less, do more” yang artinya, cukup tulis sedikit tapi bisa melakukan banyak hal. Selain itu, dengan JQuery pembuatan halaman web menjadi lebih interaktif dan menarik karena animasi-animasi yang ditawarkan oleh JQuery. Beberapa kemampuan yang ditawarkan oleh JQuery, diantaranya adalah :

  1. Menyembunyikan atau menampilkan elemen pada halaman web
  2. Menambah atau menghapus elemen pada halaman web
  3. Melakukan animasi pada halaman web, misalnya menggerakan gambar
  4. Mampu melakukan interaksi dengan ajax dan mempersingkat penulisan kode Ajax

Selain itu, JQuery juga mendukung penambahan plugin yang membuat kemampuan JQuery bertambah pesat.

Sejak dirilis pertama kali pada tahun 2006 oleh John Resig, JQuery telah mencuri banyak perhatian para developer web, buktinya banyak website-website terkemuka telah menggunakan JQuery seperti Google, Facebook, Twitter, Microsoft, Youtube, Wordpress, dan termasuk website lokal seperti Kompas, Vivanews, Detik, dan masih banyak lagi.

 

Bagaimana Cara Menggunakan JQuery??..

Bagaimana cara menggunakan JQuery??.. Mungkin itu pertanyaan bagi Anda yang belum tahu JQuery. Oke!! Pertama-tama silahkan Anda download library JQuery pada situs resminya di http://jquery.com, silahkan pilih versi JQuery yang diinginkan.

O iya.. JQuery selalu merilis 2 versi untuk library-nya, yaitu Production dan Development. Perbedaannya hanya dalam ukuran file saja, karena versi production diperuntukan bagi Anda yang langsung ingin menggunakan JQuery, sehingga versi production ini kodenya SULIT KUPAHAMI untuk dibaca. Hee..  Maksudnya adalah pada file versi production ini seperti sudah di kompres sehingga kodenya sulit untuk dibaca, namun demikian versi production ini sangat cocok untuk kepentingan produksi. Sementara isi file dari versi development kodenya mudah dibaca, karena versi ini diperuntukan bagi developer yang tertarik mempelajari atau memanipulasi fungsi-fungsi yang sudah diterapkan didalam file versi development tersebut.

Terlebih dahulu Anda buat 1 buah file baru dengan nama lat_jquery.html, selanjutnya perhatikan potongan script program dibawah ini :

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#info").text("Selamat!! JQuery sudah bekerja");
});
</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

Ketika program dijalankan maka pada browser akan tampil tulisan "Selamat!! JQuery sudah bekerja", artinya Anda berhasil menjalankan fungsi dari JQuery..

Untuk penjelasan script program-nya berikut Penulis paparkan pada poin-point dibawah ini :

  • Pada baris ke 4 digunakan untuk menyertakan library JQuery
  • Pada baris ke 6 menyatakan bahwa apabila dokumen sudah siap, maka jalankan perintah selanjutnya. Perintah selanjutnya dalam hal ini adalah sebuah perintah yang berada pada sebuah fungsi (function) yang berada dalam tanda ( ) sesudah kata ready
  • Pada baris ke 7 membuat suatu selektor pada kode JQuery, dalam hal ini berupa selektor id bernama info ("#info"). Maka bunyi perintahnya adalah isi semua elemen yang berada pada id info dengan “Selamat!! JQuery sudah bekerja”. Dalam hal ini methode text-lah (.text) yang melakukan perubahan-perubahan dari isi elemen id info.
  • Pada baris ke 12 digunakan untuk menerapkan selektor id info yang telah dibuat sebelumnya pada kode JQuery. Dalam hal ini penerapan selektor id info melalui elemen div (<div id="info"></div>). Nah disinilah kata-kata “Selamat!! JQuery sudah bekerja” akan ditampilkan pada halaman web.

Dari implementasi serta penjelasan script program diatas, dapat disimpulkan bahwa untuk menggunakan JQuery kita hanya memerlukan 3 langkah saja, diantarnya adalah :

  1. Sertakan atau sisipkan library JQuery. Contohnya dapat dilihat dibawah ini :

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

  1. Buat sebuah selektor (bisa berupa id atau class) pada kode JQuery yang bertujuan untuk mengontrol objek pada suatu elemen milik HTML. Contohnya dapat dilihat dibawah ini :

$("#info").text("Selamat!! JQuery sudah bekerja");

  1. Terapkan selektor yang telah dibuat oleh JQuery pada elemen HTML.   

<div id="info"></div>

Bagaimana??.. Mudah bukan menggunakan JQuery??.. Hee..

Oke!! Penulis cukupkan sampai disini, apabila ada yang kurang paham pada penjelasan penulis silahkan isi form dibawah ini. Sampai berjumpa lagi pada tutorial berikutnya.

Terima kasih..

Artikel Terkait :

Tidak ada artikel terkait

Komentar :

Tinggalkan Komentar :