jQuery1.4中创建DOM的新方法

在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。详见:https://www.html.cn/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:https://www.html.cn/demo/jqueryCreatDom/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » jQuery1.4中创建DOM的新方法

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    不知道template http://api.jquery.com/jQuery.template/ 能算不

    netwjx8年前 (2011-01-06)回复
  2. #-48

    ‘fuck world’很给力

    some one8年前 (2011-01-06)回复
  3. #-47

    嘿嘿,原来是你写的……

    我们同事在组内会议上推荐呢。

    崔凯8年前 (2011-01-07)回复
  4. #-46

    真强大啊,还可以这样啊,又学习了哈···

    Jankerli8年前 (2011-01-08)回复
  5. #-45

    新方法没那么笨重,值得使用。
    另外想提一提的是,你的网站评论模块,Tab索引有些问题,反正按Tab键,会跑到搜索框去了。

    Azhun8年前 (2011-02-08)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏