Heim >Web-Frontend >js-Tutorial >Zusammenfassung der gängigen Methoden und Verwendungsbeispiele von jquery_jquery

Zusammenfassung der gängigen Methoden und Verwendungsbeispiele von jquery_jquery

WBOYOriginal: 2016-05-16 16:31:581488Durchsuche

mouseover()/mouserout()

Mouseover/Mouseout-Ereignisse werden ausgelöst, wenn die Maus ein Element oder seine untergeordneten Elemente betritt/verlässt.
Das Mouseover-Ereignis wird am häufigsten zusammen mit dem Mouseout-Ereignis verwendet.

Aufgrund des Bubbling-Mechanismus werden Mouseover-/Mouserout-Ereignisse oft versehentlich ausgelöst, wenn sie nicht benötigt werden, was zu einigen Skriptproblemen führt.

mouseenter()/mouseleave()

mouseenter/mouseleave wird nur dann ausgelöst, wenn die Maus das ausgewählte Element betritt. Es wird nicht ausgelöst, wenn die Maus durch ein untergeordnetes Element geht. Es spielt keine Rolle, ob das Zielelement untergeordnete Elemente hat.

focusin() und focusout()

.focusin(): Dieses Ereignis wird ausgelöst, wenn ein Element oder seine Unterelemente den Fokus
erhalten .focusout(): Dieses Ereignis wird ausgelöst, wenn ein Element oder seine untergeordneten Elemente den Fokus verlieren

Im Gegensatz zur Methode focus() wird die Methode focusin() auch ausgelöst, wenn ein untergeordnetes Element den Fokus erhält.

Code kopieren Der Code lautet wie folgt:

focusin fire

eq() und get()

.get(): Ruft ein entsprechendes DOM-Element über das jQuery-Objekt ab.
.eq(): Konstruiert ein neues jQuery-Objekt aus einem Element der Sammlung

eq gibt ein jQuery-Objekt zurück und get gibt ein DOM-Objekt zurück. Zum Beispiel:

$( "li" ).get( 0 ).css("color", "red"); //Fehler
$( "li" ).eq( 0 ).css("color", "red"); //Richtig
Was ist also ein DOM-Objekt und was ist ein jQuery-Objekt?

Das DOM-Objekt ist ein Objekt, das mit js erhalten wurde, und das Juqery-Objekt ist ein Objekt, das mit dem Selektor der jQuery-Klassenbibliothek erhalten wurde.

Zum Beispiel: var $obj = $("div");//jQuery-Objekt

Die get-Methode konvertiert im Wesentlichen das jQuery-Objekt in ein DOM-Objekt, aber CSS gehört zum jQuery-Konstruktor und diese Methode existiert nicht im DOM. Wenn wir die jQuery-Methode verwenden müssen, müssen wir so schreiben:

Code kopieren Der Code lautet wie folgt:

var li = $("li").get(0);

$(li).css("color","black");//Mit $
 umschließen

filter()

filter()-Methode: Filtert den Satz von Elementen heraus, die dem angegebenen Ausdruck entsprechen.
Diese Methode wird verwendet, um den Übereinstimmungsbereich einzugrenzen. Trennen Sie mehrere Ausdrücke durch Kommas.

filter(expression): (String|Function) Wenn der Parameter eine Zeichenfolge ist, wird ein jQuery-Selektor so formuliert, dass alle Elemente, die nicht mit dem Selektor übereinstimmen, aus dem Verpackungssatz entfernt werden, sodass nur die Elemente übrig bleiben, die mit dem Selektor-Element übereinstimmen ; wird verwendet, um Filterkriterien zu bestimmen, wenn das Argument eine Funktion ist. Diese Funktion wird einmal für jedes Element im Wrapping-Set aufgerufen. Jedes Element, das vom Funktionsaufruf „false“ zurückgibt, wird aus dem Wrapping-Set gelöscht.

Der folgende Code bedeutet: Behalten Sie das erste Element mit der ausgewählten Klasse bei

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Hallo

Hallo nochmal

And Again

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").filter(".selected, :first")

Ergebnis:

Code kopieren Der Code lautet wie folgt:

Hallo

And Again

Sehen Sie sich ein weiteres Beispiel einer Funktion an. Eine Funktion wird als Sammlung von Testelementen verwendet. Es akzeptiert einen Parameterindex, der der Index des Elements in der jQuery-Sammlung ist. In Funktionen bezieht sich dies auf das aktuelle DOM-Element.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Hallo

Wie geht es dir?

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").filter(function(index) {

return $("ol", this).length == 0;

});

Ergebnis:

Code kopieren Der Code lautet wie folgt:

Wie geht es dir?

.bind()-, .live()- und .delegate()-Methoden

.bind(): Die einfachste Möglichkeit, Event-Handler zu binden, ist die Verwendung der .bind()-Methode. Es ist dasselbe wie die live()-Methode und akzeptiert zwei Parameter:

.bind(Ereignistyp, Ereignishandler)

Zwei Möglichkeiten, Event-Handler zu binden:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$('.mydiv').bind('click',test);
Funktionstest(){

alarm("Hallo Welt!");
}
});

Ereignishandler können auch anonyme Funktionen verwenden, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){

          $("#mydiv").bind("click",function(){

alarm("￼Hallo Welt!");

})

});

.live(): Der einzige Unterschied zwischen der Live-Methode und der Bind-Methode besteht darin, dass .live() nicht nur auf Elemente wirkt, die derzeit im DOM vorhanden sind, sondern auch auf Elemente, die möglicherweise im DOM vorhanden (dynamisch generiert) sind Zukunft

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$('.box').live('click',function(){
$(this).clone().appendTo('.container');
});
});

Der Nachteil der Verwendung der Live-Methode zum Binden von Ereignissen besteht darin, dass keine verketteten Aufrufe verwendet werden können. Gibt es eine Methode, die nicht nur Ereignisse wie die Live-Methode binden kann, sondern auch verkettete Aufrufe unterstützt? Die Antwort ist die Delegate-Methode unten.

delegate()-Methode: Fügen Sie einen oder mehrere Event-Handler zum angegebenen Element (einem untergeordneten Element des ausgewählten Elements) hinzu,

Und geben Sie Funktionen an, die ausgeführt werden sollen, wenn diese Ereignisse auftreten. Ab jQuery 1.7 wurde .delegate() durch die Methode .on() ersetzt.

Syntax:

$(selector).delegate(childSelector,event type,function)

Parameterbeschreibung:

childSelector erforderlich. Gibt ein oder mehrere untergeordnete Elemente an, an die Ereignishandler angehängt werden.

Veranstaltung erforderlich. Gibt ein oder mehrere Ereignisse an, die dem Element zugeordnet werden sollen. Mehrere durch Leerzeichen getrennte Ereigniswerte. Muss ein gültiges Ereignis sein.

Funktion erforderlich. Gibt eine Funktion an, die ausgeführt werden soll, wenn ein Ereignis auftritt.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){

          $('.container').delegate('.box','click',function(){

                 $(this).clone().appendTo('.container');

});

});

delegate() wird in den folgenden zwei Situationen verwendet:

1. Wenn Sie ein übergeordnetes Element haben und Ereignisse zu dessen untergeordneten Elementen hinzufügen müssen, können Sie den Code wie folgt verwenden:

Code kopieren Der Code lautet wie folgt:

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2. Wenn das Element auf der aktuellen Seite nicht verfügbar ist, können Sie delegate()

verwenden

end()-Methode

end()-Methode: Wird innerhalb der jquery-Befehlskette aufgerufen, um zum vorherigen Verpackungssatz zurückzukehren.
Jede Filtermethode wird auf den Stapel verschoben. Wenn wir zum vorherigen Status zurückkehren müssen, können wir mit end() eine Pop-Operation ausführen, um zum vorherigen Status im Stapel zurückzukehren.

Die Methode

end() beendet den letzten Filtervorgang in der aktuellen Kette und stellt den Satz übereinstimmender Elemente in seinem vorherigen Zustand wieder her.

Code kopieren Der Code lautet wie folgt:

Im obigen Codebeispiel sehen wir nur, dass sich die Schriftfarbe von Element 1 geändert hat, die Hintergrundfarbe jedoch nicht. Das liegt daran, dass
Der Status vor der zweiten find()-Methode hat ein Objekt mit einem Klassenwert von zwei in roter Schrift zurückgegeben. Daher sucht die zweite find()-Methode nur nach .two in

Code kopieren Der Code lautet wie folgt:

end() gibt hier den Zustand vor dem Aufruf von find() zurück, nämlich $('ul.one')

toggleClass()

`toggleClass()-Methode: `Wenn der angegebene Klassenname nicht im Element vorhanden ist, fügen Sie den angegebenen Klassennamen hinzu, wenn das Element bereits den angegebenen
hat Klassenname, entfernt den angegebenen Klassennamen aus dem Element.
CSS-Methode (Name, Wert): Setzen Sie den angegebenen Wert auf das angegebene CSS-Stilattribut jedes übereinstimmenden Elements

wrap() und wrapInner()

`wrap() und wrapInner(): `Ersteres umschließt alle passenden Elemente mit den strukturierten Tags anderer Elemente; Letzteres umhüllt den Unterinhalt (einschließlich Textknoten) jedes passenden Elements mit einer HTML-Struktur.
Schauen Sie sich das folgende Beispiel von wrap() an:
Verwenden Sie den Inhalt des ursprünglichen Div als Klasse des neuen Div und umschließen Sie jedes Element

Code kopieren Der Code lautet wie folgt:

Hallo

Auf Wiedersehen

Code kopieren Der Code lautet wie folgt:

$('.inner').wrap(function() {
return '

';
});

Ergebnis:

Code kopieren Der Code lautet wie folgt:

Hallo

Auf Wiedersehen

Dann schauen Sie sich das folgende Beispiel von wrapInner() an:

Verwenden Sie den Inhalt des ursprünglichen Div als Klasse des neuen Div und umschließen Sie jedes Element

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Hallo

Auf Wiedersehen

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$('.inner').wrapInner(function() {
return '

';
});

Ergebnis:

Code kopieren Der Code lautet wie folgt:

Hallo

Auf Wiedersehen

Methoden trennen, leeren und entfernen

.detach([selector]): Alle passenden Elemente aus dem DOM entfernen. Wenn Sie ein Element entfernen und es dann bald in das DOM einfügen müssen, müssen Sie die Detach-Methode verwenden.

.empty(): Diese Methode entfernt nicht nur untergeordnete Elemente (und andere untergeordnete Elemente), sondern auch den Text innerhalb des Elements. Denn gemäß den Anweisungen wird jede Textzeichenfolge im Element als untergeordneter Knoten des Elements betrachtet.

.remove( [selector ] ): Entfernen Sie das Element aus dem DOM und entfernen Sie die Ereignisse und jQuery-Daten auf dem Element

Beispiel für empty():

Code kopieren Der Code lautet wie folgt:

item 1

Punkt 2

item 3

Sehen Sie sich das folgende Remove()-Beispiel an:

Beschreibung: Alle Absätze aus DOM löschen

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Hallo

Wie geht es

Dir?

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").remove();

Ergebnis:

Wie geht es?
val()-Methode

val(): Ermittelt den aktuellen Wert des passenden Elements.
Beschreibung: Rufen Sie den Wert im Textfeld

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("input").val();

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("input").val("Hallo Welt!");

each() und map()

each()- und map()-Methoden: Jede gibt das ursprüngliche Array zurück und erstellt kein neues Array. Die Kartenmethode gibt ein
zurück neues Array. Wenn die Karte unnötig verwendet wird, kann es zu Speicherverschwendung kommen.
jede Methode:

Definieren Sie ein leeres Array und fügen Sie dem Array über die Methode „each“ ID-Werte hinzu. Nachdem Sie das Array in eine Zeichenfolge konvertiert haben, geben Sie den Wert an;

Code kopieren Der Code lautet wie folgt:

$(function(){

var arr = [];

$(":checkbox").each(function(index){

arr.push(this.id);

});

var str = arr.join(",");

alarm(str);

})

Kartenmethode:

Führen Sie jedes :Kontrollkästchen aus, um this.id zurückzugeben und diese Rückgabewerte automatisch als jQuery-Objekte zu speichern. Verwenden Sie dann die Get-Methode, um sie in native Javascript-Arrays zu konvertieren, und verwenden Sie dann die Join-Methode, um sie in Zeichenfolgen umzuwandeln endlich diesen Wert alarmieren;

Code kopieren Der Code lautet wie folgt:

$(function(){

var str = $(":checkbox").map(function() {

          return this.id;

}).get().join();   

alarm(str);

})

Wenn Sie den Wert eines Arrays benötigen, verwenden Sie die Kartenmethode, was sehr praktisch ist.

Für eine ausführlichere Diskussion klicken Sie bitte auf meinen anderen Artikel: Detaillierte Erläuterung der Verwendung der in jQuery integrierten Funktionen „map()“ und „each()“

$.each()

Die Funktion $(selector).each() von jQuery kann die ausgewählten untergeordneten Elemente der Schleife durchlaufen, während die Funktion $.each() von jQuery jede Sammlung durchlaufen kann, einschließlich Objekten und Arrays. Sie empfängt die zu durchlaufende Sammlung und a Rückruffunktion: Die Rückruffunktion übergibt jedes Mal einen Array-Index und den Wert des Arrays, der dem Index entspricht.

$.each(array,callback);

$.each(object,callback);

Array-Instanz

Code kopieren Der Code lautet wie folgt:

$.each( [ „eins“, „zwei“, „drei“ ], Funktion( i, l ){

alarm( "index #" i ": " l );

});

Rückruf (Index, Indexwert)

DEMO:

Index 0: eins

Index 1: zwei;
Index 2: drei
Objektinstanz

$.each({ name: „John“, lang: „JS“ }, function( k, v ) {

alarm( "Schlüssel: " k ", Wert: " v );
});
Rückruf(Schlüssel,Wert)
Demo:

Schlüssel: Name, Wert: trigkit4

Schlüssel: Alter, Wert: 21
.trigger()

Beschreibung: Alle Handler und Aktionen basierend auf dem angegebenen Ereignistyp ausführen, der an das entsprechende Element gebunden ist.

Jeder über .on() oder eine Shortcut-Methode gebundene Event-Handler wird ausgelöst, wenn das entsprechende Ereignis eintritt. Sie können jedoch manuell mit der .trigger()-Methode

ausgelöst werden

Code kopieren Der Code lautet wie folgt:

.attr() und .prop()

.attr(): Ruft den Wert des Attributs des ersten Elements im Satz übereinstimmender Elemente ab oder legt ein oder mehrere Attribute jedes übereinstimmenden Elements fest.

.prop(): Dasselbe wie oben
Vor jQuery 1.6 gab die Methode .attr() den Wert einer Eigenschaft zurück, wenn sie den Wert bestimmter Attribute übernahm, was zu inkonsistenten Ergebnissen führte. Ab jQuery 1.6 gibt die Methode .prop() den Wert der Eigenschaft und die Methode .attr() den Wert der Attribute zurück.

Zum Beispiel sollten selectedIndex, tagName, nodeName, nodeType,ownerDocument, defaultChecked und defaultSelected mit der Methode .prop() abgerufen oder zugewiesen werden.

Sie haben keine entsprechenden Attribute, sondern nur Eigenschaften.

.after() und .insertAfter()

1.after()

Beschreibung:
Fügen Sie nach allen Absätzen ein jQuery-Objekt (ähnlich einem Array von DOM-Elementen) ein.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Hallo

Ich möchte sagen:

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").after( $("b") );

Ergebnis:

Code kopieren Der Code lautet wie folgt:

Ich möchte sagen:

Hallo

2.insertAfter()

Beschreibung:
Fügen Sie alle Absätze nach einem Element ein. Identisch mit $("#foo").after("p")

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Ich möchte sagen:

Hallo

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").insertAfter("#foo");

Ergebnis:

Code kopieren Der Code lautet wie folgt:

Hallo

Ich möchte sagen:

.before() und .insertBefore()

3.before()

Beschreibung:
Fügen Sie vor allen Absätzen ein jQuery-Objekt (ähnlich einem Array von DOM-Elementen) ein.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Ich möchte sagen:

Hallo

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").before( $("b") );

Ergebnis:

Hallo

Ich möchte sagen:

.append() und .appendTo()

4.append()

Beschreibung: An alle Absätze einige HTML-Tags anhängen.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Ich möchte sagen:

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").append("Hallo");

Ergebnis:

Ich möchte sagen: Hallo

5.appendTo()

Beschreibung: Fügen Sie dem div einen neuen Absatz hinzu und fügen Sie eine Klasse hinzu

HTML-Code:

Code kopieren Der Code lautet wie folgt:

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("

")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");

Ergebnis:

.prepend() und .prependTo()

6.prepend()

Beschreibung: Stellen Sie allen Absätzen ein jQuery-Objekt (ähnlich einem Array von DOM-Elementen) voran.

HTML-Code:

Ich möchte sagen:

Hallo

jQuery-Code:

$("p").prepend( $("b") );
Ergebnis:

HalloIch möchte sagen:

7.prependTo()

Beschreibung: Alle Absätze an das Element mit dem ID-Wert foo anhängen.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Ich möchte sagen:

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

$("p").prependTo("#foo");

Ergebnis:

Ich möchte sagen:

Zusammenfassung

1. .insertAfter() und .after(): Elemente von außerhalb vorhandener Elemente einfügen
2. .insertBefore() und .before(): Elemente von vorne außerhalb der vorhandenen Elemente einfügen
3. .appendTo() und .append(): Elemente von hinten in vorhandene Elemente einfügen
4. .prependTo() und .prepend(): Elemente

von vorne in vorhandene Elemente einfügen

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erläuterung von indizierten Arrays, assoziativen Arrays, statischen Arrays und dynamischen Arrays in JavaScript_Javascript-KenntnissenNächster Artikel：Erläuterung von indizierten Arrays, assoziativen Arrays, statischen Arrays und dynamischen Arrays in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen