Come creare una funzione jQuery (un nuovo metodo o plugin jQuery)?

So che in JavaScript la sintassi è la seguente:

function myfunction(param){
  //some code
}

C'è un modo per dichiarare una funzione in jQuery che può essere aggiunta a un elemento? Per esempio:

$('#my_div').myfunction()

Dai documenti :

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

Allora lo fai

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

Nonostante tutte le risposte che hai già ricevuto, vale la pena notare che non è necessario scrivere un plugin per usare jQuery in una funzione. Certamente se si tratta di una semplice funzione una tantum, credo che scrivere un plugin sia eccessivo. Potrebbe essere fatto molto più facilmente semplicemente passando il selettore alla funzione come parametro . Il tuo codice sarebbe simile a questo:

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

myFunction($('#my_div'));

Si noti che $nel nome della variabile $paramnon è richiesto. È solo una mia abitudine rendere facile ricordare che quella variabile contiene un selettore jQuery. Potresti anche usare paramanche tu .

Mentre c'è una pletora di documentazione / tutorial là fuori, la semplice risposta alla tua domanda è questa:

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

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

All'interno di quella funzione, la thisvariabile corrisponde al set di jQuery su cui hai chiamato la tua funzione. Quindi qualcosa come:

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

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

... scaricherà sulla console il numero di elementi con la classe foo.

Certo, c'è un po 'di più nella semantica di quello (così come le migliori pratiche e tutto quel jazz), quindi assicurati di leggere su di esso.

Per rendere disponibile una funzione sugli oggetti jQuery, la si aggiunge al prototipo jQuery (fn è un collegamento per il prototipo in jQuery) in questo modo:

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
    }
}

Questo di solito è chiamato un plugin jQuery .

Esempio: http://jsfiddle.net/VwPrm/

Sì, quello che stai descrivendo è un plugin jQuery.

Per scrivere un plugin jQuery, si crea una funzione in JavaScript e la si assegna a una proprietà sull'oggetto jQuery.fn.

Per esempio

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

All'interno della funzione del plug-in, la thisparola chiave è impostata sull'oggetto jQuery su cui è stato invocato il plug-in. Quindi, quando lo fai:

$('#my_div').myfunction()

Quindi thisinside myfunctionverrà impostato sull'oggetto jQuery restituito da $('#my_div').

Vedi http://docs.jquery.com/Plugins/Authoring per la storia completa.

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

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

Puoi anche usare ext (il modo in cui crei plugin jQuery):

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

    myfunction2: function () 
    {
    }
});

Uso:

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

Puoi scrivere i tuoi plugin jQuery (funzione che può essere chiamata su elementi selezionati) come di seguito:

(funzione ($) {
    $ .fn.myFunc = function (param1, param2) {
        // this - l'oggetto jquery contiene gli elementi selezionati
    }
}) (jQuery);

Chiamalo più tardi come:

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

Sì, i metodi che applichi agli elementi selezionati usando jquery, sono chiamati plug-in jquery e c'è una buona quantità di informazioni sulla creazione nei documenti jquery.

Vale la pena notare che jquery è solo javascript, quindi non c'è nulla di speciale in un "metodo jquery".

Crea un metodo "colorize":

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

Usalo:

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

Questo semplice esempio-ish combina il meglio di Come creare un plugin di base nella documentazione jQuery e risposte da @Candide , @ Michael .

• Un'espressione di una funzione denominata può migliorare le tracce di stack, ecc
• Un metodo personalizzato che restituisce this può essere concatenato . (Grazie @Potheek.)

Puoi sempre farlo:

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

Sembra che tu voglia estendere l'oggetto jQuery tramite il suo prototipo (ovvero scrivere un plugin jQuery ). Ciò significherebbe che ogni nuovo oggetto creato tramite la chiamata alla funzione jQuery ( $(selector/DOM element)) avrebbe questo metodo.

Ecco un esempio molto semplice:

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

dimostrazione

L'esempio più semplice per eseguire qualsiasi funzione in jQuery è

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

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