php内部创建jq,jquery创建DOM元素

jquery创建DOM元素

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

第一步: 创建新元素var img &＃61; document.createElement(&＃39;img&＃39;)

第二步给新元素添加内容或属性img.src &＃61; &＃39;../images/zly.jpg&＃39;

img.width &＃61; 200

img.style.borderRadius &＃61; &＃39;10%&＃39;

img.style.boxShadow &＃61; &＃39;3px 3px 3px #888&＃39;

第三步:将新元素添加到页面中document.body.appendChild(img)

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

同样也可以分三步

第一步:创建新元素,至少一对标签,尖括号绝对不能省略var img &＃61; $(&＃39;&＃39;)

var img &＃61; $(&＃39;&＃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;&＃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;&＃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;)