Selector CSS pada jQuery sangat berguna supaya kita tepat untuk menentukan target elemen pada dokumen HTML yang ingin kita manipulasi. Penempatan kode javascript pada dokumen html juga sangat menentukan. Rekomendasi yang sebaiknya selalu dijalankan sebagai best-practice adalah menaruh tag <script> di bagian bawah sebelum tag </body>, dan menaruh source code jquery.min.js sebelum kode js kita yang lain. Untuk memastikan agar semua dokumen sudah di load sebelum operasi javascript dilakukan, sangat direkomendasikan untuk mengawalinya dengan kode :
|
1 2 3 |
$(document).ready(function(){ //Your javascript code }); |
Atau bisa disingkat
|
1 2 3 |
$(function(){ //Your js code }); |
Google Chrome Developer Tools
Browser Google Chrome telah dilengkapi dengan tools bagi para programmer, caranya adalah dengan melakukan klik kanan pada layar browser dan tekan Inspect Element. Kemudian tekan TAb console, dan kita bisa melakukan operasi javascript disitu.
CSS Selector – >
|
1 |
$("#steps > li").css("color", "blue"); |
Tanda lebih dari (>) artinya direct descendant atau child langsung dari element. Kode di atas berarti untuk setiap li yang merupakan direct descendant dari id #steps, berikan warna biru.
:first dan :last
|
1 |
$("#steps li:first").css("color", "red"); |
Selector di atas akan menargetkan elemen li pertama yang dimiliki oleh id steps.
:nth-child
Akan menargetkan child ke – nth dari parentnya. Misal
|
1 |
$("#steps li:nth-child(3)").css({"border":"1 px solid red"}); |
Akan membuat child li ke-3 dari #steps memiliki border dengan warna merah. Index disini dimulai dari 1, bukan seperti array yang dimulai dari 0.
Kalau kita ingin menargetkan paragraf yang punya attribut class, sintaksnya seperti ini :
|
1 |
$("p[class]") |
Jika kita ingin menargetkan ul yang mempunyai atribut id=steps, sintaksnya seperti ini :
|
1 |
$("ul[id='steps']").hide(); |
Sumber untuk jquery selector bisa dilihat di www.w3schools.com/jquer/jquery_ref_selectors.asp