jquery創建DOM元素

无忌哥哥原創: 2018-06-29 14:19:385121瀏覽

jquery建立DOM元素

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

建立新元素,原生操作起來是很麻煩的

第一步: 建立新元素

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

第二步給新元素新增內容或屬性

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;

第三步:將新元素加入頁面中

document.body.appendChild(img)

使用jquery將會大幅簡化這些操作

同樣也可以分三步

第一步:建立新元素,至少一對標籤,尖括號絕對不能省略

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

第二步:為新元素新增內容或屬性

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

第三步驟:加入到頁面中

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

以上步驟可以簡化:使用jquery獨有的鍊式操作完成,換一個明星

$(&#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;)

其實使用$()函數創建元素的時候,還可以傳入第二個參數,直接設定屬性,下面我們進一步簡化這些程式碼

$(&#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;)

以上是jquery創建DOM元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery dom

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Vue多種方法實作表頭和首列固定的方法下一篇：Vue多種方法實作表頭和首列固定的方法

看更多