Memanipulasi Elemen HTML Menggunakan Selector JQuery

Pada tulisan saya sebelumnya, Mari Mengenal JQuery, kita telah berkenalan dengan JQuery. Sekarang, saya akan mencoba membahas bagaimana kita menggunakan JQuery untuk mengakses elemen pada dokumen HTML sehingga kita dapat memanipulasi elemen pada dokumen tersebut secara "on the fly". Seperti yang telah sedikit saya bahas pada Mari Mengenal JQuery, untuk mengakses elemen pada dokumen HTML, kita dapat menggunakan selector. JQuery menawarkan berbagai macam selector yang dapat langsung kita gunakan untuk mengakses elemen yang kita inginkan pada dokumen HTML. Secara umum, JQuery menyediakan dua pendekatan dalam mengakses elemen-elemen HTML. Pendekatan pertama menggunakan CSS dan selector XPath yang dikirimkan sebagai String kepada constructor JQuery (contoh: $("div.classname")). Pendekatan kedua adalah dengan menggunakan beberapa method dari objek JQuery. Sebagai contoh, saya akan mencoba menunjukkan bagaimana memodifikasi sebuah list menggunakan jQuery. Pertama-tama, jangan lupa melakukan include jQuery ke dalam dokumen html:

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

Kemudian agar script segera dieksekusi setelah dokumen selesai di-load, saya akan menggunakan script ready() seperti berikut berikut:

$(document).ready(function() {
//baris kode yang akan dieksekusi
});

Kemudian, misalnya saya ingin melakukan select terhadap elemen html yang memiliki id "unorderedList", saya dapat melakukannya dengan menuliskan kode $("#unorderedList") dan memasukkannya ke dalam script ready() di atas.

$(document).ready(function() {
$("#unorderedList").addClass("red");
});

script di atas akan melakukan select terhadap elemen dengan id "unorderedList" kemudian akan langsung menambahkan attribut class "red" ke dalam elemen tersebut. Kemudian saya akan mencoba melakukan select terhadap semua elemen anak li dari elemen yang memiliki id "unorderedList" dan menambahkan atttribut class "blue" seperti script di bawah ini.

$(document).ready(function() {
$("#unorderedList").addClass("red");
$("#unorderedList > li").addClass("blue");
});

Sekarang saya akan mendefinisikan stylesheet yang saya gunakan dalam contoh ini.

<style type="text/css">
 .blue { color: blue; }
 .red { color: red; }
</style>

Dan berikut ini adalah contoh isi dari body html yang saya gunakan.

<ul id="unorderedList">
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

Sekarang saya akan coba menambahkan efek hover, tapi saya ingin efek ini hanya berpengaruh pada elemen terakhir dari list yang saya buat. Caranya adalah dengan menambahkan script berikut ini ke dalam script ready() yang telah ada.

$("#unorderedList li:last").hover(function() {
  $(this).addClass("green");
},function(){
  $(this).removeClass("green");
});

penggunaan keyword "li:last" pada script tersebut akan membuat jQuery mengambil elemen li terakhir dari elemen yang memiliki id "unorderedList". fungsi .hover() memiliki dua parameter, yaitu .hover(handlerIn(eventObject), handlerOut(eventObject)), parameter pertama adalah handler ketika pointer "masuk" ke elemen tersebut, dan fungsi kedua adalah handler ketika pointer "keluar" dari elemen tersebut. Pada script di atas, ketika pointer menunjuk elemen li yang terakhir, jQuery akan menambahkan attribut class "green", sedangkan ketika pointer tidak menunjuk kepada elemen tersebut, jQuery akan menghilangkan attribut class "green" dari elemen tersebut. Jika script di atas hanya berpengaruh pada elemen anak terakhir dari elemen dengan id "unorderedList", maka sekarang sata mencoba untuk membuat script yang akan melakukan traversing untuk setiap elemen li, sehingga kita dapat memanipulasi setiap elemen li tersebut secara individual. Berikut adalah contoh script yang saya coba gunakan.

$("#unorderedList").find("li").each(function(index) {
 $(this).append( " " + index );
});

Script di atas saya tambahkan ke dalam fungsi ready() yang sudah ada. Fungsi .find() pada contoh tersebut akan melakukan pencarian elemen li yang merupakan anak dari elemen dengan id "unorderedList", dan fungsi .each() akan melakukan traversing pada setiap elemen li yang ditemukan. Untuk setiap elemen li yang ditemukan, akan ditambahkan index dari elemen tersebut ke dalam text dari elemen tersebut. Hasilnya adalah sebagai berikut:

• item
• item
• item
• item
• item
• item
• item

Berikut ini hasil kode lengkap untuk menghasilkan tampilan seperti di atas.

<html>
<head>
 <title>JQuery Dasar</title>
 <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script><script type="text/javascript">
 $(document).ready(function() {
  $("#unorderedList").addClass("red");
  $("#unorderedList > li").addClass("blue");
  $("#unorderedList li:last").hover(function() {
    $(this).addClass("green");
  },function(){
    $(this).removeClass("green");
  });
  $("#unorderedList").find("li").each(function(i) {
   $(this).append( " " + i );
  });
 });
</script>
<style type="text/css">
 .blue { color: blue; }
 .red { color: red; }
 .green { color: green; }
</style>
<body>
<ul id="unorderedList">
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>
</body>
</html>

Cukup mudah bukan?! Kita dapat melihat bagaimana penggunaan jQuery dapat memudahkan cara kita untuk memanipulasi dokumen html dibandingkan dengan menggunakan script biasa. Selamat mencoba... ^^