Belajar Jquery Yuk: Mengenal Selector Pada Jquery (Pemula Bag. 2)

Belajar Jquery Yuk: Mengenal Selector Pada Jquery (Pemula Bag. 2)


Baiklah, dipertemuan sebelumnya yakni tutorial Belajar JQuery Yuk? (Pemula Bag. 1) , saya telah memperkenalkan sedikit apa itu jquery dan bagaimana mengoperasikannya, meskipun terlihat agak membingungkan dan memusingkan pada awalnya bagi Anda yang pemula sekali di dunia web design.
Di sesi kali ini, kita akan coba kilas balik, dari mana jquery itu bermula. Yang mudah-mudahan membuka mata hati dan pikiran Anda, mengenai Jquery, dan bagaimana seorang web designer asik melakukan pekerjaannya menggunakan jquery.


Selector Pada JQuery
Apa yang membuat para webdesigner yakin menggunakan JQuery sebagai javascript library yang bisa menghandle kegiatan mereka ketika mendevelop halaman web? Padahal terdapat banyak sekali library jquery yang sama handalnya dengan jquery, sebut saja scriptaculous, atau mootools. Jawabannya karena jquery banyak diminati oleh para webdesigner karena supportnya lebih ramai dan dokumentasinya lebih lengkap ketimbang javascript library lainnya, dan ini sangat dibutuhkan sekali ketika Anda kesusahan menghadapi suatu permasalahan yang spesifik dalam ber-jquery ria.

Selector pada JQuery tidak berbeda halnya dengan selector pada CSS, namun ada sedikit tambahan, dan mendefinisikan selector itu sendiri, jika di css Anda ingin menambahkan style pada salah satu class element html, maka cukup bagi Anda untuk mendefinisikan stylenya dengan tanda . (titik) di tambahi dengan nama classnya
misal dibagian html :

<div class="widget">Ini adalah tempat widget</div>

 

maka dibagian cssnya :

.widget{
width:30%;
background:#fff;
}

 

Dan begitu halnya dengan jquery, silahkan dipersiapkan struktur html lengkap seperti di bawah ini :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
</head>
<body>

</body>
</html>

 

Simpan dengan nama jquerybag2.html letakkan difolder manapun, saya meletakkannya di D:\My Tutorial\JQUERY\bag2

Kemudian silahkan download terlebih dahulu library jquerynya di http://code.jquery.com/jquery-1.11.0.js lalu letakkan di direktori D:\My Tutorial\JQUERY\bag2. Setelah itu tambahkan dibagian head html tersebut dengan ...

...
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});
</script>
...

 

Di sana terdapat barisan kode $(document).ready(function(){ }); yang artinya kurang lebih adalah, jika halamannya sudah diload semua maka jquery sudah bisa digunakan, Anda bisa memasukkan perintah apapun di tengah-tengah tanda kurung kurawal.
Misalnya, kita akan memasukkan selector untuk element body, kita berikan perintah agar background halaman website tersebut berubah menjadi biru, berarti kita manfaatkan selector tag. Seperti ini :

<script type="text/javascript">
$(document).ready(function(){
$('body').css('background', 'blue');
});
</script>

 

Perhatikan

$('body').css('background', 'blue');

Ini berarti Anda memberikan warna background biru menggunakan fitur css yang ada di jquery, digunakan kepada selector tag body. Begitu halnya jika Anda ingin memberikan perintah kepada element berdasarkan selector id maka penggunaannya adalah seperti ini

$('#namaID').fiturjquery();

begitu juga jika Anda ingin memberikan perintah kepada selector class, maka penggunaannya

$('.namaclass).fiturjquery();

 

Seperti inilah contoh lengkapnya penggunaan selector

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('body').css('background', 'blue');
		$('.box1').css('width', '100%').css('background','#fff');
		$('#head1').css('color', 'lightblue');
	});
</script>
</head>
<body>
	<div class="box1">
		<h1 id="head1">Ini Cuma Contoh</h1>
	</div>
</body>
</html>

 

Silahkan di simpan ke dalam file jquerybag2.html , dan buka dengan browser Anda, bagaimana hasilnya?

Artikel Terkait :