Memulai jQuery

jQuery ?

Apa itu jQuery? Dari situsnya “jQuery adalah sejenis pustaka JavaScript yang baru. jQuery adalah pustaka JavaScript yang cepat dan ringkas yang menyederhanakan traversing dokumen HTML, penanganan event, animasi, dan interaksi Ajax untuk mempercepat pengembangan web”. Mari kita liat contoh sederhana penggunaan jQuery:

Klik di sini untuk menimbulkan atau menyembunyikan

1
2
3
4
5

$(document).ready( function() {
    $("#toggle-hidden-div").click( function() {
        $("#hidden-div").slideToggle('slow');
    });
});

Heh, cukup sederhana bukan untuk membuat efek pada DOM? Untuk memudahkan penggunaan jQuery, ada baiknya Anda mengenal sedikit tentang DOM (Document Object Model), CSS (Cascading Style Sheets) dan JavaScript. Persiapan lainnya dalah jquery.js. Anda bisa mengunduh jQuery di sini. Ada dua format yang bisa diunduh, yaitu: terkompresi (ukuran lebih kecil) dan tidak terkompresi (baik untuk debugging dan mengetahui sulap di balik jQuery). Jika sudah mengunduhnya, pastikan jquery dimasukkan ke dalam dokumen HTML Anda:

1
2
3
4

<script src="http://gedex.web.id/wp-content/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    // kode ditulis di sini nantinya
</script>

Sesuaikan path src nya dengan direktori jquery.js berada. Kebanyakan apa yang kita kerjakan dengan jQuery adalah membaca dan memanipulasi DOM, jadi sebelum kita bermain DOM dengan jQuery pastikan DOM sudah diload. jQuery menyediakan fungsi $(document).ready() dimana semua fungsi yang kita definisikan di dalamnya akan segera di load setelah DOM di load dan sebelum konten (gambar, text, dsb) di load. Dengan memanfaatkan fungsi ini kita bisa memisahkan behavior (JavaScript) dari “struktur” (HTML). Lebih jelasnya perhatikan kode JavaScript berikut:

1
2
3
4
5
6
7
8

<script src="http://gedex.web.id/wp-content/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
    $("#toggle-hidden-div").click( function() {
        $("#hidden-div").slideToggle('slow');
    });
});
</script>

Bagian dari HTML yang dirujuk adalah:

1
2
3
4

<a id="toggle-hidden-div" href="#toggle-hidden-div">Klik di sini untuk menimbulkan atau menyembunyikan</a>
<div id="hidden-div" style="display: none">
Konten dalam div
</div>

Dengan fungsi $(document).ready() saya telah memisahkan behavior dan struktur, karena saya tidak perlu meng-attach event onclick pada element a dengan id toggle-hidden-div (baris 1). Dengan jQuery, element pada dokumen dapat kita daftarkan event tanpa perlu menuliskannya di struktur (HTML). Contoh lainnya:

1
2
3

$(document).ready(function() {
$("#attach-event a").mouseover(function() {$(this).css({backgroundColor: "black", fontWeight: "bold"; color: "white"});}).mouseout(function() {$(this).css({backgroundColor: "#EAF3FA", fontWeight: "normal", color: "black"});});
});

Contoh di atas sejauh ini adalah menunggu DOM di load, mendapatkan element melalui selector (akan saya bahas setelah ini), mendaftarkan penangan event ke element tersebut kemudian saat event terjadi penangan akan beraksi (entah memberikan effect, memanipulasi style atau mendapatkan nilai atribut dari element). jQuery menyediakan fungsi untuk penanganan event seperti click(), mouseover(), mouseout(), submit(), change(), dsb. Semua fungsi tersebut dapat dibaca di referensi API jQuery khusus Event.

Selector

Untuk mendapatkan element dalam DOM, jQuery menyediakan beragam selector. Yang sering digunakan adalah CSS dan XPath Selector. Contoh:
Text pada button. Klik!!
Kodenya:

$("#alert-toggle-anchor").click(function(){alert($(this).text()};);

Dengan penulisan kode JavaScript biasa, mendapatkan element dengan id alert-toggle-anchor document.getElementById("alert-toggle-anchor"), dengan jQuery menjadi $("#alert-toggle-anchor"). String berupa id element merupakan parameter bagi konstruktor class jQuery. Jadi untuk menginisialisasi objek jQuery adalah dengan $(params) dimana params adalah string yang umumnya merupakan nama element, class atau id dari element di DOM. Tanda $ dalam JavaScript adalah karakter yang legal dan valid untuk identifier, jQuery menggunakannya sebagai alias dari class jQuery. Jadi $(“table”) dan jQuery(“table”) akan melakukan hal yang sama. Dengan objek jQuery, element dalam DOM bisa kita manipulasi dengan method / fungsi yang tersedia dari objek jQuery, seperti click() untuk mendaftarkan event, slideToggle() untuk memberikan efek pada element terserbut, atau text() untuk mendapatkan text di dalam element. Contoh selector lainnya:

• $(“#nama-id-element”)
  Misal untuk mendapatkan element dengan id alert-toggle-anchor dan memberinya warna text putih dan latar hitam:
  $("#alert-toggle-anchor").css({color: "white", backgroundColor: "black"});
• $(“.nama-class-element”)
  Misal untuk mendapatkan element dengan nama class hideMe dan menyembunyikan element tersebut $(".hideMe").hide();
• $(“nama-element)
  Misal untuk mendapatkan semua element p dan memberinya class yellow: $("p").addClass("yellow");
• $(“elementF > childElementF:first-child”)
  Misal untuk mendapatkan semua element span yang merupakan anak pertama dari element p dan memberinya class biru: $("p > span:first-child").addClass("biru");
• $(“input[@name=nama_element]“)
  Misal untuk mendapatkan element input dengan name “username” dan memperoleh value-nya. $("input[@name=username]").val();
• $(“element_name:odd”)
  Selector di atas akan mengambil element ganjil dari target element_name. Metode ini sering digunakan pada element list dan table. Misal kita ingin memberikan class alt ke tr ganjil dari table dengan class mytable $("table.mytable tr:odd").addClass("alt");

Ragam selector lainnya dapat dilihat di API jQuery untuk Selector.

Menjelajah DOM

Selain selector dengan CSS, XPath, dan kustom lainnya, jQuery juga menyediakan fungsi-fungsi untuk menjelajahi DOM (traversing) seperti:

1
2
3

$("tr").css({border: "1px solid #000"}).filter(".alt").each(function(i){
    $(this).append("yeah " + i);
});

Pertama, cari semua tr, lalu beri border hitam setebal 1 pixel, dari semua tr tersebut ambil yang hanya memiliki class alt (filter). Dari tr yang sudah difilter, masing-masing (each) tambahkan text “yeah ” + i, dimana i merupakan index (dimulai dari 0) dari hasil tr yang sudah difilter. Contoh lainnya, misal unordered list :

1
2
3
4
5
6

<ul id="list">
    <li>item ke-1</li>
    <li>item ke-2</li>
    <li>item ke-3</li>
    <li>item ke-4</li>
</ul>

Kita ingin membuat list ganjil dapat diklik dan jika diklik akan menampilkan list dibawahnya, yang sebelumnya sudah dihide. Kodenya:

1

$("#list").find("li:even").hide().end().find("li:odd").click(function(){$(this).next().slideToggle();});

Kode bisa dipersingkat dengan cara chaining, dimana objek jQuery hanya memilih satu kali element dengan id list. Dengan metode chaining ukuran kode menjadi lebih kecil dibanding dengan kode berikut yang kurang lebih sama:

1
2

$("#list").find("li:even").hide();
$("#list").find("li:odd").click(function(){$(this).next().slideToggle();});

Yang pertama dilakukan adalah mendapatkan element dengan id list, lalu cari anak element li yang genap, sembunyikan element genap tersebut. Hal serupa bisa dilakukan dengan $("#list li:even").hide(), tapi dengan fungsi end() penulisan kode menjadi lebih singkat dan baik. Dengan end() kita mundur ke state element terpilih sebelumnya, yaitu element dengan id list. Lalu dilanjutkan lagi dengan mencari anak element li ganjil dan mendaftarkan penangan event onclick, dimana element list berikutnya (next()) akan diberi efek slideToggle saat element li ganjil ini di click.

Dokumentasi API DOM Traversing bisa dibaca di sini.

Atribut dan Manipulasi DOM

Selain menyediakan fungsi untuk mendapatkan element dalam DOM, jQuery juga menyediakan fungsi-fungsi untuk mendapatkan atribut dari element. Misal:

1

$("#mybutton").click(function(){alert("type="+$("input[@name=myinputtxt]").attr("type")+"\nvalue="+$("input[@name=myinputtxt]").val());});

Untuk mendapatkan nilai atribut element gunakan fungsi attr(). Fungsi ini juga bisa untuk menset nilai atribut dan membuang atribut dari element. Selain atribut element, jQuery juga menyediakan fungsi untuk memanipulasi class dari element, seperti: addClass(), hasClass(), removeClass dan toggleClass(). Contoh lainnya, yaitu mengubah konten div berikut:

yeah!!
Untuk mengganti konten dalam div tersebut kita bisa menggunakan fungsi html() untuk memanipulasi element dalam DOM.

1
2
3
4
5

$(function(){
    $("#lorem-ipsum-button").click(function(){
        $("#lorem-ipsum-div").html("hell yeah..<br /><strong>jQuery</strong> rocks!!");
    });
});

Serupa dengan method innerHTML, method html(value) akan mengisi konten dari elemen dengan value. Ada juga method text(value) yang mengisi konten dari elemen dengan value, namun HTML diescape sehingga “<" dan ">” diganti dengan HTML entiti. Contoh manipulasi lainnya adalah append(). Misal:

<div id="mydiv"><p>dalam sebuah paragraf</p></div>

Dengan menggunakan append()

$("#mydiv").append("<p>paragraf ke-2</p>")

maka menjadi:

<div id="mydiv"><p>dalam sebuah paragraf</p><p>paragraf ke-2</p></div>

Banyak manipulasi untuk menyisipkan konten ke dalam element seperti : append(), appendTo, prepend(), prependTo(). Selain menyisipkan konten ke dalam, jQuery juga menyediakan fungsi untuk menyisipkan ke luar setelah/sebelum element, menyalin, mengganti dan menghapus element. Lebih lengkapnya ada di dokumentasi jQuery.

Membuat Element On The Fly

Dengan javascript kita dapat membuat element kemudian menyisipkannya ke element lain dengan cara berikut:

1
2
3
4

var el = document.getElementById(id_element);
var new_el = document.createElement("div");
new_el.appendChild(document.createTextNode("konten dalam div baru"));
el.appendChild(new_el);

Dengan jQuery:

1

$("<div>konten dalam div baru</div>").appendTo("#id_element");

Semoga bermanfaat.

Referensi:

• jQuery Documentation
• http://docs.jquery.com/Tutorials