web-dev-qa-db-fra.com

Comment créer une fonction jQuery (une nouvelle méthode ou un plugin jQuery)?

Je sais qu'en JavaScript la syntaxe est la suivante:

function myfunction(param){
  //some code
}

Existe-t-il un moyen de déclarer une fonction dans jQuery pouvant être ajoutée à un élément? Par exemple:

$('#my_div').myfunction()
javascriptjqueryfunction
192
multimediaxp

De la Docs :

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

Alors vous faites

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

Malgré toutes les réponses que vous avez déjà reçues, il est utile de noter qu'il n'est pas nécessaire d'écrire un plugin pour utiliser jQuery dans une fonction. Certes, s’il s’agit d’une fonction simple et ponctuelle, j’estime que l’écriture d’un plugin est excessive. Cela pourrait être fait beaucoup plus facilement simplement en passant le sélecteur à la fonction en tant que paramètre. Votre code ressemblerait à quelque chose comme ça:

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

myFunction($('#my_div'));

Notez que le $ dans le nom de variable $param n'est pas requis. C'est une de mes habitudes que de rappeler facilement que cette variable contient un sélecteur jQuery. Vous pouvez aussi utiliser param

72
Pevara

Bien qu'il existe une pléthore documentation/tutoriels, la réponse simple à votre question est la suivante:

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

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

Dans cette fonction, la variable this correspond au jeu enveloppé jQuery sur lequel vous avez appelé votre fonction. Donc, quelque chose comme:

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

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

... va effacer à la console le nombre d'éléments avec la classe foo.

Bien sûr, il y a un peu plus dans la sémantique que cela (ainsi que dans les meilleures pratiques et tout ce jazz), alors assurez-vous de le lire.

38
Richard Neil Ilagan

Pour rendre une fonction disponible sur les objets jQuery, ajoutez-la au prototype de jQuery (fn est un raccourci pour le prototype dans jQuery) comme ceci:

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

Cela s'appelle généralement un plugin jQuery .

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

13
Richard Dalton

Yup - ce que vous décrivez est un plugin jQuery.

Pour écrire un plugin jQuery, vous créez une fonction en JavaScript, puis vous l'affectez à une propriété de l'objet jQuery.fn.

Par exemple.

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

Dans votre fonction de plug-in, le mot-clé this est défini sur l'objet jQuery sur lequel votre plug-in a été appelé. Alors, quand tu fais:

$('#my_div').myfunction()

Ensuite, this dans myfunction sera défini sur l'objet jQuery renvoyé par $('#my_div').

Voir http://docs.jquery.com/Plugins/Authoring pour l'histoire complète.

8
Paul D. Waite
$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});

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

Vous pouvez également utiliser extend (la façon dont vous créez les plugins jQuery):

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

    myfunction2: function () 
    {
    }
});

Usage:

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

Vous pouvez écrire vos propres plugins jQuery (fonction qui peut être appelée sur des éléments sélectionnés) comme ci-dessous:

(function ($) {
 $ .fn.myFunc = fonction (param1, param2) {
 // cet objet - jquery contient vos éléments sélectionnés 
} 
 }) (jQuery);


Appelez-le plus tard comme:

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

Oui, les méthodes que vous appliquez aux éléments sélectionnés à l'aide de jquery sont appelées plugins jquery et il y a ne bonne quantité d'informations sur la création dans les documents jquery.

Cela vaut la peine de noter que jquery est juste du javascript, il n’ya donc rien de spécial dans une "méthode jquery".

4
Jamiec

Vous pouvez toujours faire ça:

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

Créez une méthode "colorize":

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

Utilise le:

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

Cet exemple simple combine le meilleur de Comment créer un plugin de base dans la documentation jQuery et répond à partir de @ Candide , @ Michael .

2
Bob Stein

On dirait que vous voulez étendre l'objet jQuery via son prototype (alias écrire un plugin jQuery ). Cela signifierait que chaque nouvel objet créé en appelant la fonction jQuery ($(selector/DOM element)) aurait cette méthode.

Voici un exemple très simple:

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

démo

2
jbabey

L'exemple le plus simple pour créer une fonction dans jQuery est

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

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