Heim >Web-Frontend >js-Tutorial >jquerys Operation auf Dom-Knoten [empfohlen]_jquery
1. Wo soll ich das JavaScript-Skript ablegen?
1. Wenn einige Funktionen aufgerufen werden müssen, bevor sie ausgeführt werden, oder einige Ereignisse ausgelöst werden müssen, bevor sie ausgeführt werden, können wir das Skript im Kopfteil des HTML platzieren, um sicherzustellen, dass das Skript vor allen geladen wurde Anruf.
2. Beim Laden der Seite kann das auszuführende Skript im Textteil des HTML-Codes platziert werden. Dieser Skripttyp wird normalerweise zum Generieren des Inhalts der Seite verwendet.
3. Für Skripte, die sofort nach dem Laden der Seite ausgeführt werden müssen, können wir sie am Ende platzieren und nach dem Laden des Dokuments ausführen. Glücklicherweise verfügt Jquery über eine Ereignissteuerung, sodass wir in diesem Teil die von head referenzierte externe Datei herunterladen können.
2. Allgemeine Funktionen von jquery
Zum Beispiel: children(), parent(), every(), text(), html(), val(), next();
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
Durchlaufen Sie den DOM-Baum und suchen Sie nach direkten untergeordneten Knoten des angegebenen Elements. Diese Methode durchläuft den DOM-Baum nur eine Ebene tiefer
// jquery $('ul.level-2').children().css('background-color', 'red'); $('ul.level-2').children('.item-*').css('background-color', 'red');
Durchlaufen Sie den DOM-Baum nach oben, um nach den direkten übergeordneten Elementen jedes angegebenen Elements zu suchen. Dieser Durchlaufbereich ist derselbe wie die Funktion children(), die eine Ebene durchläuft.
$('li.item-a').parent().css('background-color', 'red');
c,each()
Durchlaufen Sie jedes Element in der Sammlung.
//数组的遍历 var arr = ["Test1", "Test2", "Test3"]; $.each(arr, function (i, item) { alert(i); alert(item); }); //二维数组的遍历 var arr = [ ["Test1", "Test2", "Test3"], ["Test4", "Test5", "Test6"], ["Test7", "Test8", "Test9"] ]; $.each(arr, function (i, item) { alert(i); alert(item); }); //遍历json数据 var obj = { "1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6" }; $.each(obj, function (i, item) { alert(i); alert(item); });4. text()-Funktion
text() ist eine Methode des Jquery-Objekts, mit der auf den Textinhalt des angegebenen Elements zugegriffen wird. Es kombiniert den Textinhalt der angegebenen Elemente und gibt ihn als String zurück. Kann für Aufgaben verwendet werden.
5. html()-Funktion
Rufen Sie den HTML-Inhalt vom ersten Element im angegebenen Element ab und geben Sie ihn als Zeichenfolge zurück. Kann für Aufgaben verwendet werden.
Unterschied: Der Unterschied zwischen den Funktionen text() und html()
Unterschied 1: Die Funktion text() kann für XML-Dokumente und HTML-Dokumente verwendet werden, während html() nur für HTML-Dokumente verwendet werden kann.
Unterschied 2: Die Funktion html() zeigt nicht nur Text an, sondern gibt auch Tag-Paare und Text aus, während text() nur Text enthält.
6. val()-Funktion
Gibt den Wert des ausgewählten Elements zurück oder legt ihn fest. Der Wert des Elements wird über das Wertattribut festgelegt. Diese Methode wird hauptsächlich für Eingabeelemente verwendet. Wenn diese Methode keine Parameter setzt, gibt sie den aktuellen Wert des ausgewählten Elements zurück.
7. next()-Funktion Ruft die benachbarten Geschwisterelemente jedes Elements im passenden Elementsatz ab. Wenn ein Selektor bereitgestellt wird, wird das nächste gleichgeordnete Element abgerufen, das mit dem Selektor übereinstimmt.
3. Operation am Dom
Zum Beispiel: prepend(), prependTo(), clone(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), remove(), detach(), empty () , replaceWith() , replaceAll() , wrap() , wrapAll() , warpInner()
Die obige JQuery-Operation auf Dom-Knoten [empfohlen] ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie Script Home unterstützen.