Advertisement
  1. Code
  2. Roundups

20 Metode jQuery Bermanfaat yang Harus Anda Gunakan

Scroll to top
Read Time: 13 min

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Jadi Anda telah bermain dengan jQuery untuk sementara waktu sekarang, Anda mulai menguasainya, dan Anda benar-benar menyukainya! Apakah Anda siap untuk membawa pengetahuan jQuery Anda ke level dua? Hari ini, saya akan menunjukkan dua puluh fungsi dan fitur yang mungkin belum pernah Anda lihat sebelumnya!


1 after() / before()

Terkadang Anda ingin memasukkan sesuatu ke DOM, namun Anda tidak memiliki kait yang bagus untuk melakukannya; append() atau prepend() tidak akan memotongnya dan Anda tidak ingin menambahkan elemen atau id tambahan. Kedua fungsi ini mungkin adalah apa yang Anda butuhkan. Mereka memungkinkan Anda memasukkan elemen ke DOM sesaat sebelum atau sesudah elemen lain, sehingga elemen baru tersebut adalah saudara dari yang ada terlebih dahulu.

Anda juga dapat melakukan ini jika Anda bekerja terutama dengan elemen yang ingin Anda sisipkan; cukup gunakan fungsi insertAfter() atau insertBefore().


2 change()

Metode change() adalah event handler, seperti click() atau hover(). Event change adalah untuk textareas, input teks, dan kotak seleksi, dan akan dijalankan saat nilai elemen target diubah; perhatikan bahwa ini berbeda dengan event handler focusOut() atau blur(), yang dijalankan saat elemen kehilangan fokus, apakah nilainya telah berubah atau tidak.

Event change() sangat cocok untuk validasi sisi klien; ini jauh lebih baik daripada blur(), karena Anda tidak akan memvalidasi ulang jika pengguna tidak mengubah nilainya.


3 Context

Context adalah parameter sekaligus properti di jQuery. Saat mengumpulkan elemen, Anda bisa melewatkan parameter kedua ke fungsi jQuery. Parameter ini, konteksnya, biasanya akan menjadi elemen DOM, dan membatasi elemen yang dikembalikan ke item yang cocok dengan penyeleksi Anda yang merupakan turunan dari elemen konteks. Itu kedengarannya agak membingungkan, jadi perhatikan contoh ini:

context example

Jadi, bukankah ini akan berguna? Satu tempat mungkin berada di dalam fungsi event handler. Jika Anda ingin mendapatkan elemen dalam event yang dijalankan, Anda dapat mengirimkan this sebagai context:


4 data() / removeData()

Pernahkah Anda ingin menyimpan sedikit informasi tentang sebuah elemen? Anda bisa melakukannya dengan mudah dengan metode data(). Untuk menetapkan nilainya, Anda bisa melewatkan dua parameter (sebuah kunci dan sebuah nilai) atau hanya satu (sebuah objek).

Untuk mengembalikan data Anda, cukup panggil metode dengan kunci dari nilai yang Anda inginkan.

Untuk mendapatkan semua data yang sesuai dengan elemen, panggil data tanpa parameter; Anda akan mendapatkan objek dengan semua kunci dan nilai yang Anda berikan pada item itu.
Jika Anda ingin menghapus pasangan kunci/nilai setelah menambahkannya ke elemen, cukup panggil removeData(), masukkan kunci yang benar.


5 queue() / dequeue()

Fungsi queue() dan dequeue() berhubungan dengan animasi. Antrian adalah daftar animasi yang akan dieksekusi pada sebuah elemen; menjadi default, antrian elemen dinamakan 'fx.' Mari membuat skenario:

HTML

JavaScript

Jadi, inilah yang terjadi: dalam fungsi animateBox, kita menyiapkan antrian animasi; perhatikan bahwa panggilan terakhir kembali ke fungsi, jadi ini akan terus mengulang antrian. Ketika kita klik li#start, fungsi dipanggil dan antrian dimulai. Saat kita klik li#reset, animasi saat ini diselesaikan, dan kemudian div berhenti beranimasi. Apa yang telah kita lakukan dengan jQuery adalah mengatur antrian yang bernama 'fx' (ingat, antrian default-nya) ke array kosong; intinya, kita sudah mengosongkan antrian. Dan bagaimana jika kita klik li#add? Pertama, kita memanggil fungsi queue di div; ini menambahkan fungsi yang kita lewatkan ke akhir antrian; karena kita tidak menentukan antrian sebagai parameter pertama, maka 'fx' digunakan. Dalam fungsi itu, kita menganimasikan div, lalu memanggil dequeue() pada div, yang menghilangkan fungsi ini dari antrian dan meneruskan antrian; antrian akan terus berulang, tapi fungsi ini tidak akan menjadi bagian darinya.


6 delay()

Saat Anda mengantrikan rantai animasi, Anda dapat menggunakan metode delay() untuk menjeda animasi dalam jangka beberapa waktu; lewatkan waktu itu sebagai parameter dalam milidetik.


7 bind(), unbind(), live(), dan die()

Tahukah Anda bahwa saat Anda menambahkan event click ke elemen seperti ini . . .

. . . Anda sesungguhnya hanya menggunakan pembungkus untuk metode bind()? Untuk menggunakan metode bind() itu sendiri, Anda bisa melewatkan jenis event sebagai parameter pertama dan kemudian fungsinya sebagai yang kedua.

Jika Anda menggunakan banyak event, Anda bisa mengkategorikannya dengan namespace; tambahkan saja tanda titik setelah nama event dan tambahkan namespace Anda.

Anda juga dapat menetapkan fungsi yang sama ke beberapa event secara bersamaan, dengan memisahkannya dengan spasi. Jadi jika Anda ingin membuat efek hover, Anda bisa memulai dengan cara ini:

Anda juga bisa mengirimkan data ke fungsinya jika Anda mau, dengan menambahkan parameter ketiga (pada posisi kedua).

Cepat atau lambat, Anda akan menemukan diri Anda memasukkan elemen ke DOM melalui sebuah event handler; namun, Anda akan mendapati bahwa event handler yang Anda buat dengan mengikat (atau pembungkusnya) tidak berfungsi untuk elemen yang disisipkan. Dalam kasus seperti ini, Anda harus menggunakan metode live() (atau delegate); ini akan menambahkan event handler ke elemen yang disisipkan yang sesuai.

Untuk menghapus event handler yang dibuat dengan bind(), gunakan metode unbind(). Jika Anda tidak mengirimkan parameter apapun, itu akan menghapus semua handler; Anda bisa memasukkan jenis event untuk hanya menghapus event handler jenis tersebut; untuk menghapus event dari namespace tertentu, tambahkan namespace, atau gunakan sendiri. Jika Anda hanya ingin menghapus fungsi tertentu, kirimkan namanya sebagai parameter kedua.

Perhatikan bahwa Anda dapat mengikat/melepaskan fungsi yang telah Anda kirimkan secara anonim; ini hanya bekerja dengan nama fungsi.
Jika Anda mencoba untuk melepaskan suatu event dari dalam fungsi yang dipanggil oleh event tersebut, cukup kirimkan unbind() objek event.

Anda tidak dapat menggunakan unbind() untuk event live; sebagai gantinya, gunakan die(). Tanpa parameter, akan menghapus semua event live dari koleksi elemen; Anda juga bisa mengirimkan hanya jenis event, dari jenis event dan fungsinya.

Dan sekarang, Anda bisa menggunakan event jQuery dengan cekatan dan kuat!

Anda juga harus meninjau metode delegate(), karena ada kemungkinan kinerja yang signifikan untuk menggunakannya daripada live().


8 eq()

Jika Anda mencari elemen tertentu dalam satu set elemen, Anda dapat mengirimkan indeks elemennya ke metode eq() dan mendapatkan elemen jQuery tunggal. Masukkan indeks negatif untuk menghitung mundur dari akhir set.

Anda juga dapat menggunakan :eq() pada penyeleksi Anda; sehingga contoh sebelumnya bisa saja dilakukan seperti ini:


9 get()

Saat mendapatkan kumpulan elemen, jQuery mengembalikannya sebagai objek jQuery, jadi Anda memiliki akses ke semua metodenya. Jika Anda hanya menginginkan elemen DOM mentah, Anda bisa menggunakan metode get().

Anda bisa menentukan indeks untuk mendapatkan hanya satu elemen.


10 grep()

Jika Anda tidak terbiasa dengan shell Unix/Linux, Anda mungkin tidak pernah mendengar istilah grep. Di terminal, ini adalah utilitas pencarian teks; tapi di sini di jQuery, kita menggunakannya untuk menyaring array dari elemen. Ini bukan metode koleksi jQuery; Anda mengirimkan dalam array sebagai parameter pertama dan fungsi penyaringan sebagai parameter kedua. Fungsi filter itu mengambil dua parameternya sendiri: sebuah elemen dari array dan indeksnya. Fungsi filter itu harus melakukan pekerjaannya dan mengembalikan nilai true atau false. Menjadi default, semua item yang mengembalikan true akan disimpan. Anda dapat menambahkan parameter ketiga, sebuah boolean, untuk membalikkan hasilnya dan menyimpan yang mengembalikan false.

Jeffrey Way membuat tip cepat yang sangat bagus tentang $.grep belum lama ini; periksa itu untuk melihat bagaimana cara menggunakannya!


11 Pseudo-Selector

Sizzle, mesin CSS Selector di dalam jQuery, menawarkan beberapa pseudo-selector untuk membuat pekerjaan memilih elemen yang Anda inginkan dengan mudah. Lihatlah yang menarik ini:

Ada lebih banyak, tentu saja, tapi berikut ini adalah yang unik.


12 isArray() / isEmptyObject() / isFunction() / isPlainObject()

Terkadang Anda ingin memastikan bahwa parameter yang dikirimkan ke sebuah fungsi adalah jenis yang sesuai; fungsi ini memudahkan untuk dilakukan. Tiga yang pertama cukup jelas.

Yang berikutnya tidak begitu jelas; isPlainObject() akan mengembalika true jika parameter yang dikirimkan dibuat sebagai objek literal, atau dengan new Object().


13 makeArray()

Saat Anda membuat kumpulan elemen DOM dengan jQuery, Anda akan mengembalikan objek jQuery; dalam beberapa situasi, Anda mungkin lebih menyukai bahwa ini menjadi array atau elemen DOM biasa; fungsi makeArray() bisa melakukannya.


14 map()

Metode map() hampir mirip dengan grep(). Seperti yang Anda duga, dibutuhkan satu parameter, sebuah fungsi. Fungsi itu bisa memiliki dua parameter: indeks elemen saat ini dan elemen itu sendiri. Inilah yang terjadi: fungsi yang Anda kirimkan akan dijalankan sekali untuk setiap item dalam koleksi; berapa pun nilai yang dikembalikan dari fungsi tersebut menggantikan item yang dijalankan dalam koleksi.


15 parseJSON()

Jika Anda menggunakan $.post atau $.get—dan dalam situasi lain Anda bekerja dengan string JSON—Anda akan mendapati fungsi parseJSON berguna. Bagus bahwa fungsi ini menggunakan pengurai JSON bawaan browser jika memilikinya (yang jelas akan lebih cepat).


16 proxy()

Jika Anda memiliki fungsi sebagai properti dari sebuah objek, dan fungsi itu menggunakan properti lain dari objek, Anda tidak dapat memanggil fungsi itu dari dalam fungsi lain dan mendapatkan hasil yang benar. Saya tahu itu membingungkan, jadi mari kita lihat contoh singkatnya:

Dengan sendirinya, person.meet() akan mengingatkan dengan benar; tapi saat dipanggil oleh event handler, itu akan mengingatkan "Hai! Nama saya tidak terdefinisi." Ini karena fungsinya tidak dipanggil dalam konteks yang tepat. Untuk mengatasinya, kita bisa menggunakan fungsi proxy():

Parameter pertama dari fungsi proxy adalah metode untuk dijalankan; yang kedua adalah konteks yang harus kita jalankan. Sebagai alternatif, kita bisa mengirimkan konteks dulu, dan nama metode sebagai string kedua. Sekarang Anda akan menemukan bahwa fungsi bersiap dengan benar.

Lebih suka tip cepat video pada $.proxy?


17 replaceAll() / replaceWith()

Jika Anda ingin mengganti elemen DOM dengan yang lain, inilah cara melakukannya. Kita dapat memanggil replaceAll() pada elemen yang telah kita kumpulkan atau ciptakan, mengirimkan penyeleksi untuk elemen yang ingin kita ganti. Dalam contoh ini, semua elemen dengan kelas error akan diganti dengan span yang telah kita buat.

Metode replaceWith() hanya membalikkan penyeleksi; menemukan yang ingin Anda ganti dulu:

Anda juga bisa mengirimkan dua fungsi metode ini yang akan mengembalikan elemen atau string HTML.


18 serialize() / serializeArray()

Metode serialize() adalah apa yang harus digunakan untuk mengkodekan nilai dalam form menjadi sebuah string.

HTML

JavaScript

Anda dapat menggunakan serializeArray() untuk mengubah nilai form ke dalam objek array, bukan string:


19 siblings()

Anda mungkin bisa menebak apa yang dilakukan oleh siblings(); itu akan mengembalikan koleksi saudara dari item apa pun yang ada dalam koleksi asli Anda:


20 wrap() / wrapAll() / wrapInner()

Ketiga fungsi ini memudahkan untuk membungkus elemen dalam elemen lainnya. Pertama, saya akan menyebutkan bahwa ketiganya mengambil satu parameter: elemen (yaitu string HTML, penyeleksi CSS, objek jQuery, atau elemen DOM) atau fungsi yang mengembalikan elemen.
Metode wrap() membungkus setiap item dalam koleksi dengan elemen yang ditujukan:

wrapAll() akan membungkus satu elemen di sekitar semua elemen dalam koleksi; ini berarti bahwa elemen dalam koleksi akan dipindahkan ke tempat baru di DOM; mereka akan berjajar di tempat elemen pertama dalam koleksi dan dibungkus di sana:

HTML, Sebelum:

JavaScript

HTML, Sesudah:

Akhirnya, fungsi wrapInner membungkus segala sesuatu di dalam setiap elemen dalam pengumpulan dengan elemen yang diberikan:

HTML, Sebelum:

JavaScript:

HTML, Sesudah:


Kesimpulan

Nah, sekarang Anda punya lebih dari dua puluh fitur jQuery baru untuk dimainkan pada proyek Anda selanjutnya; Bersenang-senang dengan mereka!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.