Membuat Filter Kustom di jQuery, Dalam beberapa kasus, Anda mungkin memerlukan pintasan untuk mengumpulkan elemen yang jQuery tidak menyediakan filter khusus. Di sinilah tepatnya filter khusus berperan.

Pada artikel ini, berdasarkan buku saya Instant jQuery Selectors, Anda akan mempelajari cara membuat filter kustom di jQuery. Harap perhatikan bahwa contoh dalam artikel ini menyertakan beberapa penyesuaian kecil dibandingkan dengan resep asli berjudul Filter khusus.

Membuat Filter Kustom di jQuery

Bangun Contoh

Tujuan dari contoh kami adalah untuk mencetak panjang elemen yang memiliki set atribut placeholder, memanfaatkan filter kustom yang dibuat sebelumnya. Selain itu, untuk melihat semua opsi yang tersedia dalam tindakan, kami akan membuat filter kedua untuk mengumpulkan semua elemen yang memiliki nama dengan jumlah karakter kurang dari yang ditentukan.

Baca Juga : 5 Hal Yang Harus Anda Berhenti Lakukan Dengan jQuery

Untuk menyelesaikan tugas, ikuti langkah-langkah yang dijelaskan di bawah ini.

Langkah 1

Buat file dan ganti namanya menjadi custom-filter.html.

Langkah 2

Buka file menggunakan editor teks sederhana, seperti Notepad ++ di Windows, Sublime di Mac, atau Gedit di Linux, atau dengan IDE favorit Anda. Dalam file ini, kita akan membuat formulir sederhana dengan beberapa bidang umum seperti “Nama”, “Nama belakang”, dan sebagainya. Semua kolom ini memiliki spesifikasi tipe (atribut tipe) dan nama (atribut nama), tetapi beberapa di antaranya juga memiliki set placeholder (atribut placeholder).

Cukup salin kode HTML di bawah ini dan simpan perubahannya.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Petunjuk Cara Selektor jQuery Instan</title>
      <style>
         input,
         select,
         textarea
         {
            display: block;
         }
      </style>
      <!-- Script will be placed here... -->
   </head>
   <body>
      <form name="registration-form" id="registration-form" action="registration.php" method="post">
         <label>Name:</label>
         <input type="text" name="name" placeholder="Nama" />
         <label>Surname:</label>
         <input type="text" name="surname" placeholder="Alias" />
         <label>Email:</label>
         <input type="email" name="email" placeholder="Email" />
         <label>Phone:</label>
         <input type="tel" name="phone-number" placeholder="Nomor Telepone" disabled="disabled" />
         <label>Privacy:</label>
         <input name="privacy" type="checkbox" checked="checked" />
         <label>Contact me:</label>
         <input name="contact-me" type="checkbox" />
         <label>Sex:</label>
         <select name="Gender">
            <option selected="selected" value="m">Laki - Laki</option>
            <option value="f">Perempuan</option>
         </select>
         <input type="submit" value="Register" />
      </form>
   </body>
</html>

Langkah 3

Replace the comment we put in the HTML (<!-- Script will be placed here... -->) with the following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    $.expr[':'].placeholder = function(elem) {
        return $(elem).attr('placeholder') !== undefined;
    };
    $.expr[':'].nameLengthLessThan = 
    $.expr.createPseudo(function(filterParam) {
        var length = parseInt(filterParam);
        return function(elem, context, isXml) {
            return $(elem).attr('name') !== undefined && 
            $(elem).attr('name').length < length;
      }
    });
    $(document).ready(function() {
        console.log($(':placeholder').length);
        console.log($('input:nameLengthLessThan(5)').length);
    });
</script>

Step 4

Simpan file dan buka dengan browser favorit Anda. Setelah halaman dimuat, lihat keluaran konsol.

Bagaimana itu bekerja

Di awal instruksi JavaScript kami untuk halaman ini, kami telah menambahkan properti, atau lebih khusus lagi fungsi yang disebut placeholder ke: (ya, itu adalah properti yang disebut titik dua, Anda membacanya dengan benar) atribut yang dimiliki oleh jQuery’s expr atribut. : adalah properti yang berisi filter asli jQuery dan Anda dapat menggunakannya untuk menambahkan filter Anda sendiri pada waktu proses. Di dalam definisi fungsi, kita hanya memiliki satu pernyataan yang memeriksa apakah elemen saat ini memiliki set atribut placeholder, dan jika demikian, ia mengembalikan true untuk mempertahankan elemen tersebut.

Seperti yang Anda lihat dari contoh, dalam versi dasar ini, filter tidak lain adalah fungsi yang menerima argumen dari elemen DOM saat ini untuk diproses dan harus mengembalikan true untuk menyimpannya dalam koleksi, dan false untuk membuangnya. Anda harus menggunakan metode ini untuk membuat filter jika berikut ini benar:

  • Anda hanya tertarik pada elemen yang akan diproses itu sendiri
  • Filter tidak menerima argumen
  • Konteks penerapan pemilihan tidak menjadi masalah

Filter kustom kedua, yang disebut nameLengthLessThan, sedikit lebih rumit dan menggunakan metode yang diperkenalkan (dan didorong) mulai dari jQuery 1.8. Kami meneruskan fungsi anonim ke fungsi createPseudo yang memiliki parameter yang mewakili argumen yang diteruskan ke filter saat Anda menggunakannya. Di dalamnya, kami membuat fungsi lain yang akan dikembalikan dan bertanggung jawab untuk melakukan pemfilteran.

Untuk yang terakhir, jQuery meneruskan elemen yang akan diproses (parameter elem), DOMElement atau DOMDocument tempat pemilihan akan terjadi (parameter konteks), dan Boolean yang memberi tahu jika Anda beroperasi pada dokumen XML. Seperti yang Anda duga, untuk filter ini kita memerlukan pola ini karena filter kita perlu mengetahui batas karakter yang harus dipatuhi oleh atribut name dari elemen tersebut. Dengan kata lain, kita perlu memberikan jumlah karakter yang harus dihormati oleh nilai atribut name.

Baca Juga : Perbandingan vBulletin Dengan phpBB Untuk Tahun 2021

Di dalam fungsi paling dalam, kami menulis kode untuk menguji apakah elemen harus disimpan atau tidak. Sebagai contoh, ini berarti memeriksa apakah atribut name disetel dan panjangnya tidak kurang dari panjang yang diberikan (disimpan menggunakan closure di dalam variabel panjang).

Sekarang setelah kami membuat filter, kami perlu menggunakannya. Di dalam handler untuk event document.ready, ada dua pernyataan. Yang pertama memanggil filter placeholder tanpa parameter dan secara implisit menggunakan selektor Universal. Yang kedua menggunakan filter nameLengthLessThan melewati 5 sebagai parameter dan menggunakan selektor Elemen. Menggunakan pemilih Elemen di panggilan kedua akan menghasilkan peningkatan kinerja. Menjalankan kode akan menghasilkan yang berikut ini dicetak di konsol:

4
1

Kesimpulan

Pada artikel ini benjaminsterling menjelaskan bagaimana Anda dapat membuat filter khusus di jQuery menggunakan metode lama dan baru, yang diperkenalkan di jQuery 1.8, metode. Penting untuk mengetahui keduanya karena saat dalam proyek baru Anda diharapkan akan menemukan metode yang terakhir, di beberapa proyek Anda mungkin menemukan yang pertama dan penting bagi Anda untuk mengetahui cara kerjanya, terutama jika versi jQuery tidak dapat diperbarui.

Jika Anda menyukai artikel ini, pertimbangkan untuk membeli buku saya, Instant jQuery Selectors di situs web Packt Publishing atau di Amazon. Instant jQuery Selectors diperuntukkan bagi pengembang web yang ingin mempelajari jQuery dari titik awalnya: selektor. Meskipun Anda sudah terbiasa dengan framework dan pemilihnya, Anda dapat menemukan beberapa tips dan trik yang tidak Anda ketahui, terutama tentang performa dan cara jQuery bertindak di belakang layar.