在jQ1.4以前我们创建DOM并且添加到DOM树大致是这样的：
[code="javascript"]
var oNewp = $("

我测试成功了

");
oNewp.addClass("red").appendTo("#target");
[/code]

或者，稍微复杂一点：

[code="javascript"]
$("

")
.attr("id","css")
.height(90)
.css("border","1px solid #000")
.html("fuck world!")
.appendTo(document.body);
[/code]

jQuery1.4带来了一个全新的便捷地清晰的DOM对象创建方法，在 jQuery 1.4中，我们可以传递一个对象作为第二个参数。 这个参数接受一个属性的集合，这些可以传递给.attr() 方法。此外，一些event type（事件类型）能通过， 而且后面的jQuery方法能够调用： val, css, html, text, data, width, height, or offset。详见：http://www.css88.com/jqapi/#p=jQuery

例如，我们创建一个文本框：
[code="javascript"]
$("",{
"class":"bg-yellow",
"id":"fuck",
css:{
"border":"1px solid #000",
"font-size":"25px"
},
value:"fuck world!",
focusin:function(){
$(this).css("border","5px solid #FF3300");
},
focusout:function(){
$(this).css("border","1px solid #000");
}
}).appendTo(document.body);
[/code]
例如，我们创建一个容器：
[code="javascript"]
$("

",{
"class":"bg-yellow",
"id":"fuckie",
css:{
"border":"1px solid #CDCDCD",
"font-size":"25px"
},
html:$("",{
href: '#',
html:"hello world!",
click: function(event) {
$("#fuckie").css("background-color","#FF3300");
alert("fuck world!!!!!!!!!!");
event.preventDefault();
}
})
})

}).appendTo(document.body);
[/code]

参看非常简陋的demo：http://www.css88.com/demo/jqueryCreatDom/

最后编辑：2011-01-06

作者：愚人码头

这个作者貌似有点懒，什么都没有留下。

站内专栏 站点