Bagaimana untuk menambah kaedah tersuai dalam jQuery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menambah kaedah tersuai dalam jQuery

PHPz

Lepaskan： 2023-04-11 09:32:18

asal

1244 orang telah melayarinya

Dengan pembangunan berterusan teknologi hadapan, semakin banyak laman web mula menggunakan kesan dinamik untuk memperkayakan antara muka pengguna. jQuery ialah perpustakaan JavaScript yang sangat popular yang memudahkan manipulasi DOM, acara, AJAX, dll., dan menyediakan banyak kaedah dan fungsi yang mudah untuk mencipta kesan dinamik dengan cepat. Atas dasar ini, jQuery membenarkan pengguna menambah kaedah tersuai untuk memanggil dengan cepat apabila diperlukan. Artikel ini akan memperkenalkan cara menambah kaedah tersuai dalam jQuery.

1. Apakah kaedah tersuai jQuery?

Kaedah tersuai jQuery bermakna pembangun menggunakan kaedah jQuery.fn.extend() untuk menambah fungsi tersuai pada objek jQuery. Kaedah jQuery.fn.extend() menggabungkan kandungan satu atau lebih objek ke dalam objek sasaran. Objek sasaran di sini ialah jQuery.fn, objek prototaip jQuery, yang dikongsi oleh semua contoh jQuery. Oleh itu, sebaik sahaja anda menambah fungsi tersuai pada jQuery.fn, semua contoh jQuery boleh menggunakannya dengan memanggil fungsi ini.

2. Cara menambah kaedah tersuai

Untuk menambah kaedah tersuai dalam jQuery, anda boleh mengikuti langkah berikut:

Pertama, tulis fungsi tersuai. Fungsi ini boleh melengkapkan fungsi yang diperlukan dan menerima beberapa parameter. Di sini, kami mentakrifkan fungsi mudah yang boleh menukar kandungan teks sekumpulan elemen kepada huruf besar:

function toUpperCase() {
    return this.each(function () {
        var text = $(this).text();
        $(this).text(text.toUpperCase());
    });
}

Salin selepas log masuk

Fungsi ini menggunakan setiap kaedah yang disediakan oleh jQuery dan berulang melalui setiap elemen yang memanggilnya elemen dan menukarkan teks setiap elemen kepada semua huruf besar.

2. Tambahkan kaedah tersuai

Seterusnya, gunakan kaedah jQuery.fn.extend() untuk menambah fungsi tersuai pada objek jQuery. Katakan anda ingin menamakan fungsi tersuai "toUpperCase", anda boleh menulisnya seperti ini:

$.fn.extend({
    toUpperCase: function () {
        return this.each(function () {
            var text = $(this).text();
            $(this).text(text.toUpperCase());
        });
    }
});

Salin selepas log masuk

Kaedah jQuery.fn.extend() digunakan di sini dan objek literal dihantar masuk. Ini literal objek bermula dengan "toUpperCase" ialah kuncinya, dan fungsi tersuai yang ditulis sebelum ini diluluskan dalam nilai. Dengan cara ini, kami telah berjaya menambah kaedah tersuai pada jQuery.

3. Cara memanggil kaedah tersuai

Selepas menambah kaedah tersuai, kita boleh memanggilnya seperti kaedah jQuery yang lain. Katakan kita mempunyai halaman HTML berikut:

<body>
    <div class="content">
        <h2>Hello, world!</h2>
        <p>This is a paragraph.</p>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
        </ul>
    </div>
</body>

Salin selepas log masuk

Sekarang kita mahu menukar semua kandungan teks dalam elemen dengan kelas "kandungan" kepada huruf besar, yang boleh ditulis seperti ini:

$(".content").toUpperCase();

Salin selepas log masuk

Panggilan ini akan menukar kandungan teks "Helo, dunia!", "Ini ialah perenggan dan semua item senarai menjadi huruf besar."

4. Ringkasan

Artikel ini memperkenalkan cara menambah kaedah tersuai dalam jQuery. Mula-mula, kami menulis fungsi tersuai dan kemudian menambahnya pada objek jQuery menggunakan kaedah jQuery.fn.extend(). Akhir sekali, kami menunjukkan cara memanggil kaedah tersuai dan melaksanakan beberapa fungsi mudah. Melalui kaedah ini, kami boleh menambah lebih banyak kaedah tersuai pada jQuery untuk membangunkan halaman web dinamik dengan lebih mudah dan cepat.

Atas ialah kandungan terperinci Bagaimana untuk menambah kaedah tersuai dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!