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

Question

So che in JavaScript sintassi è la seguente:

function myfunction(param){ 
    //some code 
} 

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

$('#my_div').myfunction() 

Answer 1

Dal Docs:

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

poi si fa

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

Answer 2

Sì, metodi che si applicano agli elementi selezionati utilizzando jQuery, sono chiamati i plugin jQuery e c'è a good amount of info on authoring entro i docs jQuery.

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

Answer 3

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

Per scrivere un plug-in jQuery, creare una funzione in JavaScript e assegnarla a una proprietà sull'oggetto jQuery.fn.

E.g.

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

Entro la funzione plug-in, la parola chiave this è impostato per l'oggetto jQuery sul quale è stato invocato il plugin. Così, quando si esegue:

$('#my_div').myfunction() 

Poi this all'interno myfunction sarà impostato all'oggetto jQuery restituito da $('#my_div').

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

Answer 4

È possibile scrivere i propri plugin jQuery (funzione che può essere chiamato su elementi selezionati) come di seguito:

(function($){ 
    $.fn.myFunc = function(param1, param2){ 
     //this - jquery object holds your selected elements 
    } 
})(jQuery);

Chiamatela in seguito come:

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

Answer 5

Mentre v'è una plethora di documentazione/tutorial là fuori, la risposta semplice per la 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 tale funzione, la variabile this corrisponde al set jQuery wrapped su cui è stata definita la funzione. Quindi, qualcosa di simile a:

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

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

... a filo alla console il numero di elementi con la classe foo.

Naturalmente, c'è un po 'più di semantica di quello (così come le migliori pratiche, e tutto ciò che jazz), quindi assicuratevi di leggere su di esso.

Answer 6

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

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

Answer 7

Sembra che si desidera estendere l'oggetto jQuery tramite esso prototipo (aka write a jQuery plugin). Ciò significherebbe che ogni nuovo oggetto creato attraverso la chiamata alla funzione jQuery ($(selector/DOM element)) avrebbe questo metodo.

Ecco un esempio molto semplice:

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

Demo

Answer 8

Per effettuare una funzione disponibile per jQuery oggetti lo si aggiunge al prototipo jQuery (fn è una scorciatoia per il prototipo in jQuery) come questo :

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 è solitamente chiamato jQuery plugin.

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

Answer 9

A dispetto di tutte le risposte che già ricevuto, vale la pena notare che non c'è bisogno di scrivere un plugin per utilizzare jQuery in una funzione. Sicuramente se si tratta di una funzione semplice, una tantum, credo che scrivere un plugin sia eccessivo. Potrebbe essere fatto molto più facilmente da solo passando il selettore alla funzione come parametro. Il tuo codice sarebbe simile a questa:

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

myFunction($('#my_div')); 

Nota che il $ nel nome della variabile $param non è necessaria. È solo mia abitudine ricordare che quella variabile contiene un selettore jQuery. Potresti usare anche param.

Answer 10

È inoltre possibile utilizzare estendere (il modo in cui si creano i plugin jQuery):

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

    myfunction2: function() 
    { 
    } 
}); 

Usage:

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

Answer 11

più semplice esempio per effettuare qualsiasi funzione in jQuery è

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

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

Answer 12

Creare un metodo "colorize":

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

usarlo:

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

Questo semplice esempio-ish combina il meglio della How to Create a Basic Plugin nella documentazione jQuery e risposte da @Candide, @Michael.

• A named function expression può migliorare le tracce di stack, ecc.
• Un metodo personalizzato che restituisce thismay be chained. (. Grazie @Potheek)

Answer 13

Si può sempre fare questo:

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