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

malgré toutes les réponses que vous avez déjà reçues, il est intéressant de noter que vous n'avez pas besoin d'écrire un plugin pour utiliser jQuery dans une fonction. Certainement si c'est une fonction simple et ponctuelle, je crois 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 comme paramètre . Votre code ressemblerait à quelque chose comme ceci:

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

myFunction($('#my_div'));

noter que le $ dans le nom de la variable $param n'est pas requis. C'est juste une habitude pour moi de faire en sorte qu'il soit facile de se rappeler que cette variable contient un sélecteur jQuery. Vous pouvez aussi utiliser param .

bien qu'il y ait une plethora de documentation / tutoriels là-bas, 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 variable this correspond à l'ensemble enveloppé jQuery sur lequel vous avez appelé votre fonction. Donc quelque chose comme:

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

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

... renvoie à la console le nombre d'éléments de la classe foo .

bien sûr, là un peu plus à la sémantique que cela (ainsi que les meilleures pratiques, et tout ce jazz), alors assurez-vous de lire.

pour rendre une fonction disponible sur les objets jQuery, vous l'ajoutez au prototype jQuery (fn est un raccourci pour prototype en 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 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 .

E. G.

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

dans votre fonction de plugin, le mot-clé this est défini à l'objet jQuery sur lequel votre plugin a été invoqué. Donc, quand vous faites:

$('#my_div').myfunction()

puis this inside myfunction sera défini à l'objet jQuery retourné par $('#my_div') .

voir http://docs.jquery.com/Plugins/Authoring pour toute l'histoire.

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

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

Oui, les méthodes à appliquer aux éléments sélectionnés à l'aide de jquery, sont appelés plugins jquery, et il est une bonne quantité d'informations sur la création d' au sein de l'jquery docs.

il est intéressant de noter que jquery est javascript, donc il n'y a rien de spécial au sujet d'une "méthode jquery".

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 = function(param1, param2){
        //this - jquery object holds your selected elements
    }
})( jQuery );

Appelez plus tard comme:

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

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

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

    myfunction2: function () 
    {
    }
});

Utilisation:

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

Vous pouvez toujours faire ceci:

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

on dirait que vous voulez étendre l'objet jQuery via son prototype (alias écrivez 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 faire n'importe quelle fonction dans jQuery est

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

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

créer une méthode" coloriser":

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

Utiliser:

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

cet exemple simple combine le meilleur de comment créer un Plugin de base dans les docs jQuery, et les réponses de @Candide , @Michael .

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