Ringkasan pemalam jQuery tulisan tangan DIY

jQuery ialah satu lagi rangka kerja JavaScript yang sangat baik selepas Prototaip Ia amat digemari oleh pembangun dan mempunyai pelbagai pengguna. Perkara yang baik tentang jQuery ialah penyesuaian pengguna, iaitu, kita boleh menulis pemalam kita sendiri untuk menambah baik pelbagai fungsi jQuery, menyesuaikan fungsi yang kita perlukan, menghapuskan kod berlebihan, dan mempunyai tahap fleksibiliti tertentu semasa memuatkan halaman. penambahbaikan.

Selepas temuduga, saya sangat terharu Adakah anda ingin menjadi pemaju yang tahu sepuluh perkara atau mahir dalam satu? Jadi saya menghabiskan beberapa hari mengkaji kod sumber jQuery dengan tekun, dan mempelajari tentang mekanisme acara jQuery, pemilih, dan cara keserasian penyemak imbas dicapai. Sejak itu, saya sentiasa mahu menulis pemalam jQuery untuk melaksanakan fungsi kecil saya sendiri.

Seperti yang ditunjukkan dalam gambar di atas, fungsi yang dilaksanakan oleh pemalam ialah apabila tetikus berada pada pautan, pautan bergerak, dan selepas tetikus keluar, pautan kembali ke kedudukan asalnya.

Bahagian teras Html ialah

Salin kod Kod adalah seperti berikut:

• Isnin
• Selasa
• Rabu
• Khamis

Jika kita hanya menggunakan jQuery untuk melaksanakan fungsi pada permulaan di atas, ia akan dilaksanakan seperti ini:

Salin kod

Kod adalah seperti berikut: $(dokumen).sedia(fungsi() { $("#katagori a").tuding(fungsi() {

            $(ini). bernyawa ({ paddingLeft: "20px" }, { queue: false, duration: 500 });                                  }, fungsi() {

           $(ini). bernyawa ({ paddingLeft: "0" }, { queue: true, duration: 500 });                                      });
});



Sekarang, kami merangkum fungsi dan menulisnya sebagai plugin.js, dan kemudian memautkannya dalam fail HTML:

Salin kod

Kod adalah seperti berikut:

(fungsi ($) {
$.fn.extend({
//Nama pemalam - paddingList
        senarai padding: fungsi (pilihan) {                         //Parameter dan nilai lalai
            var lalai = {                                                             animatePadding: 10,
hoverColor: "Hitam"
                                                                               pilihan var = $.lanjutkan (lalai, pilihan);                                        kembalikan ini.setiap (fungsi () {                                                                     var o = pilihan;                     //Tetapkan koleksi elemen kepada pembolehubah Dalam kes ini, ia adalah objek ul                 var obj = $(ini);                            //Dapatkan objek dalam ul
                var item = $("li a", obj);                          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             kepada items.hover(function () {
$(this).css("color", o.hoverColor);
//queue false bermaksud tidak menambah pada baris gilir animasi
                                $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
                       }, fungsi () {                                                                           $(this).css("warna", "");
                                                                        $(ini).animate({ paddingKiri: "0" }, { ration: true                  });                                             
             });                                                                                                                                                    });
})(jQuery);



Sudah tentu, pemalam pautan luaran juga memerlukan fail perpustakaan jquery asal src. Cara untuk memanggil pemalam adalah seperti berikut:




Salin kod


Kod adalah seperti berikut:


$(dokumen).sedia(fungsi() {
$("#catagory").PaddingList({ animatePadding: 30, hoverColor: "Merah" }); });