Selector merupakan salah satu kelebihan dari jQuery. Dalam jQuery ini kita menjumpai 3 selector utama yaitu
- Tag nama
- Class
- ID
Misal kita mempunyai file selector_1.html :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<link rel=”stylesheet” href=”selector1.css”>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
</head>
<body>
<h1>Psalm 23</h1>
<div class=”ayat” id=”pertama”>
The LORD is my shepherd, I lack nothing.
</div>
<div class=”ayat”>
He makes me lie down in green pastures,
he leads me beside quiet waters, </div>
<div class=”ayat”>
he refreshes my soul.
He guides me along the right paths
for his name`s sake. </div>
</body>
</html>
Kemudian file selector1.css dengan isi:
.daftar {
background: #00ff00;
}
.penting {
background: #ff80ff;
}
.biasa {
background: #dfded9;
}
Maka tampilannya dapat dilihat di http://aris.proweb.asia/selector_1.html seperti gambar berikut:
Jika kita tambahkan coding selector pada tag name body:
$(function() {
$(‘body’).addClass(‘biasa’);
});
Maka tampilannya dapat dilihat di http://aris.proweb.asia/selector_2.html seperti gambar berikut:
Kemudian jika kita tambahkan coding lagi pada class name ayat:
$(function() {
$(‘body’).addClass(‘biasa’);
$(‘.ayat’).addClass(‘daftar’);
});
Maka tampilannya dapat dilihat di http://aris.proweb.asia/selector_3.html seperti gambar berikut:
Jika kita tambahkan coding pada id pertama:
$(function() {
$(‘body’).addClass(‘biasa’);
$(‘.ayat’).addClass(‘daftar’);
$(‘#pertama’).addClass(‘penting’);
});
Maka tampilannya dapat dilihat di http://aris.proweb.asia/selector_4.html seperti gambar berikut:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.