it-swarm.com.de

Wie erstelle ich eine jQuery-Funktion (eine neue jQuery-Methode oder ein 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? Zum Beispiel:

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

Aus dem Docs :

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

Dann tust du es

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

Trotz aller Antworten, die Sie bereits erhalten haben, müssen Sie kein Plugin schreiben, 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. Es könnte viel einfacher gemacht werden, indem man einfach den Selektor an die Funktion als Parameter übergibt. 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 $ im Variablennamen $param nicht erforderlich ist. Es ist nur eine Gewohnheit von mir, sich leicht daran zu erinnern, dass diese Variable einen jQuery-Selektor enthält. Sie können auch param verwenden.

72
Pevara

Obwohl es eineFüllean Dokumentation/Tutorials gibt, lautet die einfache Antwort auf Ihre Frage:

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

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

Innerhalb dieser Funktion entspricht die Variable this der in jQuery eingeschlossenen 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 foo in die Konsole.

Natürlich hat die Semantik ein bisschen mehr zu bieten (ebenso wie bewährte Praktiken und all diesen Jazz). Lesen Sie also unbedingt weiter.

38

Um eine Funktion für jQuery-Objekte verfügbar zu machen, fügen Sie sie dem jQuery-Prototyp hinzu (fn ist eine Abkürzung 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/

13
Richard Dalton

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 jQuery.fn zu.

Z.B.

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

In Ihrer Plugin-Funktion wird das Schlüsselwort this auf das jQuery-Objekt gesetzt, für das Ihr Plugin aufgerufen wurde. Also, wenn du tust:

$('#my_div').myfunction()

Dann wird this in myfunction auf das von $('#my_div') zurückgegebene jQuery-Objekt gesetzt.

Siehe http://docs.jquery.com/Plugins/Authoring für die ganze Geschichte.

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

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

Sie können auch extend (wie Sie jQuery-Plugins erstellen) verwenden:

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

    myfunction2: function () 
    {
    }
});

Verwendungszweck:

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

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

(function ($) {
 $ .fn.myFunc = function (param1, param2) {
 // Dieses Abfrageobjekt enthält Ihre ausgewählten Elemente 
} 
 }) (jQuery);


Nennen Sie es später wie folgt:

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

Ja, Methoden, die Sie auf Elemente anwenden, die mit jquery ausgewählt wurden, werden als jquery-Plug-ins bezeichnet, und die jquery-Dokumente enthalten viele Informationen zum Authoring .

Es ist erwähnenswert, dass jquery nur Javascript ist, so dass eine "jquery-Methode" nichts Besonderes ist.

4
Jamiec

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);
3
user8903269

Erstellen Sie eine "colorize" -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 So erstellen Sie ein Basis-Plugin in den jQuery-Dokumenten und den Antworten von @ Candide , @ Michael .

2
Bob Stein

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

Hier ist ein sehr einfaches Beispiel:

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

Demo

2
jbabey

Das einfachste Beispiel für die Erstellung von Funktionen in jQuery ist

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

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