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

So che in JavaScript la syntax è 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. Sicuramente se si tratta di una funzione semplice, 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 $param non è richiesto. È solo mia abitudine ricordare che quella variabile contiene un selettore jQuery. Potresti usare anche param .

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 questa funzione, this variabile corrisponde al set jQuery avvolto su cui hai chiamato la tua funzione. Quindi qualcosa come:

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

… arriverà alla console il numero di elementi con la class foo .

Certo, c’è un po ‘più di semantica di quello (così come le migliori pratiche, e tutto quel jazz), quindi assicurati di leggerlo.

Per rendere una funzione disponibile su oggetti jQuery, aggiungila al prototipo jQuery (fn è una scorciatoia per il prototipo in jQuery) come questa:

 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 un plugin jQuery .

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

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

Per scrivere un plugin jQuery, devi creare una funzione in JavaScript e assegnarla a una proprietà sull’object jQuery.fn .

Per esempio

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

All’interno della funzione di plugin, la parola chiave this è impostata sull’object jQuery su cui è stato richiamato il plug-in. Quindi, quando lo fai:

 $('#my_div').myfunction() 

Quindi this myfunction interna verrà impostata sull’object jQuery restituito da $('#my_div') .

Vedi http://docs.jquery.com/Plugins/Authoring per l’intera storia.

 $(function () { //declare function $.fn.myfunction = function () { return true; }; }); $(document).ready(function () { //call function $("#my_div").myfunction(); }); 

Sì, i metodi applicati agli elementi selezionati con jquery sono chiamati plug-in jquery e vi è una buona quantità di informazioni sulla creazione all’interno dei documenti jquery.

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

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

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

Chiamalo più tardi come:

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

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

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

Uso:

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

Puoi sempre fare questo:

 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’object jQuery tramite il suo prototipo (ovvero scrivere un plugin jQuery ). Ciò significherebbe che ogni nuovo object creato attraverso 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 fare qualsiasi funzione in jQuery è

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){/*do something here*/} 

Crea un metodo “colorsze”:

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

Usalo:

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

Questo semplice esempio combina il meglio di Come creare un plug- in di base nei documenti jQuery e le risposte di @Candide , @Michael .

  • Un’espressione di funzione con nome può migliorare le tracce dello stack, ecc.
  • Un metodo personalizzato che restituisce this può essere incatenato . (Grazie a @Potheek.)