JQUERY

JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan Write less, do more yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentukplugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet. Apa yang bisa dilakukan dengan JQuery? 1. Mengakses bagian halaman tertentu dengan mudah. Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

2. Mengubah tampilan bagian halaman tertentu. CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk

mengatasi hal tersebut. Dengan JQuery, kesenjangan yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik. 3. Mengubah isi dari halaman. Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah. 4. Merespond interaksi user dalam halaman. Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah. 5. Menambahkan animasi ke halaman. Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan. 6. Mengambil informasi dari server tanpa me-refresh seluruh halaman. Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanyaAJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya. 7. Menyederhanakan penulisan Javascript biasa. Semboyan JQuery adalah Write less, do more atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.

Download JQuery Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minified danuncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery. Contoh Penggunaan JQUERY 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Dasar JQUERY Kalau kita tengok di website resminya jQuery pada bagian dokumentasi (http:// docs.jquery.com/), maka ada sebelas hal yang harus di pelajari untuk menguasai jQuery atau dikenal dengan sebutan jQuery API (Application Progamming Interface), diantaranya: 1. jQueryCore 2. Selectors 3. Attributes 4. Traversing 5. Manipulation 6. CSS 7. Events 8. Effects 9. Ajax 10. Plugin/jQuery UI (User Interface) 11. Utilities <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> </body> </html>

Namun, sebagai fondasi awal dalam mempelajari jQuery), saya di jabarkan tiga hal yang paling mendasar saja, yaitu Selectors, Events, dan Effects. Filosofi Pemrograman jQuery Sebelum masuk ke pembahasan dasar-dasar jQuery, ada baiknya kita mengetahui dasar dari filosofi jQuery, karena secara keseluruhan pemrograman jQuery nantinya akan mengacu pada filosofi dasarnya yang dapat dilihat pada gambar 1.

Gambar 1 Filosofi pemrograman jQuery

Pada umumnya, perintah jQuery digantikan dengan tanda dolar ($) yang merupakan simbol resmi dari fungsi jQuery, sehingga sering dituliskan seperti pada gambar 2.

Gambar 2 Filosofi pemrograman jQuery 2 Intinya, fungsi jQuery akan mencari suatu elemen tertentu yang telah didefinisikan di bagian body, kemudian melakukan sesuatu terhadap elemen tersebut, itulah filosofi dasar dari jQuery.

jQUery mempunyai fungsi-fungsi yang tergabung dalam kelompok Class yang berguna untuk menambahkan dan menghapus atribut Class beserta nilainya pada suatu elemen. Ada tiga fungsi yang termasuk dalam kelompok class, yaitu : addClass("nama_class") : menambahkan Class pada elemen yang dipilih

removeClass("nama_class") : menghapus Class pada elemen yang dipilih toggleClass("nama_Class") : menambahkan Class pada suatu elemen apabila pada elemen tersebut belum digunakan Class, namun apabila pada elemen tersebut telah menggunakan class, maka class pada elemen tersebut akan dihapus

Sintaks jQuery Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Sintaks : $(selector),action() Tanda dollar, untuk mendefinisikan jQuery (selector), untuk menunjukkan elemen yang dipilih atau dituju action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih. Contoh :

$ (this) .hide () - menyembunyikan elemen saat ini $ ("p") . hide () - menyembunyikan semua paragraf atau konten dari tag <p> $ (". test") . hide () menyembunyikan elemen yang mempunya class="test" $ ("#test") . show () - menampilkan elemen yang mempunyai id="test" Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen. $(document).ready(function(){ //kode anda di sini }); Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini : window.onload = function(){ //kode anda di sini } Sekarang mari kita lihat pada contoh Kode 12. $(".tombol1").click(function(){ $("p").hide(10 0 0); });

Kode $(". tombol1") adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class="tombol1" untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $ () untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click (). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class='tombol1'). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class="tombol1" diklik maka lakukan fungsi $ ("p") . hide (10 0 0) ; Fungsi hide () dan show() adalah fungsi built in dari jQuery, nanti akan kita lihat lebih lanjut fungsi-fungsi built in dari jQuery.

jQuery Selectors Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara memilih elemen HTML menggunakan jQuery. jQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal.

jQuery Element Selectors jQuery mirip CSS dalam hal memilih elemen HTML. $("p") memilih semua elemen <p> $ ("p.intro") memilih semua elemen <p> yang mempunyai class="intro". $ ("p#demo") memilih elemen <p> yang mempunyai id="demo". jQuery Attribute Selectors jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada. $ (" [href] ") memilih semua elemen dengan atribut href. $ (" [href= '#']") memilih semua elemen dengan atribut href bernilai="#". $("[href! = '#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". $ (" [href$=' . jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".

jQuery Events Salah satu kemampuan utama jquery adalah menangani event. Dalam pemograman jquery, biasanya kode-kode pemograman diletakkan di dalam penanganan event yang terjadi pada suatu atau kelompok elemen yang dipilih. Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan, pada contoh jquery sebelumnya : $(".tomboll").click(function(){ $("p").hide(10 0 0); }); Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai class='tombol1', maka lakukan fungsi hide() terhadap semua element <p>. Berikut daftar event-event yang dapat terjadi dari elemen HTML. Event function : $(document).ready(function) $(selector).blur(function) $(selector).change(function)

Efek-Efek dengan jQuery Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi $ (selector) . fadein () Berikut adalah efek-efek siap pakai yang disediakan oleh jquery. jQuery show() Effect Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang tersembunyi melalui CSS adalah display:none (bukan visibility:hidden). Sintaks : $(selector).show(speed,callback)

Parameter speed

Deskripsi Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: milliseconds (contoh : 1500) "slow" "normal" "fast"

callback

Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan.

Contoh : Contoh show() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script $(document).ready(function(){ $(".tombol1").click(function(){ $("p").show(1000,tampilkanAlert); }); }); function tampilkanAlert(){ alert("Paragraf sekarang muncul"); } </script> </head> <body> <p style="display:none">Ini adalah paragraph tersembunyi.</p> <button class="tombol1">Show</button> </body> </html>

type="text/j

avascript">

jQuery hide() Effect Berfungsi untuk menyembunyikan elemen yang dipilih. Sintaks : $(selector),hide(speed,callback) Untuk parameter speed dan callback adalah sama dengan show() effect. Contoh : $(".tomboll").click(function(){ $("p").hide(); } ) ;

jQuery toggle() Effect Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi, menyembunyikan yang tampak. Sintaks : $(selector).toggle(speed,callback,switch)

Contoh :
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/j avascript"> $(document).ready(function(){ $(".tombol1") .click(function () { $("p").toggle(true); } ) ; } ) ; </script> </head> <body> <p>Ini adalah paragraf</p> <p style="display:none">Ini adalah paragraf lainnya yang belum muncul</p> <p>Jika bernilai true hanya berfungsi menampilkan, kalau false hanya menyembunyikan</p> <button class="tombol1">Tampilkan semua elemen</button> </body> </html>

jQuery slideDown() Effect Menampilkan elemen yang tersembunyi, secara efek sliding. Sintaks : $(selector).slideDown(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:

$(".tombol1").click(function(){ $("p").slideDown(); } ) ; jQuery slideUp() Effect Menyembunyikan elemen secara efek sliding. Sintaks : $(selector).slideUp(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: $(".tombol1").click(function(){ $("p").slideUp(); }); jQuery slideToggle() Effect Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika dalam keadaan visible, menampilkan elemen jika dalam kedaan hidden. Sintaks : $(selector).slideToggle(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/j avascript"> $(document).ready(function(){ $("#contact").click(function(){ $("#contact-box").slideToggle("slow"); }); }); </script> </head> <body>

<p><span id="contact" style="cursor:hand;backgroundcolor:#ababab;padding:3;font-family:Verdana">Contact</span></p> <div id="contact-box" style="background:#9 8bf21;height:2 0 0px;width:30 0px;position:relative;disp lay:none;padding:10"> <form> Nama : <input type=text><p> Email : <input type=text><p> Komentar :<textarea rows=5></textarea><p> <input type=submit value=kirim> </div> <p> jQuery adalah javascript library, jQuery mempunyai semboyan "write less, do more". jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis j avascript. <p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. </body> </html>

jQuery fadeIn() Effect Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar. Sintaks : $(selector).fadeIn(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: $(".tombol1").click(function(){ $("p"). fadeIn(); } ) ; jQuery fadeOut() Effect

Menyembunyikan elemen yang dipilih, secara efek memudar. Sintaks : $(selector).fadeOut(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: <html> <head> <style> #box { background-color:#96BC43; border:solid 3px #333333; height:160px; margin-top:3 0px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/j avascript"> $(function(){ $('.fadeOut_box') .click(function () { $('#box').fadeOut("slow"); }); $('.fadeIn_box').click(function(){ $('#box').fadeIn("slow"); }); }); </script> <body> <a href="#" class="fadeOut_box">fadeOut()</a> <a href="#" class="fadeIn_box">fadeIn()</a> <div id="box"></div> </body> </html>

JQuery fadeTo() Effect Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. Sintaks : $(selector).fadeTo(speed,opacity,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Untuk parameter opacity bisa bernilai 0 sampai 1. Contoh : $(".tombol1").click(function(){ $("p"). fadeTo(10 0 0,0.6); } ) ;