jquery创建DOM元素-tutorial js-php.cn

jquery创建DOM元素

无忌哥哥

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

asal

5076 orang telah melayarinya

jquery创建DOM元素

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

Salin selepas log masuk

创建新元素,原生操作起来是很麻烦的

第一步: 创建新元素

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

Salin selepas log masuk

第二步给新元素添加内容或属性

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;

Salin selepas log masuk

第三步:将新元素添加到页面中

document.body.appendChild(img)

Salin selepas log masuk

使用jquery将会大大简化这些操作

同样也可以分三步

第一步:创建新元素,至少一对标签,尖括号绝对不能省略

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

Salin selepas log masuk

第二步:给新元素添加内容或属性

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

Salin selepas log masuk

第三步:添加到页面中

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

Salin selepas log masuk

以上步骤可以简化:使用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;)

Salin selepas log masuk

其实使用$()函数创建元素的时候,还可以传入第二个参数,直接设置属性,下面我们进一步简化这些代码

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

Salin selepas log masuk

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