Part 3: Cara menggunakan JQuery Selectors dengan Contoh

JQuery Selectors atau penyeleksi digunakan untuk Memilih atau Mencari element HTML berdasarkan ID, Class, Attributes, CSS dan lainnya.

Anda langsung aja Download Project Website digunakan untuk praktek JQuery Selectors,

Jika Extract dan buka Folder Project Belajar-JQuery-main dengan Visual Code Studio

Jika Anda tidak tahu caranya Anda harus baca Cara Menggunakan JQuery

ID Selectors

Cara memilih Selectors id?  Oke langsung saja kita lihat halaman website kue, mari kita lihat script html di browser menggunakan chrome.

Langsung saja pada browser pada keyboard ctrl+shift+i secara otomatis membuka console, klik icon panah Anda bisa perhatikan gambar no 2 diatas.

Kita arahkan ke tulisan kue secara otomatis kita ke menu Elements, kita akan selector id pada bagian <section class=”column-dekstop” id=”kue”>

Kita langsung saja ketik perintah JQuery untuk ID Selectors di Console

Kita menggunakan tanda # digunakan untuk id

Class Selectors

Bagaimana Cara Selector Class? Berikut ini contoh cara bagaimana cara selector div class kue. Anda bisa perhatikan gambar diatas, Anda bisa melihat ada 2 div class kue

Ketik pada console

Menggunakan tanda . digunakan untuk class

Attribute Selectors

Bagaimana cara memilih element yang benar-benar spesifik, Anda ingin memilih berdasarkan link, gambar. Selector tidak terbatas tetapi idenya memilih element pada halaman website dengan cara lebih canggih daripada hanya menggunakan Class atau ID

Contoh kita memilih gambar Kue cherry dengan klik icon panah kemudian klik Kue Cherry. Secara Otomatis kita tau lokasi dan nama gambar images/kue-cherry.png

Langkah selanjutnya kita buka Console kemudian kita ketik

Ketika cursor ke img secara otomatis selector ke gambar kue cherry

CSS Selectors

Cara menggunakan CSS Selectors untuk menemukan element halaman website.

Cara selector Header dan Footer

Cara Selector .title dan desc

Ketika cursor ke p.desc secara otomatis selector ke p.desc