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:
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 -
Tidak ada komentar
Posting Komentar
Dilarang SPAM Komentar!