Memahami Selector jQuery


belajar jquery

SeniKoding.com - Selector jQuery adalah script yang digunakan untuk memilih suatu elemen HTML yang akan dimanipulasi dengan jQuery.
Selector jQuery ditulis didalam kurung setelah tanda dolar ($).

Belajar JQuery: Selector jQuery


Format penulisan Selector jQuery adalah sebagai berikut:
$('selector')

Contoh penulisan selector jQuery didalam program:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("p").css({"background-color": "yellow", "font-size": "200%"});
            });
        </script>
    </head>
    <body>
        <p style="background-color:red;"> Belajar JQUERY bersama www.SeniKoding.com</p>
    </body>
</html>

Hasil browser, latihan selector jquery:

selector jquery

Penjelasan:

- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> : adalah file jquery yang harus dipanggil/load terlebih dahulu.
- $("p") : merupakan selector jquery dengan tag <p>.
- .css({"background-color": "yellow", "font-size": "200%"}); : merupakan manipulasi terhadap CSS, untuk merubah nilai yang sudah diterapkan.
- Hasil browser menampilkan bahwa background-color: yellow/kuning, walaupun style sheet di tag <p> adalah red/merah, karena maipulasi dari "selector jquery".
Seperti itulah kerja daripada jQuery. Bisa memanipulasi atau menambahkan kode-kode HTML/CSS.

Ada banyak Selector jQuery. Namun, akan saya berikan yang biasa dipakai saja.
Yukkk langsung saja belajar Selector jQuery nya :).

Selector tag: yang artinya digunakan untuk memilih tag HTML dengan cara menuliskan nama tag nya langusung. Misalnya memilih tag <p> maka ditulisnya menjadi: $('p').

Selector class: yang artinya digunakan untuk memilih tag HTML yang memiliki atribut class tertentu. Cara penulisannya dengan menaruh tanda titik (.) sebelum nama class, misalnya memilih tag <p class="merah"> maka penulisan selector menjadi: $('.merah') atau ('p.merah').

Selector id: yang artinya digunakan untuk memilih tag HTML yang memiliki atribut id tertentu. Cara penulisannya dengan menaruh tanda pagar (#) sebelum nama id. Misalnya memilih tag <p id="hijau"> maka penulisan selector menjadi: $('#hijau').

:first: digunakan untuk memilih elemen yang disebutkan sebelumnya pada urutan yang petama. Misalnya memilih tag <p> yang pertama, maksudnya yang pertama, setelah selector <p> ada satu atau lebih selector <p> yang lain , maka penulisannya menjadi $('p:first').

:last: digunakan untuk memilih tag HTML yang disebutkan sebelumnya pada urutan yang terakhir, ini kebalikannya dengan selector :first, misalnya memilih tag <p> yang terakhir, maka penulisannya menjadi $('p:last').

:even: digunakan untuk memilih tag HTML yang disebutkan sebelumnya pada urutan ganjil. Misalnya memilih tag <p> yang ke tiga, lima dst, penulisannya $('p:even').

:old: digunakan untuk memilih tag HTML yang disebutkan sebelumnya pada urutan genap. Kebalikan dari selector even.

:checked: digunakan untuk memilih checkbox yang sedang dicentang.

:hidden: digunakan umtuk memilih tag HTML yang sedang disembunyikan (hidden).

not(selector): digunakan untuk memilih tag HTML yang tidak dipilih oleh selector yang terletak didalam kurung. Misalnya memilih tag <p> yang tidak memiliki class "merah" , maka penulisannya: $('p:not(.merah)').

Selanjutnya bisa belajar Memahami Effect dalam jQuery.
Tentunya masih banyak selector-selector yang lain yang bisa dipelajari lagi disitus resminya (www.jquery[dot]com). Semoga bermanfaat artikel Memahami Selector jQuery.

- salam - 


Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Memahami Selector jQuery"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -