Tutorial jQuery 8 : Selector CSS dan Document Ready Function

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 :

Atau bisa disingkat

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 – >

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

Selector di atas akan menargetkan elemen li pertama yang dimiliki oleh id steps.

:nth-child

Akan menargetkan child ke – nth dari parentnya. Misal

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 :

Jika kita ingin menargetkan ul yang mempunyai atribut id=steps, sintaksnya seperti ini :

Sumber untuk jquery selector bisa dilihat di www.w3schools.com/jquer/jquery_ref_selectors.asp

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.