20 hilfreiche jQuery-Methoden, die Sie verwenden sollten

() translation by (you can also view the original English article)

Sie spielen also schon seit einiger Zeit mit jQuery, Sie bekommen den Dreh raus und Sie mögen es wirklich! Sind Sie bereit, Ihr jQuery-Wissen auf Stufe zwei zu bringen? Heute zeige ich Ihnen 20 Funktionen und Funktionen, die Sie wahrscheinlich noch nicht gesehen haben!

1 nach() / vorher()

Manchmal möchten Sie etwas in das DOM einfügen, aber Sie haben keine guten Haken, um dies zu tun. append() oder prepend() werden es nicht schneiden und Sie möchten kein zusätzliches Element oder eine zusätzliche ID hinzufügen. Diese beiden Funktionen könnten Sie benötigen. Sie ermöglichen das Einfügen von Elementen in das DOM unmittelbar vor oder nach einem anderen Element. Das neue Element ist also ein Bruder des älteren Elements.

1
2	$('#child').after($('<p />')).text('This becomes a sibling of #child'));
3	$('#child').before($('<p />')).text('Same here, but this is go about #child'));

Sie können dies auch tun, wenn Sie hauptsächlich mit dem Element arbeiten, das Sie einfügen möchten. Verwenden Sie einfach die Funktionen insertAfter() oder insertBefore.

1
2	$('<p>I\'ll be a sibling of #child</p>').insertAfter($('#child'));

2 change()

Die change() -Methode ist ein Event-Handler, genau wie click() oder hover(). Das Änderungsereignis gilt für Textbereiche, Texteingaben und Auswahlfelder und wird ausgelöst, wenn der Wert des Zielelements geändert wird. Beachten Sie, dass sich dies von den Ereignisprozeduren focusOut() oder blur() unterscheidet, die ausgelöst werden, wenn das Element den Fokus verliert, unabhängig davon, ob sich sein Wert geändert hat.

Das change() -Ereignis ist perfekt für die clientseitige Validierung. Es ist viel besser als blur(), da Sie die Felder nicht erneut überprüfen, wenn der Benutzer den Wert nicht ändert.


$('input[type=text]').change(function () {
    switch (this.id) {
        /* some validation code here */
    }
});​​​​​​​​​​

3 Kontext

Kontext ist sowohl ein Parameter als auch eine Eigenschaft in jQuery. Beim Sammeln von Elementen können Sie einen zweiten Parameter an die jQuery-Funktion übergeben. Dieser Parameter, der Kontext, ist normalerweise ein DOM-Element und beschränkt die zurückgegebenen Elemente auf Elemente, die mit Ihrem Selektor übereinstimmen, der dem Kontextelement untergeordnet ist. Das hört sich vielleicht etwas verwirrend an, also schauen Sie sich dieses Beispiel an:


<p class="hello">Hello World</p>
<div id="wrap">
    <p class="hello">Hello World</p>
</div>


var hi1 = $('.hello'),
    hi2 = $('.hello', $('#wrap').get(0));

console.group('hi1');
console.log("Number of elements in collection:", hi1.length);
console.log("Context of the collection:", hi1.context);
console.groupEnd();
console.group('hi2');
console.log("Number of elements in collection:", hi2.length);
console.log("Context of the collection:", hi2.context);
console.groupEnd();

Wo wäre das nützlich? Eine Stelle könnte sich innerhalb einer Event-Handler-Funktion befinden. Wenn Sie ein Element innerhalb des Elements erhalten möchten, auf das das Ereignis ausgelöst wurde, können Sie this als Kontext übergeben:

1
2	$('ul#options li').click(function () {
3	$('a', this) . . .
4	});

4 data() / removeData()

Wollten Sie schon immer ein paar Informationen zu einem Element speichern? Mit der data() -Methode ist das problemlos möglich. Um einen Wert festzulegen, können Sie zwei Parameter (einen Schlüssel und einen Wert) oder nur einen (ein Objekt) übergeben.

1
2	$('#wrap').data('myKey', 'myValue');
3	$('#container').data({ myOtherKey : 'myOtherValue', year : 2010 });

Um Ihre Daten zurückzubekommen, rufen Sie einfach die Methode mit dem gewünschten Wertschlüssel auf.

1
2	$('#container').data('myOtherKey'); //returns 'myOtherValue'
3	$('#container').data('year'); //returns 2010

Um alle Daten zu erhalten, die einem Element entsprechen, rufen Sie die Daten ohne Parameter auf. Sie erhalten ein Objekt mit allen Schlüsseln und Werten, die Sie diesem Objekt zugewiesen haben.
Wenn Sie ein Schlüssel / Wert-Paar löschen möchten, nachdem Sie es einem Element hinzugefügt haben, rufen Sie removeData() auf und übergeben den richtigen Schlüssel.

1
2	$('#container').removeData('myOtherKey');

5 queue() / dequeue()

Die Funktionen queue() und dequeue() befassen sich mit Animationen. Eine Warteschlange ist eine Liste von Animationen, die für ein Element ausgeführt werden sollen. Standardmäßig heißt die Warteschlange eines Elements "fx". Lassen Sie uns ein Szenario einrichten:

HTML


<ul>
  <li id="start">Start Animating</li>
  <li id="reset">Stop Animating</li>
  <li id="add">Add to Queue</li>
</ul>
<div style="width:150px; height:150px; background:#ececec;"></div>

JavaScript


$('#start').click(animateBox);

$('#reset').click(function() {
    $('div').queue('fx', []);
});

$('#add').click(function() {
    $('div').queue( function(){
        $(this).animate({ height : '-=25'}, 2000);
        $(this).dequeue();
    });
});

function animateBox() {
  $('div').slideUp(2000)
           .slideDown(2000)
           .hide(2000)
           .show(2000, animateBox);
}

Hier ist also Folgendes: In der animateBox-Funktion richten wir eine Warteschlange mit Animationen ein. Beachten Sie, dass der letzte zur Funktion zurückruft, sodass die Warteschlange fortlaufend wiederholt wird. Wenn wir auf li#start klicken, wird die Funktion aufgerufen und die Warteschlange beginnt. Wenn wir auf li#reset klicken, wird die aktuelle Animation beendet und das div beendet die Animation. Mit jQuery haben wir die Warteschlange 'fx' (erinnern Sie sich an die Standardwarteschlange) auf ein leeres Array gesetzt. Im Wesentlichen haben wir die Warteschlange geleert. Und wie sieht es aus, wenn wir auf li#add klicken? Zuerst rufen wir die queue funktion für das div auf. Dadurch wird die Funktion, die wir übergeben, an das Ende der Warteschlange angehängt. da wir keine Warteschlange als ersten Parameter angegeben haben, wird 'fx' verwendet. In dieser Funktion animieren wir das div und rufen dann dequeue() für das div auf, wodurch diese Funktion aus der Warteschlange entfernt und die Warteschlange fortgesetzt wird. Die Warteschlange wird wiederholt, aber diese Funktion ist nicht Teil der Warteschlange.

6 delay()

Wenn Sie eine Kette von Animationen in die Warteschlange stellen, können Sie die delay() -Methode verwenden, um die Animation für längere Zeit anzuhalten. Diese Zeit als Parameter in Millisekunden übergeben.

1
2	$('div').hide().delay(2000).show(); // div will stay hidden for 2 seconds before showing.

7 bind(), unbind(), live(), and die()

Wussten Sie das, wenn Sie einem Element wie diesem ein Klickereignis hinzufügen. . .

1
2	$('#el').click(function () { /*******/ });

. . . Sie verwenden wirklich nur einen Wrapper für die bind() -Methode? Um die bind() -Methode selbst zu verwenden, können Sie den Ereignistyp als ersten Parameter und dann die Funktion als zweiten übergeben.

Wenn Sie viele Ereignisse verwenden, können Sie sie mit dem Namensraum kategorisieren. Fügen Sie einfach einen Punkt nach dem Ereignisnamen hinzu und fügen Sie Ihren Namespace hinzu.

1
2	$('#el').bind('click', function () { /*******/ });
3	$('#el').bind('click.toolbarEvents', function () { /*******/ }); // namespaced

Sie können dieselbe Funktion auch mehreren Ereignissen gleichzeitig zuweisen, indem Sie sie durch Leerzeichen voneinander trennen. Wenn Sie also einen Hover-Effekt erzeugen möchten, können Sie folgendermaßen beginnen:

1
2	$('#el').bind('mouseover mouseout', function () { /*******/ });

Sie können auch Daten an die Funktion übergeben, wenn Sie möchten, indem Sie einen dritten Parameter hinzufügen (an zweiter Stelle).


$('#el').bind('click', { status : 'user-ready' }, function () {
    switch(event.data.status) {
    /********/
    }
});

Früher oder später werden Sie über einen Event-Handler ein Element in das DOM einfügen. Sie werden jedoch feststellen, dass die Event-Handler, die Sie mit bind (oder deren Wrappern) erstellt haben, für eingefügte Elemente nicht funktionieren. In solchen Fällen müssen Sie die Methode live() (oder delegate) verwenden. Dadurch werden die Event-Handler zu den entsprechenden eingefügten Elementen hinzugefügt.


$('.toggle').live(function () {
    /* code */
    $('<span class="toggle">Enable Beta Features</span>').appendTo($('#optionsPanel'));
    /* more code */
});

Verwenden Sie zum Entfernen von mit bind() erstellten Ereignishandlern die Methode unind(). Wenn Sie keine Parameter übergeben, werden alle Handler entfernt. Sie können den Ereignistyp übergeben, um nur Ereignishandler dieses Typs zu entfernen. Um Ereignisse aus einem bestimmten Namespace zu entfernen, fügen Sie den Namespace hinzu oder verwenden Sie ihn alleine. Wenn Sie nur eine bestimmte Funktion entfernen möchten, übergeben Sie ihren Namen als zweiten Parameter.


$('button').unbind(); // removes all
$('button').unbind('click'); // removes all clicks
$('button').unbind('.toolbarEvents'); // removes all events from the toolbarEvents namespace
$('button').unbind('click.toolbarEvents'); // removes all clicks from the toolbarEvents namespace
$('button').unbind('click', myFunction); // removes that one handler

Beachten Sie, dass Sie Funktionen, die Sie anonym übergeben haben, binden / aufheben können. Dies funktioniert nur mit dem Funktionsnamen.
Wenn Sie versuchen, ein Ereignis aus der von dem Ereignis aufgerufenen Funktion zu lösen, übergeben Sie das event objekt unbind().

1
2	$('p').bind('click', function (event) {
3	$('p').unbind(event);
4	} );

Sie können unbind() nicht für live-Events verwenden. Verwenden Sie stattdessen den die(). Ohne Parameter werden alle live-Events aus der Elementsammlung entfernt. Sie können auch nur den Ereignistyp, den Ereignistyp und die Funktion übergeben.

1
2	$('span').die(); // removes all
3	$('span').die('mouseover'); // removes all mouseovers
4	$('span').die('mouseover', fn); // remove that one handler

Und jetzt können Sie jQuery-Events mit Geschick und Kraft ausführen!

Sie sollten auch die delegate() -Methode überprüfen, da die Verwendung dieser Methode im Vergleich zu live() erhebliche Leistungsvorteile bieten kann.

8 eq()

Wenn Sie nach einem bestimmten Element in einer Gruppe von Elementen suchen, können Sie den Index des Elements an die eq() - Methode übergeben und ein einzelnes jQuery-Element abrufen. Übergeben Sie einen negativen Index, um vom Ende des Satzes zurückzuzählen.

1
2	var ps = $('p');
3	console.log(ps.length); // logs 3;
4	ps.eq(1).addClass('emphasis'); // just adds the class to the second item (index in zero-based)

Sie können auch Folgendes verwenden: eq() in Ihren Selektoren; so könnte das vorige Beispiel so gemacht worden sein:

1
2	$('p:eq(1)').addClass('emphasis');

9 get()

Wenn Sie eine Elementgruppe abrufen, gibt jQuery diese als jQuery-Objekt zurück, sodass Sie auf alle Methoden zugreifen können. Wenn Sie nur die rohen DOM-Elemente wünschen, können Sie die Methode get() verwenden.

Sie können einen Index angeben, um nur ein Element abzurufen.

1
2	alert( $('p') ); // [object Object] - the jquery object
3	alert( $('p').get(1) ); // [object HTMLParagraphElement]

10 grep()

Wenn Sie mit Unix / Linix-Shells nicht vertraut sind, haben Sie den Begriff grep möglicherweise nicht gehört. In einem Terminal ist es ein Hilfsprogramm für die Textsuche. Aber hier in jQuery verwenden wir es, um ein Array von Elementen zu filtern. Es ist keine Methode einer jQuery-Sammlung. Sie übergeben das Array als ersten Parameter und die Filterfunktion als zweiten Parameter. Diese Filterfunktion übernimmt zwei Parameter selbst: ein Element aus dem Array und seinen Index. Diese Filterfunktion sollte ihre Arbeit verrichten und einen wahren oder falschen Wert zurückgeben. Standardmäßig werden alle Elemente, die true zurückgeben, beibehalten. Sie können einen dritten Parameter hinzufügen, einen booleschen Parameter, um die Ergebnisse zu invertieren und die Elemente beizubehalten, die den Wert false zurückgeben.

Jeffrey Way hat vor kurzem einen tollen Tipp zum $.grep gegeben; Schauen Sie sich das an, um zu sehen, wie man es benutzt!


var nums = '1,2,3,4,5,6,7,8,9,10'.split(',');

nums = $.grep(nums, function(num, index) {
  // num = the current value for the item in the array
  // index = the index of the item in the array
  return num > 5; // returns a boolean
});

console.log(nums) // 6,7,8,9,10

11 Pseudo-Selectors

Sizzle, die CSS-Selector-Engine in jQuery, bietet eine Reihe von Pseudo-Selektoren, um die Auswahl der gewünschten Elemente zu vereinfachen. Schauen Sie sich diese interessanten an:


$(':animated'); // returns all elements currently animating
$(':contains(me)'); // returns all elements with the text 'me'
$(':empty'); // returns all elements with no child nodes or text
$(':parent'); // returns all elements with child nodes or text
$('li:even'); // returns all even-index elements (in this case, <li>s)
$('li:odd'); // can you guess?
$(':header'); // returns all h1 - h6s.
$('li:gt(4)'); // returns all elements with an (zero-based) index greater than the given number
$('li:lt(4)'); // returns all element with an index less than the given number
$(':only-child'); // returns all . . . well, it should be obvious

Es gibt natürlich noch mehr, aber das sind die Einzigartigen.

12 isArray() / isEmptyObject() / isFunction() / isPlainObject()

Manchmal möchten Sie sicherstellen, dass der Parameter, der an eine Funktion übergeben wurde, der Typ des Typs war. Diese Funktionen machen es einfach. Die ersten drei sind ziemlich selbsterklärend:

1
2	$.isArray([1, 2, 3]); // returns true
3	$.isEmptyObject({}); // returns true
4	$.isFunction(function () { /****/ }); // returns true

Der nächste ist nicht so offensichtlich; isPlainObject() gibt true zurück, wenn der übergebene Parameter als Objektliteral oder mit new Object() erstellt wurde.


function Person(name) {
  this.name = name
	return this;
}
$.isPlainObject({})); // returns true
$.isPlainObject(new Object()); // returns true
$.isPlainObject(new Person()); // returns false

13 makeArray()

Wenn Sie eine Sammlung von DOM-Elementen mit jQuery erstellen, wird ein jQuery-Objekt zurückgegeben. In einigen Situationen möchten Sie möglicherweise bevorzugen, dass dies ein Array oder reguläre DOM-Elemente ist. Die makeArray() - Funktion kann genau das tun.


var ps = $('p');
$.isArray(ps); //returns false;
ps = $.makeArray(ps);
$.isArray(ps); // returns true;

14 map()

Die map() -Methode ähnelt entfernt von grep(). Wie zu erwarten, benötigt es einen Parameter, eine Funktion. Diese Funktion kann zwei Parameter haben: den Index des aktuellen Elements und das Element selbst. Folgendes passiert: Die Funktion, die Sie übergeben, wird einmal für jedes Element in der Sammlung ausgeführt. Der Wert, der von dieser Funktion zurückgegeben wird, ersetzt den Artikel, für den er in der Auflistung ausgeführt wurde.


$('ul#nav li a').map(function() {
  return $(this).attr('title');
});  // now the collection is the link titles
// this could be the beginning of a tooltip plugin.

15 parseJSON()

Wenn Sie $.post oder $.get verwenden und in anderen Situationen mit JSON-Strings arbeiten, ist die Funktion parseJSON hilfreich. Es ist schön, dass diese Funktion den eingebauten JSON-Parser des Browsers verwendet, wenn er einen hat (was natürlich schneller ist).


$.post('somePage.php', function (data) {
    /*****/
data =  $.parseJSON(data);
    /*****/
});

16 proxy()

Wenn Sie eine Funktion als Eigenschaft eines Objekts haben und diese Funktion andere Eigenschaften des Objekts verwendet, können Sie diese Funktion nicht aus anderen Funktionen heraus aufrufen und die richtigen Ergebnisse erzielen. Ich weiß, das war verwirrend, also lassen Sie uns ein schnelles Beispiel betrachten:


var person = {
  name : "Andrew",
  meet : function () {
    alert('Hi! My name is ' + this.name);
  }
};
person.meet();
$('#test').click(person.meet);

Von sich aus wird person.meet() korrekt benachrichtigt; Wenn es jedoch vom Event-Handler aufgerufen wird, wird "Hi! Mein Name ist undefiniert" angezeigt. Dies liegt daran, dass die Funktion nicht im richtigen Kontext aufgerufen wird. Um dies zu beheben, können wir die Funktion proxy() verwenden:

1
2	$('#test').click($.proxy(person.meet, person));
3	// we could also do $.proxy(person, "meet")

Der erste Parameter der Proxy-Funktion ist die auszuführende Methode. Die zweite ist der Kontext, in dem wir es ausführen sollen. Alternativ können wir zuerst den Kontext und den Methodennamen als Zeichenfolge übergeben. Jetzt werden Sie feststellen, dass die Funktion richtig warnt.

Bevorzugen Sie einen Videotipp auf $.proxy?

17 replaceAll() / replaceWith()

Wenn Sie DOM-Elemente durch andere ersetzen möchten, gehen Sie wie folgt vor. Wir können replaceAll() für Elemente aufrufen, die wir gesammelt oder erstellt haben, und einen Selektor für die Elemente übergeben, die wir ersetzen möchten. In diesem Beispiel werden alle Elemente mit der error klasse durch den von uns erstellten span Bereich ersetzt.

1
2	$('<span class="fixed">The error has been corrected</span>').replaceAll('.error');

Die replaceWith() -Methode kehrt nur die Selektoren um. Finden Sie zuerst diejenigen, die Sie ersetzen möchten:

1
2	$('.error').replaceWith('<span class="fixed">The error has been corrected</span>');

Sie können auch diese beiden Methodenfunktionen übergeben, die Elemente oder HTML-Zeichenfolgen zurückgeben.

18 serialize() / serializeArray()

Mit der serialize() -Methode werden die Werte eines Formulars in eine Zeichenfolge codiert.

HTML


<form>
    <input type="text" name="name" value="John Doe" />
    <input type="text" name="url" value="https://www.example.com" />
</form>

JavaScript

1
2	console.log($('form').serialize()); // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com

Sie können serializeArray() verwenden, um die Formularwerte in ein Array von Objekten anstelle einer Zeichenfolge zu konvertieren:

1
2	console.log($('form').serializeArray());
3	// logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ]

19 siblings()

Sie können wahrscheinlich erraten, was die Methode der siblings() tut. Es wird eine Sammlung der Geschwister der Elemente, die sich in Ihrer ursprünglichen Sammlung befinden, zurückgegeben:

1
2	<div> . . . </div>
3	<p> . . . </p>
4	<span> . . . </span>

1
2	$('p').siblings(); // returns <div>, <span>

20 wrap() / wrapAll() / wrapInner()

Mit diesen drei Funktionen können Elemente problemlos in andere Elemente eingebunden werden. Als Erstes möchte ich erwähnen, dass alle drei Parameter einen Parameter enthalten: entweder ein Element (das ist ein HTML-String, ein CSS-Selector, ein jQuery-Objekt oder ein DOM-Element) oder eine Funktion, die ein Element zurückgibt.
Die Methode wrap() umschließt jedes Element in der Auflistung mit dem zugewiesenen Element:

1
2	$('p').wrap('<div class="warning" />'); // all paragraphs are now wrapped in a div.warning

wrapAll() umgibt ein Element um alle Elemente in der Auflistung. Dies bedeutet, dass die Elemente in der Sammlung an eine neue Stelle im DOM verschoben werden. Sie werden an der Stelle des ersten Elements in der Sammlung aufgereiht und dort verpackt:

HTML, Before:


<p>
    <span> . . . </span>
    <span class="moveMe"> . . . </span>
    <span class="moveMe"> . . . </span>
</p>
<p>
    <span> . . . </span>
    <span class="moveMe"> . . . </span>
    <span class="moveMe"> . . . </span>
</p>

JavaScript

1
2	$('.moveMe').wrapAll(document.createElement('div'));

HTML, After:


<p>
    <span> . . . </span>
    <div>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
    </div>
</p>
<p>
    <span> . . . </span>
</p>

Zum Schluss verpackt die wrapInner-Funktion alles innerhalb des Elements mit dem angegebenen Element:

HTML, Before:

1
2	<p>
3	<span> . . . </span>
4	<span> . . . </span>
5	</p>

JavaScript:

1
2	$('p').wrapInner($('<div />'));

HTML, After:

1
2	<p>
3	<div>
4	<span> . . . </span>
5	<span> . . . </span>
6	</div>
7	</p>

Fazit

Nun, jetzt haben Sie mehr als zwanzig neue jQuery-Funktionen für Ihr nächstes Projekt. viel spaß mit ihnen!