Selector bertugas untuk melakukan tindakan tertentu untuk memilih element html. jQuery selector memilih element html berdasarkan id, class, jenis, atribut, nilai atribut, dan sebagainya. Hal ini didasarkan pada ada CSS , di samping itu, juga memiliki beberapa pemilih kustom.
Semua selektor jQuery mulai dengan tanda dolar: $( ). Bentuk penulisan selector didalam jquery sebagai berikut:
$("selector"). Event(); =>Tanda $ merupakan defenisi dari simbol jQuery.
Contoh, kita memiliki sebuah element <p> yang diberi sebuah class dengan nama "data". Maka bentuk penulisan elemen tersebut adalah <p class="data"></p>.
Sedangkan untuk pemanggilan element tersebut dengan jQuery dapat dilihat seperti berikut:
<p class="data"></p>
$(".data").click();
Dari contoh diatas kita memeiliki selector bernama data dan sebuah even dengan nama click. Ketikan even Clikc terjadi pada selector maka jQuery akan menjalankan sebuah function.
Ada 2 jenis selector:
1. selector ID, selector diawali dengan tanda titik(.)
Contoh:
<p id="data"></p>
$(".data").click();
2. selector Class, selector diawali dengan tanda pagar(#)
Contoh
<p class="data"></p>
$(".data").click();
Event dan Jenisnya
Event merupakan kejadian atau aksi yang diberikan kepada sebuah komponen di html. Seperti kejadian pada button yang diberi event clik. Ketika tombol button di klik maka sebuah kejadia terjadi pada button tersebut.
Ada beberapa Event pada JQuery yang akan dibahas pada artikel kali ini.
Event Click() dan Event mouseup()
Event ini merupakan kejadian yang terjadi ketika terjadi aksi klik pada sebuah komponen html. Perhatikan contoh berikut:
Jalankan program dengan browser. Tampil sebuah tombol Click disini!. Klik tombol tersebut, jika keluar sebuah text dibawah tombol berarti script oke.
Event dbClick()
Event dbClick() pada dasarnya sama dengan event Click(). Hanya pada dbclick() terjadi aksi double click. coba ganti script diatas menjadi event dbclick()
Jalankan program. Double klik tombol dan perhatikan hasil yang terjadi.
Event Mouseenter() dan Mouseover()
Event mouseenter() atau mouseover() merupakan aksi yang terjadi pada komponen saat cursor diletakkan atau memasuki komponen tersebut akan terjadi sebuah aksi. perhatikan code berikut:
Jalankan program dan letakkan mouse pada tombol. Secara otomatis akan terjadi aksi dimana text akan tampil dibawah komponen tombol.
Event MouseLeave() dan Mouseout()
Kebalikan dari event mouseenter(), event mouseleave() atau mouseout() akan terjadi ketika cursor keluar dari area komponen html. Perhatikan script berikut:
Jalankan program. Letakkan cursor di komponen tombol kemudian keluarkan cursor dari tombol. Aksi akan terjadi ketika cursor berada diluar komponen tombol.
Event Mousemove()
Event mousemove() aksi akan terjadi selama mouse berada diatas komponen. Hampir sama prinsipnya dengan event mouseenter(), Bedanya pada mousemove() aksi akan dilakukan secara berulang. Berikut contohnya:
Nah dari contoh diatas semoga anda memahami. Masih banyak lagi jenis-jenis event yang ada didalam jQuery. Contoh diatas hanya memberikan event terhadap mouse, sedangkan terhadap keyboard juga terdapat event.
