Belajar jQuery : Pengertian dan Contoh Penggunaan Selector

Codins - Sebelumnya kita telah mengenal jquery serta cara penggunaanya pada artikel yang berjudul Belajar jQuery : Mengenal jQuery dan Cara Menggunakannya. Kali ini kita akan belajar dasar jquery yakni selector. Selector pada jQuery berguna untuk mencari sebuah element pada html dengan atribut tertentu atau bahkan semua element html. Dengan jquery selector kita bisa memanipulasi element html sesuka kita.

Pengertian jQuery Selector

Seperti yang sudah saya jelaskan, jquery selector berguna untuk memanipulasi element html. Misalnya ketika kita ingin mengubah sebuah element dengan tag p dengan atribut id teks atau dalam html bisa dituliskan <p id="teks"> kita bisa menggunakan selector untuk memanipulasi isi yang ada di tag tersebut. Untuk membuktikannya kita akan membuat file html baru, pertama buatlah folder dengan nama belajarjq, lalu buat file html baru bernama selector.html.

Setelah anda membuat folder dan file seperti pada gambar diatas, langkah berikutnya adalah menyalin sintaks dibawah ini :

selector.html

Penjelasan sintaks diatas :

<script type="text/javascript" src="jquery-2.2.4.min.js"></script> disini saya memanggil file jquery-2.2.4.min.js yang ada pada folder belajarjq
<button id="tombol">Tampil/Sembunyi</button> : membuat button dengan id tombol
<button id="warna">Beri Warna</button> : membuat button dengan id warna
<div class="box"> : membuat div dengan id box
$( document ).ready(function() : berguna untuk memberitahukan jika jquery dijalankan ketika halaman sudah dimuat 100% atau keseluruhan halaman telah berhasil dimuat.
$("#tombol").click(function() : proses selector terjadi disini, jquery memilih tag button dengan atribut id tombol dan akan menyembunyikan tag div apabila diklik
$("#warna").click(function() : jquery selector mencari tag html dengan id warna lalu ketika diklik akan mengubah tag p dengan class teks menjadi berwarna biru

Jika sudah kita akan mencoba untuk mengakses file html yang sudah kita buat, buka dengan menggunakan browser yang anda gunakan. Maka akan muncul seperti gambar dibawah ini :

Apabila kita menekan tombol beri warna, maka warna teks akan berubah menjadi biru sesuai pada sintaks diatas.

Begitu juga dengan tombol tampil / sembunyi, apabila kita tekan tombol tersebut maka tulisan yang ada di tag div dengan id tombol akan menghilang, dan sebaliknya jika kita tekan kembali tombolnya maka tulisan akan muncul,

Oke untuk tutorial berjudul Belajar jQuery : Pengertian dan Contoh Penggunaan Selector sampai disini terlebih dulu, jika anda masih tidak memahami apa yang saya tulis, silakan untuk bertanya melalui form komentar dibawah.

Ikhwan Mei 16, 2018 Komentar