Part 3: Cara menggunakan JQuery Selectors dengan Contoh

October 28, 2022

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.

id selector Langsung saja pada browser pada keyboard ctrl+shift+i

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 langsung saja ketik perintah JQuery untuk ID Selectors di Console

Kita menggunakan tanda # digunakan untuk id

Class Selectors

Class Selector

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

console selector class kue JQuery

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

attribute selector gambar JQuery

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

Console attribute Selector img

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

Ditulis oleh Adi

Suka hal baru dunia Digital Marketing, Web design dan Teknologi.
garis panjang

Comments

0 Comments

Submit a Comment

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