Selectors berfungsi untuk memilih/mengambil elem-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulasi terhadap elemen-elemen tersebut.
Adapun elemen-elemen dasar yang dapat dipilih oleh selectors adalah sebagai berikut :
- Nama tag
- id
- class
Untuk mengetahui bagaimana cara Selectors dalam memilih elemen-elemen tersebut, penulis akan sajikan beberapa contoh sederhana pada sub/artikel berikutnya sehingga mempermudah anda dalam memahami Selectors.
Selectors tagCara menggunakan Selectors tag adalah dengan
langsung menyebut nama tag/elemenya --> $("div"). Untuk lebih jelasnya, perhatikan skrip
selector_tag.html pada gambar di bawah ini.
<html> <head> <script type="text/javascript" src="jquery-1.5.js"></script><script type="text/javascript"> $(document).ready(function(){ $("div").addClass("merah") });</script><style type="text/css">.merah { color: red; font-weight: bold;}</style> </head> <body> <div> <p>Paragraf pertama.</p></div> <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
</div> </body></html>
 |
| skrip selector_tag.html |
Penjelasan skrip selector_tag.html :
Semua tag dengan nama div akan terpilih oleh Selectors, kemudian diberikan operasi "merah" terhadap elemen terpilih tersebut (operasi "merah" mengacu pada style yang telah kita definisikan di bagian head, yaitu .merah), sehingga semua teks akan berwarna merah dan tebal.
Dalam contoh berikutnya, kita juga bisa
memilih tag yang berada didalam tag, misalnya didalam tag
div terdapat tag
p. Untuk lebih jelasnya, perhatikan contohskrip
selectors_tag2.html di bawah ini
<html>
<head>
<script type="text/javascript" src="jquery-1.5.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").addClass("merah")
});
</script>
<style type="text/css">
.merah {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>Paragraf pertama.</p>
</div>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
Apabila skrip
selector_tag2.html dijalankan di browser, maka
hanya Paragraf pertama saja yang berwarna merah dan tebal. Sedangkan Item 1. Item 2, dan Item 3 tetap normal berwarna hitam dan tidak tebal.
Tulisan Terkait