在jQ1.4以前我们创建DOM并且添加到DOM树大致是这样的:
view sourceprint?1 var oNewp = $("<p>我测试成功了</p>");
2 oNewp.addClass("red").appendTo("#target");
或者,稍微复杂一点:
view sourceprint?1 $("<div></div>")
2 .attr("id","css")
3 .height(90)
4 .css("border","1px solid #000")
5 .html("fuck world!")
6 .appendTo(document.body);
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
例如,我们创建一个文本框:
view sourceprint?01 $("<input />",{
02 "class":"bg-yellow",
03 "id":"fuck",
04 css:{
05 "border":"1px solid #000",
06 "font-size":"25px"
07 },
08 value:"fuck world!",
09 focusin:function(){
10 $(this).css("border","5px solid #FF3300");
11 },
12 focusout:function(){
13 $(this).css("border","1px solid #000");
14 }
15 }).appendTo(document.body);
例如,我们创建一个容器:
view sourceprint?01 $("<div></div>",{
02 "class":"bg-yellow",
03 "id":"fuckie",
04 css:{
05 "border":"1px solid #CDCDCD",
06 "font-size":"25px"
07 },
08 html:$("<a>",{
09 href: '#',
10 html:"hello world!",
11 click: function(event) {
12 $("#fuckie").css("background-color","#FF3300");
13 alert("fuck world!!!!!!!!!!");
14 event.preventDefault();
15 }
16 })
17 })
18
19 }).appendTo(document.body);
参看非常简陋的demo:http://www.css88.com/demo/jqueryCreatDom/