Rumah > Artikel > hujung hadapan web > jquery创建DOM元素

jquery创建DOM元素

无忌哥哥asal: 2018-06-29 14:19:385088semak imbas

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

Atas ialah kandungan terperinci jquery创建DOM元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery dom

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Vue多种方法实现表头和首列固定的方法Artikel seterusnya：关于vuex的入门介绍

Artikel berkaitan

Lihat lagi