Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Roundups
Code

20 hilfreiche jQuery-Methoden, die Sie verwenden sollten

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (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.

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.


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.


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:

context example

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:


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.

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

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.


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

JavaScript

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.


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

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

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

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:

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

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.

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.

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().

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.

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.


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.

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


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.


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!


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:

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:

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


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.


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.


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


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:

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:

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.

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

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

JavaScript

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


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:


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:

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:

JavaScript

HTML, After:

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

HTML, Before:

JavaScript:

HTML, After:


Fazit

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.