Memahami Selectors

-
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 :
  1. Nama tag
  2. id
  3. 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 tag

Cara 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.


Edited From
harapan putra
Bagikan

No comments

Post a Comment