Memahami Fungsi Selector Yang Ada Di jQuery

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan menjelaskan lebih detail fungsi selector yang ada pada jQUery. jQuery Selector adalah salah satu bagian yang terpenting dari library jQuery, kenapa bisa di sebutkan bagian yang terpenting di dalam jQuery karena fungsi dari jQuery Selector adalah untuk memanipulasi atau memilih elemen atau Tag HTML yang ingin kita manipulasi. Sebelum kita lanjutkan teman-teman pasti sudah tau kan istilah selector itu apa? Seperti di CSS, istilah selector ada 3 yaitu id Selector, class Selector & Tag Selector. Nah di JQuery sendiri selector digunakan untuk menemukan elemen HTML atau memilih elemen HTML yang ingin kita manipulasi berdasarkan id, class, type, attributes, Tag HTML dan masih banyak lagi. Di bawah ini saya akan mempraktekan bagaimana memanipulasi atau menghilangkan elemen HTML dengan menggunakan jQuery. Baik kita akan langsung memulainya saja ya teman-teman.

Pertama untuk memulainya kita bisa menggunakan tanda dollar dan tanda kurung $() untuk memilih selector mana yang ingin kita manipulasi. Nah di bawah ini adalah contoh jika kalian ingin memilih semua elemen HTML <p> yang ada dihalaman website kalian. 

Belajar jQuery

Di bawah ini kita akan coba membuat contoh di mana ketika kalian mengkilik button, maka semua elemen <p> yang ada akan di hilangkan. Berikut contohnya.

See the Pen aOGyzQ by Dumet_School (@dumet_school) on CodePen.

Contoh berikutnya kita akan coba menghilangkan elemen yang sudah kita berikan nama dengan id. Untuk memilih elemen yang memiliki id kita bisa menggunakan tanda pagar (#) kemudian di barengi dengan namanya contoh seperti ini $(“#test”). Penamaan id harus unik ya teman-teman. Berikut contohnya.

See the Pen RPyZWN by Dumet_School (@dumet_school) on CodePen.

Selanjutnya adalah contoh dengan kita memilih elemen yang sudah kita berikan class. Untuk memilih elemen yang sudah di berikan class kalian bisa memilihnya dengan menggunakan tanda titik (.) kemudian di barengi dengan nama class nya contohnya seperti ini $(“.test”).

See the Pen QbrMyM by Dumet_School (@dumet_school) on CodePen.

Nah yang terakhir kita akan coba memilih elemen yang akan kita hilangkan berdasarkan attribute yang ada di dalam Tag HTML. Untuk memilihnya kalian bisa menuliskan seperti ini $(“[href]”), kita akan coba menghilangkan elemen yang memiliki attribute href. Berikut contohnya.

See the Pen WvJEwO by Dumet_School (@dumet_school) on CodePen.

Dari ke 4 contoh di atas itu adalah beberapa contoh jQuery Selector yang sangat mudah dipahami, sebenarnya masih banyak contoh-contoh dari jQuery Selector seperti $(“*”) berfungsi untuk menghilangkan semua elemen HTML yang ada di website, $(“this”) berfungsi untuk memilih elemen HTML saat ini, $(“p.intro”) berfungsi untuk menghilangkan elemen atau Tag HTML <p> dan tag HTML yang memiliki class .intro, dan masih banyak lagi. Itulah fungsi dari beberapa jQuery Selector, sekian dulu tutorial dari saya semoga tutorial ini bermanfaat untuk teman-teman yang sedang ingin belajar jQuery ya. Terima Kasih.  

10 Juli 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat