Tutorial jQuery Part 5 (VA)

Tutorial jQuery Part 5

Mengenal variabel $(this) dalam jQuery.

Didalam javascript ada variabel this yang merupakan referensi untuk objek saat ini sedangkan di dalam jquery ada selector $(this) yang berfungsi sebagai referensi untuk element HTML saat ini. Saya ingin memberi contoh misalnya kita mengambil salah satu contoh event click yang ada pada tutorial sebelumnya. Dimana ada satu div yang akan kita jalankan event click di kotak tersebut.

Contoh :
Pertama kita buat satu div lalu  kita berikan width ,height dan warna sesuai dengan keinginan(CSS). Setelah itu barulah kita masukkan tag <script> kita tetap memakai file "jquery-2.1.4.js" dan barulah kita mengetikkan function on click sesuai dengan yang kita inginkan. Disini saya membuat event on clicknya adalah setelah kita click dia akan berubah warna seperti tutorial sebelumnya.Maka seperti biasa kita mengetikkan tag HTML lalu membuat div nya setelah itu baru dilanjutkan dengan CSS nya dan terakhir kita masukkan tag <script> yang menggunakan function yang ketika di click akan mengubah apa contohnya saya disini mengubah warna div yang awalnya abu-abu menjadi oren. Maka codingnya adalah :

Outputnya adalah(sebelum diclick):

Output (setelah diclick):

Untuk menggunakan variabel $(this) ini kita cukup mengubah function yang ada di javascript. Karna sebenarnya penulisan $(this) ini sama fungsinya ketika kita memanggil $("#box") kita juga dapat menambahkan variabel $(this).html yang berarti akan seolah menampilkan div baru yang berbeda warna karna kita juga menggunakan $(this).css dan menampilkan tulisan yang berbeda dengan div awal. Maka codingnya  adalah :

Dan outputnya akan seperti ini(sebelum di click):

Output (setelah di click):

Setelah itu kita bisa saja menambahkan variasi misalnya menambahkan div menjadi 2 div atau lebih. dan juga kita bisa memadukannya dengan berbagai metode yang ada seperti width() dan height(). Disini diambil contoh bahwa kita mempunyai 2 div yang akan kita atur width dan heightnya contohnya bisa kita padukan dengan CSS. Maka ketika kita click akan muncul perubahan misalnya memperlebar atau mempertinggi div yang ada atau bahkan mengubah warna sambil memperbesar dan mempertinggi. Maka saya akan menuliskan codingnya sebagai berikut :

Dan outputnya akan seperti ini (bisa dilihat perbedaan antara yang sudah di click dengan yang belum di click) :

Namun setelah dilihat-lihat sepertinya coding di atas agak meribetkan kita bisa saja mempersingkat coding di atas dengan menggunakan selector $(this) ini agar mempersingkat coding diatas meskipun coding diatas ini tidak salah. Tapi menjadi lebih mudah jika kita bisa mempersingkat coding yang ada agar mempermudah kita. Kita juga dapat menambahkan element $(this).css yang ketika kita click akan mengubah warna .Maka jika kita menggunakan $(this) akan menjadi seperti ini codingnya:

Dan outputnya:

Thankyou for reading, have a nice day and God bless you :)

“Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.”
― Rick Cook, The Wizardry Compiled