Menetapkan fungsi dalam jquery

Pengenalan:

Dalam pembangunan web, jQuery sering digunakan sebagai alat menulis untuk kod skrip yang berkaitan. Dalam perpustakaan alat jQuery, terdapat banyak fungsi terbina dalam boleh dipanggil, tetapi fungsi terbina dalam ini tidak mencukupi untuk memenuhi semua keperluan kita. Jadi, dalam banyak kes, kita perlu menentukan fungsi kita sendiri. Artikel ini akan memberi tumpuan kepada cara menyediakan fungsi dalam jQuery.

1. Definisi pemalam dan fungsi jQuery

Pemalam jQuery ialah skrip yang menambah fungsi tambahan pada perpustakaan jQuery. Ia ditulis oleh pembangun dan biasanya mengandungi satu atau lebih fungsi. Pembangun boleh melanjutkan perpustakaan jQuery dengan mencipta fungsi mereka sendiri. Berikut ialah sintaks untuk mentakrifkan fungsi jQuery:

$.fn.functionName = function() {
  //Code to be executed
};

Dalam sintaks di atas, functionName ialah nama fungsi yang anda ingin takrifkan. Anda bebas memilih mana-mana nama. Seterusnya, anda perlu mentakrifkan operasi fungsi melalui badan fungsi. Dalam badan fungsi, anda boleh menggunakan semua fungsi terbina dalam yang perpustakaan jQuery sudah ada.

Sebagai contoh, kod berikut mentakrifkan fungsi jQuery bernama customFunction:

$.fn.customFunction = function() {
  $(this).css("background-color", "yellow");
};

Dalam kod di atas, kami telah menggunakan dua fungsi jQuery. Fungsi pertama ialah $(this), yang memilih elemen DOM semasa yang kami panggil fungsi tersebut. Fungsi kedua ialah css(), yang menukar warna latar belakang elemen.

2. Gunakan fungsi tersuai dalam kod

Selepas mentakrifkan fungsi jQuery baharu, kita perlu memanggilnya dalam kod.

Sebagai contoh, contoh berikut menunjukkan cara memanggil fungsi customFunction yang ditakrifkan:

$(document).ready(function() {
  $("button").click(function() {
    $("p").customFunction();
  });
});

Kod di atas mula-mula menunggu sehingga keseluruhan halaman dimuatkan dan kemudian menambah pengendali acara klik untuk elemen butang. Apabila butang diklik, ia memanggil fungsi customFunction dan menggunakannya pada semua elemen e388a4556c0f65e1904146cc1a846bee.

3. Definisi pemalam

Takrifan pemalam jQuery sangat serupa dengan takrifan fungsi. Pemalam biasanya terdiri daripada pelbagai fungsi yang berfungsi bersama untuk menyelesaikan masalah.

Berikut ialah sintaks untuk mentakrifkan pemalam jQuery:

(function($) {
  $.fn.pluginName = function() {
    //Code to be executed
  };
})(jQuery);

Dalam kod di atas, pluginName ialah nama pemalam yang ingin kami tentukan. Kami mengaitkan fungsi laksana sendiri dengan nama ini. Fungsi laksana sendiri mempunyai parameter $, yang merupakan rujukan kepada perpustakaan jQuery. Seterusnya, kami menggunakan $.fn untuk mentakrifkan pemalam. Sama seperti definisi fungsi, kami menyediakan operasi logik kami dalam badan pemalam. Akhir sekali, kami lulus jQuery sebagai parameter dalam fungsi laksana sendiri.

Sebagai contoh, kod berikut mentakrifkan pemalam jQuery yang dipanggil customPlugin:

(function($) {
  $.fn.customPlugin = function() {
    $(this).css("background-color", "yellow");
    return this;
  };
})(jQuery);

Dalam kod di atas, kami mentakrifkan pemalam yang menukar semua elemen yang memanggilnya warna latar belakang. Kami menggunakan return this supaya pemalam boleh dirantai.

4. Gunakan pemalam dalam kod

Selepas menentukan pemalam jQuery baharu, kita perlu menggunakannya dalam kod.

Sebagai contoh, contoh berikut menunjukkan cara memanggil pemalam customPlugin yang ditakrifkan:

$(document).ready(function() {
  $("button").click(function() {
    $("p").customPlugin().slideUp();
  });
});

Kod di atas mula-mula menunggu sehingga keseluruhan halaman dimuatkan dan kemudian menambah pengendali acara klik untuk elemen butang. Apabila butang diklik, ia memanggil pemalam customPlugin dan menggunakannya pada semua elemen e388a4556c0f65e1904146cc1a846bee. Seterusnya, fungsi slideUp() terbina dalam jQuery yang dipanggil rantai untuk menghasilkan kesan animasi gelongsor.

Kesimpulan:

Dalam artikel ini, kami mempelajari cara mentakrifkan fungsi dan pemalam anda sendiri dalam jQuery dan meneroka cara menggunakan fungsi dan pemalam ini dalam kod anda. Fungsi dan pemalam jQuery tersuai boleh membantu kami menyelesaikan masalah tertentu dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod kami. Saya harap artikel ini memberi inspirasi kepada anda tentang jQuery dan membantu anda menggunakannya dengan lebih berkesan.

Atas ialah kandungan terperinci Menetapkan fungsi dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!