读书人

jQuery1.4中创设DOM的新方法

发布时间: 2012-11-06 14:07:00 作者: rapoo

jQuery1.4中创—OM的新方法
在jQ1.4以前我们创—OM并且添加到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/

读书人网 >Web前端

热点推荐