Rabu, 16 Maret 2011

JQuery : Memahami penggunaan class selector


Halo semua, kali ini saya ingin berbagi pemahaman tentang jquery class selector. Hm, sebenarnya saya tidak tau pasti kata yang tepat untuk class selector ini, tapi karena selector ini berdasarkan kepada class name di css, maka class selector menurut saya adalah istilah yang cukup tepat. :)

Ok, lanjut dengan contoh ya. Coba lihat kode berikut ini :



<html>

<head>

<style type=\'text/css\'>

.judul{

font-weight:bold;

}

</style>

</head>

<body>

Judul Buku <br>

<ul>

<li class=\'judul\'>Habis Gelap terbitlah terang</li>

<li class=\'judul\'>Salah Asuhan</li>

<li class=\'judul\'>Siti Nurbaya</li>

</ul>



</body>

</html>


Pada kode html diatas, tentu kita sudah mengerti bahwa setiap judul akan menjadi tebal/bold. Ini karena kita menggunakan css class yang kita beri nama judul.

Nah dalam jquery kita juga bisa menggunakan selector ini. Selector ini biasanya akan menghasilkan object lebih dari satu. Berikut ini adalah penanganannya. Misalkan kita akan menambahkan fungsi klik pada tiap - tiap judul tersebut.






<Script>

$(document).ready(function(){



//gunakan class selector

$(".judul").click(function(){

//this mengacu pada object yang terpilih

alert($(this).html());

});



});

</script>

Tidak ada komentar:

Posting Komentar

Isi Komentar / Pertanyaan