Heim > Web-Frontend > js-Tutorial > Hauptteil

jquerys Operation auf Dom-Knoten [empfohlen]_jquery

WBOY
Freigeben: 2016-05-16 15:05:17
Original
1161 Leute haben es durchsucht

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>
Nach dem Login kopieren
a, Kinder()

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');

Nach dem Login kopieren
b、parent()

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

});

Nach dem Login kopieren
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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!