//Vorteile von jQuery:
1 Leichtgewicht
2 leistungsstarke Selektoren
3 Hervorragende Kapselung von DOM-Operationen
4 Zuverlässiger Mechanismus zur Ereignisbehandlung
5 Perfektes Ajax
6 Verunreinigen Sie keine Variablen der obersten Ebene
7 Hervorragende Browserkompatibilität
Kettenbetriebsmodus
9 Implizite Iteration
10 Verhalten wurde von der Strukturschicht getrennt
11 Umfangreiche Plug-in-Unterstützung
12 Vollständige Dokumentation
13 Open Source
$("#foo") und jQuery("#foo") sind gleichwertig
$.ajax und jQuery.ajax sind gleichwertig. Das $-Symbol ist die Abkürzung für jQuery
// window.onload : $(function(){ })
$(function(){ }) entspricht dem window.onload-Ereignis in js. Es wird sofort nach dem Laden der Seite ausgeführt. Dies ist jedoch dasselbe wie window.onload
Aber window.onload kann nur einen schreiben, aber $(function(){ }) kann mehrere
schreiben
Wenn keine Abkürzung vorhanden ist, ist es $(document)ready(function(){ })
//Kettenbetriebsstil:
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show(); //下一个元素显示
.parent().siblings()//父元素的同辈元素
.children("a") //子元素<a>
.removeClass("current")//移出"current"样式
.next().hide();//他们的下一个元素隐藏
return false;
})
//JQuery-Objekt in DOM-Objekt konvertieren:
1 Das jQuery-Objekt ist ein Array-ähnliches Objekt, und das entsprechende DOM-Objekt kann über die [index]-Methode
abgerufen werden
var $cr = $("#cr");//jQuery-Objekt
var cr = $[0]; //DOM-Objekt
2 Eine weitere Methode wird von jQuery selbst bereitgestellt, und das entsprechende DOM-Objekt wird über die get(index)-Methode
abgerufen
var $cr = $("#cr");//jQuery-Objekt
var cr = $cr.get(0);//DOM object
//DOM-Objekt in jQuery-Objekt konvertieren:
Bei einem DOM-Objekt müssen Sie das DOM-Objekt nur mit $() umschließen, um ein jQuery-Objekt zu erhalten.
Die Methode lautet: $(DOM object);
var cr = document.getElementById("cr");//DOM object
var $cr = $(cr); //jQuery-Objekt
//Konflikte lösen:
1 Wenn andere JS-Bibliotheken mit der jQuery-Bibliothek in Konflikt geraten, können wir jederzeit die Funktion jQuery.noConflict() aufrufen, um die Kontrolle über die Variable $ an andere JavaScript-Bibliotheken zu übertragen
var $jaovo = jQuery.noConflict();
$jaovo(function(){
$jaovo("p").click(function(){
alert($jaovo(this).text());
});
});
2 Sie können „jQuery“ direkt verwenden, um einige jQuery-Arbeiten zu erledigen
jQuery(function(){
jQuery("p".click(function(){
alert(jQuery(this).text());
}));
});
//jQuery-Selektor
1 Basisauswahl
Der Basisselektor ist der am häufigsten verwendete Selektor in jQuery und auch der einfachste Selektor. Er sucht nach DOM-Elementen anhand der Element-ID, der Klasse und des Tag-Namens
//jQuery :
Holen Sie sich einfach das Label-Objekt. Es ist ein Array
//jQuery-Objekterfassung:
$("p");//Alle p-Tag-Objekte abrufen ---- Das erhaltene Objekt ist ein Array
$("#aa");//Erhalten Sie das Objekt des Tags mit der ID aa --- Das erhaltene Objekt ist ein Array
$(".aaa");//Erhalten Sie das Objekt des Tags mit der Klasse aaa --- Das erhaltene Objekt ist ein Array
//Konvertierung zwischen jQuery-Objekt und DOM-Objekt:
jQuery-Methoden und DOM-Methoden können nicht miteinander verwendet (aufgerufen) werden, Objekte können jedoch ineinander konvertiert werden
$("p");//ist ein jQuery-Objekt
Document.documentElementsTagName("p");//Es ist ein DOM-Objekt
$(document.documentElementsTagName("p"));//DOM-Objekt in jQuery-Objekt konvertieren
$("p").get(1);//Es ist ein DOM-Objekt,
Get(1); stellt die zweite Ziffer des Arrays p dar (der Index 1 ist die zweite Ziffer)
$($("p").get(1));//Das jQuery-Objekt wird in
//jQuery-Objekt in DOM-Objekt konvertiert:
1 Das jQuery-Objekt ist ein Array-ähnliches Objekt, und das entsprechende DOM-Objekt kann über die [index]-Methode
abgerufen werden
var $cr = $("#cr");//jQuery-Objekt
var cr = $[0]; //DOM-Objekt
2 Eine weitere Methode wird von jQuery selbst bereitgestellt, und das entsprechende DOM-Objekt wird über die get(index)-Methode
abgerufen
var $cr = $("#cr");//jQuery-Objekt
var cr = $cr.get(0);//DOM object
//DOM-Objekt in jQuery-Objekt konvertiert:
Bei einem DOM-Objekt müssen Sie das DOM-Objekt nur mit $() umschließen, um ein jQuery-Objekt zu erhalten.
Die Methode lautet: $(DOM object);
var cr = document.getElementById("cr");//DOM object
var $cr = $(cr); //jQuery-Objekt
//Element erstellen:
$("
//text() Textknoten:
text(): Funktion/Methode zum Abrufen des internen Textes des ausgewählten Tags (für das menschliche Auge sichtbarer Inhalt)
var li = $("li").text();//Erhalten Sie die Daten im Textknoten von li (dh den Inhalt von 123)
//attr() Attribute abrufen/Attribute festlegen/Attribute ändern:
;var i = $("p").attr("title");//Dies dient dazu, den Wert des Titelattributs im p-Tag abzurufen
$("p").attr("title"," bbb");//Ändern Sie den Wert des Titelattributs im p-Tag in bbb
//removeAttr() löscht den Attributwert des angegebenen Elements:
Was ist Ihre Lieblingsfrucht?
//append() zum Hinzufügen von Elementen:
Fügen Sie das übereinstimmende untergeordnete Element zum angegebenen übergeordneten Element hinzu.
Funktionskettenaufrufe: Warum können Kettenaufrufe verwendet werden?
Dies liegt daran, dass die vorherige Funktion immer noch das Objekt mit dem Namen
zurückgibt
Beispielsweise ist a.append(b).append(c) unter a ein übergeordnetes Tag-Objekt, um b hinzuzufügen, und der zurückgegebene Wert ist immer noch das Objekt von a, sodass Sie die Funktion auch aufrufen können füge c hinzu
//a, b und c sind alle Etikettenobjekte
var $li_1 = $("
$parent.append($li_1).append($li_2);
a.append(b);// Fügen Sie b am Ende von a hinzu (anhängen), a ist das übergeordnete Tag und b ist das untergeordnete Tag
a.append(c);// Fügen Sie c am Ende von a hinzu (append), a ist das übergeordnete Tag und c ist das untergeordnete Tag
a.append(b).append(c);//Füge b und c zu a hinzu. B und c sind Peers, aber b liegt über c (verkettete Aufrufaddition)
a.prepend(b)//Füge b vor a hinzu. a ist das übergeordnete Tag, b ist das untergeordnete Tag
a.insertAfter(b);//Füge a hinter b (der gleichen Generation) hinzu
a.insertBefore(b);// Fügen Sie a vor b (der gleichen Generation) hinzu
//Mobilknoten anrufen
//Fügen Sie unser angegebenes Element vor dem übereinstimmenden Element ein (angegebenes element.insertBefore("matched element"))
//appendTo() fügt Elemente hinzu:
//a ist das Objekt, b ist der Tag-Name
appendTo(): Fügt das angegebene Element zum Satz übereinstimmender Elemente
$("li").appendTo("ul");//Füge den li-Tag zu ul hinzu
a.appendTo("b"); //Ja, b wird zu a hinzugefügt (a ist ein Label und b ist ein Label)
Angegebenes element.appendTo(matching element);
//Element löschen (versteckt) remove():
a.remove();//A aus HTML entfernen (versteckt)
var $li = $("ul li:eq(1)").remove();//Entferne das zweite li-Tag in ul eq(1); das ist das li-Element mit dem Index 1, das ist das li-Element Zwei , weil der Index bei 0
beginnt
$li.appendTo("ul");//Das gerade gelöschte Element erneut zu ul hinzufügen
$("ul li").remove("li[title !=Apple]");//Alle li-Elemente im ul-Element löschen, deren Titelattribut nicht von Apple stammt
//removeAttr() löscht den Attributwert des angegebenen Elements:
removeAttr(xx,xx); Attributwert löschen
Was ist Ihre Lieblingsfrucht?
//Leere leer():
$("ul li:eq(1)").empty();//Suche das zweite li-Element in ul und lösche den Inhalt, (text node,
//Kopieren Sie den ausgewählten Knoten clone():
clone(true): Kopieren Sie den Knoten. Wenn „true“, wird auch der an den Knoten gebundene Ereignis-Listener kopiert. Wenn nicht geschrieben, ist der Standardwert „false“.
$("li").clone()//Kopieren Sie den aktuellen Knoten
$("li").clone().appendTo("ul");// Kopieren Sie den li-Knoten und hängen Sie ihn an ul an (an die Innenseite von ul anhängen)
$("li").clone(true).appendTo("ul");//Kopieren Sie den li-Knoten, kopieren Sie den an li gebundenen Ereignis-Listener und hängen Sie ihn zusammen an ul an (an die Innenseite von ul anhängen)
//Ausgewählten Knoten ersetzen replaceWith(),replaceAll():
a ist das zu ersetzende Objekt
b ist das vollständige Tag, das ersetzt werden soll
a.replaceWith(b);//b ersetzt a (das folgende b ersetzt das vorherige a) Letzteres ersetzt das vorherige
b.replaceAll(a);//bErsetze a (das vorherige b ersetzt das folgende a) Die Vorderseite ersetzt das folgende
//Wenn mehrere ps vorhanden sind, werden diese ersetzt
$("p").replaceWith("Die am wenigsten Lieblingsobst deiner Freundin ist???");//Ersetze das gesamte p-Tag durch < ;strong>Was ist das deiner Freundin? am wenigsten Lieblingsfrucht???//Wenn mehrere PS vorhanden sind und Sie nur eines ersetzen möchten
$($("p").get(1)).replaceWith("Die am wenigsten geliebte Frucht deiner Freundin ist???");//Ersetze nur die ersten 2 p Tags ersetzt
Sie können dem zu ersetzenden Tag auch eine ID hinzufügen, d. h. es wird nur eines ersetzt
$("#abc").replaceWith("
//replaceAll():
$("Was ist die unbeliebteste Frucht deiner Mama???").replaceAll("#abc");//Das erstere ersetzt das letztere durch die ID #abc Dieses Tag
$("
//Wrap wrap() wraoAll() wrapInner() :
//wrap() :
wrap(): Umschließt das übereinstimmende Element mit einem neuen HTML-Tag.
ein Label-Objekt (umwickelt) b ist ein Label (umwickelt mit b-Label)
Alle a-Tags werden umbrochen
a.wrap(b);
//Wenn ein A-Tag vorhanden ist, wickeln Sie es ein in:
out
//Wenn es mehrere a-Tags gibt, packen Sie sie ein in:
out
out
out
Jeder wird von der Verpackungstrennung getrennt
a.wrap("b");//Es fügt ein übergeordnetes Tag zu a hinzu, das von b umschlossen wird
$("p").wrap("");// Fügen Sie dem p-Tag ein übergeordnetes Tag hinzu, d. h. umschließen Sie das p-Tag mit dem ;i> ;
Ich bin p tag
wrapAll(): Wickelt alle Etiketten zusammen, auch wenn die zu verpackenden Etiketten nicht zusammenliegen und sich andere Etiketten in der Mitte befinden, werden die zu verpackenden Etiketten zusammen verschoben und zusammen verpackt
//Vor dem Paket
aaa
aaa
Apple
//Effektumschaltung toggleClass():
Es bezieht sich auf das Umschalten zwischen Effekten. Es gibt einen Effekt, wenn zum ersten Mal kein Umschalten erfolgt. Beim Umschalten bezieht es sich auf den Effekt, der aus allen Klassen besteht
Es bedeutet, zwischen dem aktuellen Effekt und dem angegebenen Effekt hin und her zu wechseln