jQuery1.4带来了一个全新的便捷地清晰的DOM对象创建方法，在 jQuery 1.4中，我们可以传递一个对象作为第二个参数。 这个参数接受一个属性的集合，这些可以传递给.attr() 方法。此外，一些event type（事件类型）能通过， 而且后面的jQuery方法能够调用： val, css, html, text, data, width, height, or offset。
​1. [代码][JavaScript]代码   
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery创建dom的几种方法</title>
<script src="http://www.173it.cn/css/jquery.js" kesrc="http://www.173it.cn/css/jquery.js"></script>
<style type="text/css">
    .red{ color:#FF3300}
    .bg-yellow{ background-color:#FFEE00; color:#00FFEE}
</style>
</head>
 
<body>
<div id="target"></div>
<script type="text/javascript">
$(function(){ 
    var oNewp = $("<p>我测试成功了</P>"); 
    oNewp.addClass("red").appendTo("#target");
}); 
$(function(){ 
    $("<div>")
    .attr("id","css")
    .height(90)
    .css("border","1px solid #000")
    .html("fuck world!")
    .appendTo(document.body);
}); 
$(function(){ 
    $("<input>",{
        "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");
        }http://www.bizhizu.cn/linglei/​
    }).appendTo(document.body);
    $("<div>",{另类图片
        "class":"bg-yellow",
        "id":"fuckie",
        css:{
            "border":"1px solid #CDCDCD",
            "font-size":"25px"
        },
        html:$("<a>",{
            href: '#',
            html:"hello world!",
            click: function(event) {
                $("#fuckie").css("background-color","#FF3300");
                alert("fuck world!!!!!!!!!!");
                event.preventDefault();
            }
        })
         
    }).appendTo(document.body);
}); 
</script>
</body>
</html>

jQuery创建DOM的方法的更多相关文章

  1. jQuery基础之（四）jQuery创建DOM元素

    利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...

  2. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

  3. jquery获取dom属性方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  5. jquery常用函数与方法

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  6. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  7. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  8. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  9. 【jquery创建元素添加元素】

    使用jquery创建新元素的方法为:$(html标签),例如 $("<p></p>")创建了一个段落.注意此时只是创建了对象,尚未添加到文档节点中去:以下四 ...

随机推荐

  1. #define的使用方法体会

    #define 创建一个宏,该宏是标识符或參数化标识符与标记字符串的关联. 在定义宏之后.编译器可用标记字符串替换源文件里标识符的每一个匹配项. 双击以所有折叠.">语法 #defin ...

  2. windows上mysql安装

    1. 下载MySQL Community Server 5.7.14 Index of /MySQL/Downloads/MySQL-Cluster-7.1 2. 解压MySQL压缩包 安装路径:E: ...

  3. Android数据适配器(Adapter)优化：使用高效的ViewHolder

    原文链接:http://stackvoid.com/using-adapter-in-efficiency-way/ 在使用Listview或GridView的时候,往往须要自己定义数据适配器.一般都 ...

  4. unity一些知识

    有一个问题就是在Inspector面板修改 WheelNumber的数值后,运行项目,当项目停止的时候,WheelNumber 的数据又回到以前的数据,(数据未保存成功,数据丢失) 解决办法需要在 修 ...

  5. 详解Linux Top 命令

    Linux top命令简介 top 命令是最流行的性能监视工具之一,我们必需了解.它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处.top 命令交互界 ...

  6. RecyclerView的使用（3）之加入Header和Footer

    原创文章.转载请注明 http://blog.csdn.net/leejizhou/article/details/50742544 李济洲的博客 RecyclerView尽管作为ListView的替 ...

  7. Latex中參考文献排序

    \bibliographystyle{unsrt}:依照引用的先后排序 \bibliographystyle{plain}:按字母的顺序排列,比較次序为作者.年度和标题.当中作者中姓氏字母优先. 关于 ...

  8. 杭电OJ(HDU)-ACMSteps-Chapter Three-《FatMouse&#39; Trade》《今年暑假不AC》《排名》《开门人和关门人》

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2Fpc2luaV92Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. ios推送服务,php服务端

    本文转载至http://my.oschina.net/AStar/blog/176531   生成证书 证书生成参考:https://parse.com/tutorials/ios-push-noti ...

  10. 【BZOJ3510】首都 LCT维护子树信息+启发式合并

    [BZOJ3510]首都 Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打 ...