suchen

Heim >Web-Frontend >js-Tutorial >jquery erstellt DOM-Elemente

jquery erstellt DOM-Elemente

无忌哥哥
无忌哥哥Original
2018-06-29 14:19:385134Durchsuche

jquery erstellt DOM-Elemente

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建DOM元素</title>
</head>
<body>
</body>
</html>

Das Erstellen neuer Elemente ist bei der nativen Bedienung sehr mühsam

Der erste Schritt: Neue Elemente erstellen

var img = document.createElement(&#39;img&#39;)

Der zweite Schritt gilt für neue Elemente Inhalte oder Attribute zu Elementen hinzufügen

img.src = &#39;../images/zly.jpg&#39;
img.width = 200
img.style.borderRadius = &#39;10%&#39;
img.style.boxShadow = &#39;3px 3px 3px #888&#39;

Schritt 3: Neue Elemente zur Seite hinzufügen

document.body.appendChild(img)

Die Verwendung von jquery wird diese Vorgänge erheblich vereinfachen

Es kann auch in drei Schritte unterteilt werden

Schritt 1: Neues Element erstellen, mindestens ein Paar Tags, spitze Klammern dürfen nicht weggelassen werden

var img = $(&#39;<img>&#39;)
var img = $(&#39;<img src="../images/zly.jpg" width="200">&#39;)
img.appendTo(&#39;body&#39;)

Schritt 2: Inhalte oder Attribute zum neuen Element hinzufügen

img.attr(&#39;src&#39;, &#39;../images/zly.jpg&#39;)
img.css(&#39;width&#39;,200)
img.css(&#39;border-radius&#39;,&#39;10%&#39;)
img.css(&#39;box-shadow&#39;,&#39;3px 3px 3px #888&#39;)

Kapitel drei Schritte: Zur Seite hinzufügen 

img.appendTo(&#39;body&#39;)

Die obigen Schritte können vereinfacht werden: Verwenden Sie zum Abschluss die einzigartige Kettenoperation von jquery und ändern Sie einen Stern 

$(&#39;<img>&#39;).attr(&#39;src&#39;, &#39;../images/gyy.jpg&#39;).css(&#39;width&#39;,&#39;200px&#39;).css(&#39;border-radius&#39;,&#39;10%&#39;).css(&#39;box-shadow&#39;,&#39;3px 3px 3px #888&#39;).appendTo(&#39;body&#39;)

Tatsächlich wird bei Verwendung von $( )-Funktion zum Erstellen von Elementen. Sie können auch den zweiten Parameter übergeben und die Eigenschaften direkt festlegen. Vereinfachen wir diese Codes weiter

$(&#39;<img>&#39;,{
src: &#39;../images/gyy.jpg&#39;,
title: &#39;我是高圆圆&#39;,
style: &#39;width:200px;border-radius:10%;box-shadow:3px 3px 3px #888&#39;,
click: function(){alert($(this).attr(&#39;title&#39;))}
}).appendTo(&#39;body&#39;)

Das obige ist der detaillierte Inhalt vonjquery erstellt DOM-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery dom
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：Vue verwendet mehrere Methoden, um feste Tabellenköpfe und erste Spalten zu implementierenNächster Artikel：Vue verwendet mehrere Methoden, um feste Tabellenköpfe und erste Spalten zu implementieren

In Verbindung stehende Artikel

Mehr sehen