Wie erstellt man eine jQuery-Funktion (eine neue jQuery-Methode oder ein neues jQuery-Modul)?

Question

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

function myfunction(param){ 
    //some code 
} 

Gibt es eine Möglichkeit, eine Funktion in jQuery zu deklarieren, die zu einem Element hinzugefügt werden können? Zum Beispiel:

$('#my_div').myfunction() 

Answer 1

Vom Docs:

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

Dann tun Sie

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

Answer 2

Ja, Methoden anwenden Sie Elemente ausgewählt mit Jquery werden Jquery Plugins genannt, und es gibt a good amount of info on authoring innerhalb der jquery docs.

Es ist bemerkenswert, dass jquery nur Javascript ist, so gibt es nichts Besonderes über eine "Jquery-Methode".

Answer 3

Yup - 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.

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

Innerhalb Plugin-Funktion, die this Schlüsselwort ist mit dem jQuery-Objekt festgelegt, auf dem das Plugin aufgerufen wurde. Also, wenn Sie das tun:

$('#my_div').myfunction() 

Dann this innerhalb myfunction wird das jQuery-Objekt von $('#my_div') zurück eingestellt werden.

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

Answer 4

Sie können Ihre eigene jQuery-Plugins (Funktion, die auf ausgewählte Elemente bezeichnet werden kann) schreiben wie unten:

(function($){ 
    $.fn.myFunc = function(param1, param2){ 
     //this - jquery object holds your selected elements 
    } 
})(jQuery);

Nennen Sie es später wie:

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

Answer 5

Zwar gibt es eine ist Plethora der Dokumentation/Tutorials da draußen, die einfache Antwort für Ihre Frage ist:

// 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 this Variable dem jQuery Wrapped-Satz, den Sie aufgerufen haben. So etwas wie:

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

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

... wird die Anzahl der Elemente mit der Klasse foo an die Konsole spülen.

Natürlich gibt es ein bisschen mehr zu Semantik als das (sowie Best Practices und all das Jazz), also stellen Sie sicher, dass Sie es lesen.

Answer 6

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

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

Answer 7

Es klingt wie Sie das jQuery-Objekt über seinen Prototyp (aka write a jQuery plugin) erweitern möchten. Dies würde bedeuten, dass jedes neue Objekt, das durch den Aufruf der jQuery-Funktion ($(selector/DOM element)) erstellt wird, über diese Methode verfügt.

Hier ist ein sehr einfaches Beispiel:

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

Demo

Answer 8

Um eine Funktion auf jQuery machen Objekte, die Sie es zum Prototyp jQuery hinzufügen (fn ist eine Abkürzung für Prototyp in jQuery) wie folgt aus :

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 jQuery plugin genannt.

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

Answer 9

Trotz aller Antworten, die Sie bereits erhalten haben, ist es erwähnenswert, dass Sie nicht über ein Plugin verwenden jQuery in einer Funktion schreiben müssen. Sicher, wenn es eine einfache, einmalige Funktion ist, glaube ich, dass das Schreiben eines Plugins übertrieben ist. Es könnte viel einfacher gemacht werden, indem man einfach den Selektor an die Funktion als Parameter übergibt. Ihr Code würde wie folgt aussehen:

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

myFunction($('#my_div')); 

Beachten Sie, dass die $ im Variablennamen $param ist nicht erforderlich. Es ist nur eine meiner Angewohnheiten, sich daran zu erinnern, dass diese Variable einen jQuery-Selektor enthält. Sie könnten auch param verwenden.

Answer 10

Sie können auch erweitern verwenden (die Art und Weise erstellen Sie jQuery Plugins):

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

    myfunction2: function() 
    { 
    } 
}); 

Verbrauch:

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

Answer 11

einfachstes Beispiel eine Funktion in jQuery zu machen ist

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

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

Answer 12

Erstellen Sie eine "Kolorieren" -Methode:

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

es verwenden:

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

Dieses einfache ish Beispiel das Beste aus How to Create a Basic Plugin in dem jQuery docs kombiniert und Antworten von @Candide, @Michael.

• Ein named function expression kann Stapelspuren usw. verbessern.Eine benutzerdefinierte Methode, die thismay be chained zurückgibt. (. Dank @Potheek)

Answer 13

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