jQuery1.4中创建DOM的新方法

在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/

你可能感兴趣的:(html,jquery,css)