Bagaimana cara membuat fungsi jQuery (metode atau plugin jQuery baru)?

Saya tahu bahwa dalam JavaScript sintaksnya adalah sebagai berikut:

function myfunction(param){
  //some code
}

Apakah ada cara untuk mendeklarasikan fungsi di jQuery yang dapat ditambahkan ke elemen? Sebagai contoh:

$('#my_div').myfunction()

Dari Documents :

(function( $ ){
   $.fn.myfunction = function() {
      alert('hello world');
      return this;
   }; 
})( jQuery );

Lalu kamu lakukan

$('#my_div').myfunction();

Terlepas dari semua jawaban yang telah Anda terima, perlu dicatat bahwa Anda tidak perlu menulis plugin untuk menggunakan jQuery dalam suatu fungsi. Tentu saja jika ini adalah fungsi sederhana, satu kali, saya percaya menulis sebuah plugin berlebihan. Itu bisa dilakukan jauh lebih mudah dengan hanya menyerahkan pemilih ke fungsi sebagai parameter . Kode Anda akan terlihat seperti ini:

function myFunction($param) {
   $param.hide();  // or whatever you want to do
   ...
}

myFunction($('#my_div'));

Perhatikan bahwa $nama variabel $paramtidak diperlukan. Ini hanya kebiasaan saya untuk membuatnya mudah diingat bahwa variabel itu berisi pemilih jQuery. Anda bisa menggunakannya paramjuga.

Meskipun ada banyak dokumentasi / tutorial di luar sana, jawaban sederhana untuk pertanyaan Anda adalah ini:

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)

$.fn.myfunction = function () {
    // blah
};

Di dalam fungsi itu, thisvariabel sesuai dengan set dibungkus jQuery yang Anda panggil fungsi Anda. Jadi sesuatu seperti:

$.fn.myfunction = function () {
    console.log(this.length);
};

$('.foo').myfunction();

... akan menyiram jumlah elemen dengan kelas ke konsol foo.

Tentu saja, ada lebih banyak hal semantik dari itu (juga praktik terbaik, dan semua jazz itu), jadi pastikan Anda membacanya.

Untuk membuat fungsi tersedia pada objek jQuery Anda menambahkannya ke prototipe jQuery (fn adalah jalan pintas untuk prototipe di jQuery) seperti ini:

jQuery.fn.myFunction = function() {
    // Usually iterate over the items and return for chainability
    // 'this' is the elements returns by the selector
    return this.each(function() { 
         // do something to each item matching the selector
    }
}

Ini biasanya disebut plugin jQuery .

Contoh - http://jsfiddle.net/VwPrm/

Yup - yang Anda gambarkan adalah plugin jQuery.

Untuk menulis plugin jQuery, Anda membuat fungsi dalam JavaScript, dan menetapkannya ke properti pada objek jQuery.fn.

Misalnya

jQuery.fn.myfunction = function(param) {
    // Some code
}

Di dalam fungsi plugin Anda, thiskata kunci diatur ke objek jQuery tempat plugin Anda dipanggil. Jadi, ketika Anda melakukannya:

$('#my_div').myfunction()

Kemudian thisdi dalamnya myfunctionakan diatur ke objek jQuery yang dikembalikan oleh $('#my_div').

Lihat http://docs.jquery.com/Plugins/Authoring untuk cerita selengkapnya.

$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});

$(document).ready(function () {
    //call function
    $("#my_div").myfunction();
});

Anda juga dapat menggunakan extended (cara Anda membuat plugin jQuery):

$.fn.extend(
{
    myfunction: function () 
    {
    },

    myfunction2: function () 
    {
    }
});

Pemakaian:

$('#my_div').myfunction();

Anda dapat menulis plugin jQuery Anda sendiri (fungsi yang dapat dipanggil pada elemen yang dipilih) seperti di bawah ini:

(fungsi ($) {
    $ .fn.myFunc = fungsi (param1, param2) {
        // ini - objek jquery menampung elemen yang Anda pilih
    }
}) (jQuery);

Sebut saja nanti seperti:

$ ('div'). myFunc (1, null);

Ya, metode yang Anda terapkan pada elemen yang dipilih menggunakan jquery, disebut jquery plugins dan ada banyak info tentang penulisan dalam dokumen jquery.

Nilainya dicatat jquery yang adalah hanya javascript, sehingga tidak ada yang istimewa tentang "metode jquery".

Buat metode "mewarnai":

$.fn.colorize = function custom_colorize(some_color) {
    this.css('color', some_color);
    return this;
}

Gunakan:

$('#my_div').colorize('green');

Contoh sederhana-ish ini menggabungkan yang terbaik dari Cara Membuat Plugin Dasar di docs jQuery, dan jawaban dari @Candide , @ Michael .

• Sebuah bernama ekspresi fungsi dapat meningkatkan jejak stack, dll
• Metode khusus yang mengembalikan this dapat dirantai . (Terima kasih @Potheek.)

Anda selalu dapat melakukan ini:

jQuery.fn.extend({
   myfunction: function(param){
       // code here
   },
});
OR
jQuery.extend({
   myfunction: function(param){
       // code here
   },
});
$(element).myfunction(param);

Sepertinya Anda ingin memperluas objek jQuery melalui prototipe itu (alias menulis plugin jQuery ). Ini berarti bahwa setiap objek baru yang dibuat dengan memanggil fungsi jQuery ( $(selector/DOM element)) akan memiliki metode ini.

Ini adalah contoh yang sangat sederhana:

$.fn.myFunction = function () {
    alert('it works');
};

Demo

Contoh paling sederhana untuk membuat fungsi apa pun di jQuery adalah

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something here*/}