jquery erstellt DOM-Elemente-js-Tutorial-php.cn

jquery erstellt DOM-Elemente

无忌哥哥

Freigeben： 2018-06-29 14:19:38

Original

5103 Leute haben es durchsucht

jquery erstellt DOM-Elemente

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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;

Nach dem Login kopieren

Schritt 3: Neue Elemente zur Seite hinzufügen

document.body.appendChild(img)

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Kapitel drei Schritte: Zur Seite hinzufügen

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!