Wie erstelle ich eine jQuery-Funktion (eine neue jQuery-Methode oder ein neues Plugin)?

Ich weiß, dass die Syntax in JavaScript wie folgt lautet:

function myfunction(param){
  //some code
}

Gibt es eine Möglichkeit, eine Funktion in jQuery zu deklarieren, die einem Element hinzugefügt werden kann? Beispielsweise:

$('#my_div').myfunction()

Aus den Dokumenten :

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

Dann tust du es

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

Trotz aller Antworten, die Sie bereits erhalten haben, ist es erwähnenswert, dass Sie kein Plugin schreiben müssen, um jQuery in einer Funktion zu verwenden. Wenn es sich um eine einfache, einmalige Funktion handelt, halte ich das Schreiben eines Plugins für übertrieben. Dies könnte viel einfacher geschehen, indem der Selektor einfach als Parameter an die Funktion übergeben wird . Ihr Code würde ungefähr so ​​aussehen:

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

myFunction($('#my_div'));

Beachten Sie, dass der $Name der Variablen $paramnicht erforderlich ist. Es ist nur eine Gewohnheit von mir, sich leicht daran zu erinnern, dass diese Variable einen jQuery-Selektor enthält. Sie könnten genauso paramgut verwenden.

Es gibt zwar eine Vielzahl von Dokumentationen / Tutorials, aber die einfache Antwort auf Ihre Frage lautet:

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

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

Innerhalb dieser Funktion thisentspricht die Variable der von jQuery umschlossenen Menge, für die Sie Ihre Funktion aufgerufen haben. Also so etwas wie:

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

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

... spült die Anzahl der Elemente mit der Klasse in die Konsole foo.

Natürlich hat die Semantik ein bisschen mehr zu bieten (als auch Best Practices und all diesen Jazz). Lesen Sie sie also unbedingt durch.

Um eine Funktion für jQuery-Objekte verfügbar zu machen, fügen Sie sie dem jQuery-Prototyp hinzu (fn ist eine Verknüpfung für den Prototyp in jQuery).

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

Dies wird normalerweise als jQuery-Plugin bezeichnet .

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

Ja - was Sie beschreiben, ist ein jQuery-Plugin.

Um ein jQuery-Plugin zu schreiben, erstellen Sie eine Funktion in JavaScript und weisen sie einer Eigenschaft für das Objekt zu jQuery.fn.

Z.B

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

Innerhalb Ihrer Plugin-Funktion wird das thisSchlüsselwort auf das jQuery-Objekt gesetzt, für das Ihr Plugin aufgerufen wurde. Also, wenn Sie tun:

$('#my_div').myfunction()

Dann wird thisinside myfunctionauf das von zurückgegebene jQuery-Objekt gesetzt $('#my_div').

Die vollständige Geschichte finden Sie unter http://docs.jquery.com/Plugins/Authoring .

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

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

Sie können auch expand verwenden (die Art, wie Sie jQuery-Plugins erstellen):

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

    myfunction2: function () 
    {
    }
});

Verwendung:

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

Sie können Ihre eigenen jQuery-Plugins (Funktion, die für ausgewählte Elemente aufgerufen werden kann) wie folgt schreiben:

(Funktion ($) {
    $ .fn.myFunc = Funktion (param1, param2) {
        // this - jquery object enthält Ihre ausgewählten Elemente
    }}
}) (jQuery);

Nennen Sie es später wie:

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

Ja, Methoden, die Sie auf Elemente anwenden, die mit jquery ausgewählt wurden, werden als jquery-Plugins bezeichnet, und in den jquery-Dokumenten finden Sie zahlreiche Informationen zum Authoring .

Es lohnt sich, dass Jquery Bemerkens ist nur Javascript, so dass es nichts Besonderes an einem „jquery - Methode“ ist.

Erstellen Sie eine "Kolorierungs" -Methode:

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

Benutze es:

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

Dieses einfache Beispiel kombiniert das Beste aus dem Erstellen eines Basis-Plugins in den jQuery-Dokumenten und die Antworten von @Candide , @Michael .

• Ein benannter Funktionsausdruck kann Stapelspuren usw. verbessern.
• Eine benutzerdefinierte Methode, die zurückgibt, this kann verkettet sein . (Danke @Potheek.)

Sie können dies immer tun:

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

Es hört sich so an, als ob Sie das jQuery-Objekt über seinen Prototyp erweitern möchten (auch bekannt als Schreiben eines jQuery-Plugins ). Dies würde bedeuten, dass jedes neue Objekt, das durch Aufrufen der jQuery-Funktion ( $(selector/DOM element)) erstellt wurde, über diese Methode verfügt.

Hier ist ein sehr einfaches Beispiel:

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

Demo

Das einfachste Beispiel für die Erstellung einer Funktion in jQuery ist

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

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