Menyeleksi Elemen dengan jQuery Selector

JavaScript paling sering digunakan untuk mendapatkan atau memodifikasi konten atau nilai pada elemen HTML serta untuk menerapkan beberapa efek seperti Menampilkan, Menyembunyikan, menambahkan animasi, dll. Tetapi, sebelum kalian dapat melakukan suatu tindakan, kalian perlu menemukan atau memilih elemen target.

Memilih elemen melalui JavaScript biasa bisa sangat menyulitkan, tetapi jQuery dapat mengatasinya dengan mudah. Kemampuan dalam membuat pemilihan elemen DOM yang sederhana dan mudah adalah salah satu fitur terbaik dari jQuery.

Tips: jQuery mendukung hampir semua Selector yang ditentukan dalam spesifikasi CSS3 dan juga memiliki Selector Custom nya sendiri. Selector Custom tersebut dapat meningkatkan kemampuan untuk memilih/menyeleksi elemen HTML.

Di bagian ini, kalian akan melihat beberapa cara yang paling umum untuk memilih elemen HTML dan melakukan suatu hal kedalamnya dengan menggunakan jQuery.


Memilih Elemen berdasarkan ID

Kalian dapat menggunakan Selector ID untuk memilih elemen tunggal yang memiliki ID unik pada halaman HTML.

Misalnya, kode jQuery berikut akan memilih elemen yang memiliki atribut ID id="yasya" ketika dokumen siap untuk dimanipulasi:

<script>
    $(document).ready(function(){
        // Menyeleksi elemen yang memiliki id="yasya"
        $("#yasya").css("background", "yellow");
    })
</script>

Lihat kode di Github | Lihat Live Demo

Pada contoh kode di atas, $(document).ready() adalah Event yang digunakan untuk memanipulasi halaman dengan aman pada jQuery. Kode yang ada di dalam Event tersebut hanya akan berjalan setelah halaman DOM sudah siap. Kita akan belajar lebih banyak tentang Event pada bagian selanjutnya.

Memilih Elemen berdasarkan Nama Class

Class Selector dapat kita digunakan untuk memilih elemen berdasarkan Class tertentu.

Misalnya, kode jQuery berikut akan memilih  elemen yang memiliki atribut class class="yasya" ketika dokumen sudah siap:

<script>
    $(document).ready(function(){
        // Menyeleksi elemen yang memiliki class="yasya"
        $(".yasya").css("background", "yellow");
    })
</script>

Lihat kode di Github | Lihat Live Demo

Memilih Elemen berdasarkan Nama Elemen

Element Selector dapat digunakan untuk memilih elemen berdasarkan nama dari elemen HTML itu sendiri.

Sebagai contoh, kode jQuery berikut akan memilih semua paragraf yaitu elemen <p> ketika dokumen HTML sudah siap sepenuhnya:

<script>
    $(document).ready(function(){
        // Menyeleksi semua elemen p (paragraf)
        $("p").css("background", "yellow");
    })
</script>

Lihat kode di Github | Lihat Live Demo

Menyeleksi Elemen berdasarkan Nama Atribut

Kalian dapat menggunakan Atribute Selector untuk memilih elemen dengan salah satu atribut HTML yang ada di dalamnya seperti atribut href, type, dll.

Sebagai contoh, kode jQuery berikut akan memilih semua input yaitu elemen <input> yang memiliki atribut type="text" ketika dokumen sudah siap:

<script>
    $(document).ready(function(){
        // Menyeleksi semua elemen input yang memiliki atribut type="text"
        $('input[type="text"]').css("background", "yellow");
    })
</script>

Lihat kode di Github | Lihat Live Demo

Memilih Elemen berdasarkan Kombinasi CSS Selector

Kalian juga dapat menggabungkan CSS Selector agar dapat membuat elemen yang dipilih menjadi semakin tepat.

Misalnya, kalian bisa menggabungkan Selector Class dengan Element Selector untuk menemukan elemen yang ada di dalam dokumen yang memiliki tipe dan kelas tertentu.

<script>
    $(document).ready(function(){
        // Hanya menyeleksi elemen paragraf yang memiliki class yasya
        $("p.yasya").css("background", "yellow");

        // Hanya menyeleksi elemen span didalam elemen yang memiliki ID yasya
        $("#yasya span").css("background", "red");

        // Menyeleksi elemen li didalam elemen ul
        $("ul li").css("background", "green");

        // Menyeleksi elemen li saja didalam elemen ul yang memiliki ID yasya
        $("ul#yasya li").css("background", "blue");

        // Menyeleksi elemen li didalam semua elemen ul yang memiliki class yasya
        $("ul.yasya li").css("background", "orange");

        // Menyeleksi semua elemen anchor yang memiliki target blank
        $('a[target="_blank"]').css("background", "yellow");
    })
</script>

Lihat kode di Github | Lihat Live Demo

Selector Custom pada jQuery

Selain Selector berdasarkan CSS, jQuery juga menyediakan Selector Customnya sendiri agar dapat digunakan untuk meningkatkan kemampuan dalam memilih elemen pada suatu halaman HTML.

<script>
    $(document).ready(function(){
        // Menyeleksi tabel row yang muncul pada lokasi ganjil
        $("tr:odd").css("background", "yellow");

        // Menyeleksi tabel row yang muncul pada lokasi genap
        $("tr:even").css("background", "orange");

        // Menyeleksi elemen paragraf pertama
        $("p:first").css("background", "red");

        // Menyeleksi elemen paragraf terakhir
        $("p:last").css("background", "green");

        // Menyeleksi semua elemen input yang memiliki type text didalam form
        $("form :text").css("background", "purple");

        // Menyeleksi semua elemen input yang memiliki type password didalam form
        $("form :password").css("background", "blue");

        // Menyeleksi semua elemen input yang memiliki type submit didalam form
        $("form :submit").css("background", "violet");
    })
</script>

Lihat kode di Github | Lihat Live Demo

0 Komentar