Comment créer une fonction jQuery (une nouvelle méthode ou 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 qui peut être ajoutée à un élément? Par exemple:

$('#my_div').myfunction()

Depuis les documents :

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

Alors tu fais

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

Malgré toutes les réponses que vous avez déjà reçues, il convient de noter que vous n'avez pas besoin d'écrire un plugin pour utiliser jQuery dans une fonction. Certes, s'il s'agit d'une fonction simple et unique, je pense que l'écriture d'un plugin est exagérée. Cela pourrait être fait beaucoup plus facilement en passant simplement le sélecteur à la fonction en tant que paramètre . Votre code ressemblerait à ceci:

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

myFunction($('#my_div'));

Notez que le $dans le nom de variable $paramn'est pas requis. C'est juste une de mes habitudes pour qu'il soit facile de se rappeler que cette variable contient un sélecteur jQuery. Vous pouvez également l'utiliser param.

Bien qu'il existe une pléthore de 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
};

À l'intérieur de cette fonction, la thisvariable correspond à l'ensemble encapsulé jQuery sur lequel vous avez appelé votre fonction. Donc quelque chose comme:

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

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

... affichera sur 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 les meilleures pratiques et tout ce jazz), alors assurez-vous de le lire.

Pour rendre une fonction disponible sur les objets jQuery, vous l'ajoutez au prototype 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
    }
}

Ceci est généralement appelé un plugin jQuery .

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

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

Pour écrire un plugin jQuery, vous créez une fonction en JavaScript et l'assignez à une propriété sur l'objet jQuery.fn.

Par exemple

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

Dans votre fonction de plugin, le thismot clé est défini sur l'objet jQuery sur lequel votre plugin a été invoqué. Donc, quand vous le faites:

$('#my_div').myfunction()

Ensuite, thisinside myfunctionsera défini sur l'objet jQuery retourné par $('#my_div').

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

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

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

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

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

    myfunction2: function () 
    {
    }
});

Usage:

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

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

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

Appelez-le plus tard comme:

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

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

Il vaut la peine de noter que jquery est juste javascript, donc il n'y a rien de spécial à propos d'une "méthode jquery".

Créez une méthode de "colorisation":

$.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 les documents jQuery et les réponses de @Candide , @Michael .

• Une expression de fonction nommée peut améliorer les traces de pile, etc.
• Une méthode personnalisée qui retourne this peut être chaînée . (Merci @Potheek.)

Vous pouvez toujours faire ceci:

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

Il semble que vous souhaitiez étendre l'objet jQuery via son prototype (c'est-à-dire é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

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