zoukankan      html  css  js  c++  java
  • jQuery创建DOM的方法

    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>

  • 相关阅读:
    JAVA 单例模式
    CodeForces Round #563 Div.2
    拓扑排序 JAVA
    初识 Dubbo
    CodeForces Round #567 Div.2
    Educational Codeforces Round 65 (Rated for Div. 2)
    最短路径问题
    C++使用fixed和precision控制小数和有效位数的输出以及setw()设置输出宽度
    poj3684(弹性碰撞模型)
    集合的整数表示
  • 原文地址:https://www.cnblogs.com/xkzy/p/3962900.html
Copyright © 2011-2022 走看看