Tutorial Belajar jQuery Part 16: Pengertian Variabel $(this) dalam jQuery

Posted on

Di panduan belajar jQuery kali ini saya akan membahas diantara konsep urgen di di jQuery maupun JavaScript, yakni pengertian variabel $(this) dalam jQuery.


Pengertian Variabel $(this) di jQuery

Di di bahasa pemrograman objek (seperti JavaScript), variabel this berfungsi selaku referensi untuk objek dikala ini. Sedangkan di di jQuery, selector $(this) berfungsi selaku referensi untuk element HTML dikala ini.

Selaku contoh, misalkan saya mempunyai sebuah box HTML dengan kode berikut:

Saya ingin menambahkan event click di tag tersebut. Di di jQuery, saya dapat membuatnya dengan kode program:

Kemudian bagaimana kalau saya ingin agar warna background box tersebut berubah menjadi abu-abu (silver) dikala di-klik? Saya dapat menambahkan kode berikut ke di event click :

Tak ada hal yang baru disini, saya menggunakan method css() untuk menambahkan property CSS background-color: silver.

Kode diatas dapat pun dapat ditulis menjadi:

Perhatikan bagaimana saya mengubah selector jQuery $(“#box”).css() menjadi $(this).css(). Ini berarti saya ingin mengubah warna background-color untuk faktor HTML yang dikala ini sedang aktif. Karena kita berada di di event click $(“#box”), artinya $(this) sama dengan $(“#box”).

Berikut contoh komplit dari penjelasan ini:

 Di kode program ini, saya membangun event click di box menggunakan selector $(this). Silahkan rekan-rekan coba sendiri dengan men-klik box dibawah ini:

See the Pen Contoh Penggunaan Variabel $(this) dalam jQuery by duniailkom (@duniailkom) on CodePen.10206


Kalau hasilnya sama seperti selector lazim, untuk apa repot-repot gunakan $this?

Dengan menggunakan selector $(this), kita dapat membangun kode program yang lebih efisien untuk beraneka selector sekaligus. Mari masuk ke contoh praktek berikutnya:

See the Pen Contoh Penggunaan Variabel $(this) dalam jQuery 2 by duniailkom (@duniailkom) on CodePen.10206

Kali ini saya mempunyai 3 buah box dari tag <div>. Untuk setiap box, ketika di klik, lebar dan tingginya bertambah 10 pixel. Untuk membangun efek ini, saya menggunakan method width() dan height() yang telah dipelajari dari panduan sebelumnya.

Disini saya dapat membangun 3 buah event untuk masing-masing box, yakni $(“#box1”).click(), $(“#box2”).click() dan $(“#box3”).click(). Di dalamnya, terdapat kode jQuery untuk memperbesar ukuran box.

Kode diatas berjalan seperti rencana dan tak salah. Namun akan jauh lebih efisien kalau saya dapat membangun 1 event untuk ketiga box. Berikut perubahannya:

See the Pen Contoh Penggunaan Variabel $(this) dalam jQuery 3 by duniailkom (@duniailkom) on CodePen.10206

Bisakah rekan-rekan membedakannya dengan kode program saya sebelumnya? Daripada membangun 3 event untuk setiap box, saya dapat membangun 1 event untuk seluruh box. Variabel $(this) di di event ini akan mengurus semuanya. Selaku nilai bonus, kalau saya menambah 1 lagi tag <div>, box tersebut pun seketika mempunyai event click yang sama.

Jikalau rekan-rekan belum semacam itu paham dengan variabel $(this) ini silahkan mempelajari sejenak maksud kode diatas, lalu bikin kode program lain selaku alat latihan.

Di panduan jQuery berikutnya, saya akan mulai membahas efek animasi yang dapat dikerjakan dari jQuery: Cara Membuat Efek Show dan Hide jQuery.


Sumber https://www.duniailkom.com/