jquery—DOM操作

案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM操作</title>
        <script src="./js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
        <style>
            #container{
                margin: 10px;
                padding: 20px;
                width: 1200px;
                height: 100px;
                border:solid 2px red;
                transition: 2s;
                /*background-color: #f6e3c9;*/
            }
            #container div{
                width: 100px;
                height: 20px;
                background-color: orange;
            }
            .change{
                background-color: #27B597;
            }
            button{
                display:block;
            }
        </style>
    </head>
    <body>
    <button id="btn1">DOM操作_创建标签</button>
    <button id="btn2">DOM操作_append</button>
    <button id="btn3">DOM操作_prepend</button>
    <button id="btn4">DOM操作_empty</button>
    <button id="btn5">DOM操作_操作属性</button>
    <button id="btn6">DOM操作_class属性</button>
    <button id="btn7">DOM操作_操作样式</button>
    <button id="btn8">DOM操作_操作文本内容</button>
    <button id="btn9">DOM操作_操作HTML内容</button>
    <button id="btn10">DOM操作_表单内容</button>
    <button id="btn11">DOM操作_获取表单内容</button>
    <button id="btn12">DOM操作_元素宽度_高度</button>
    <button id="btn13">DOM操作_元素inner宽度_高度</button>
    <button id="btn14">DOM操作_元素outer宽度_高度</button>
    <button id="btn15">DOM操作_元素位置</button>
    <button id="btn16">DOM操作_移动位置</button>
    <div id="container">
        <input type="text" id="username" placeholder="请输入内容">
    </div>
    <script>
        $(function () {
            $("#btn1").click(function () {
                //1.创建标签
                var $div1=$("<div>");
                console.log($div1);
            });
    
            $("#btn2").click(function () {
                //2.创建并添加标签到页面中
                var $div2=$("<div>");
                $("#container").append($div2);
                // $div2.prependTo("#container");
            });
    
            $("#btn3").click(function () {
                //3.创建并添加标签到页面中
                var $div2 = $("<div>");
                $("#container").prepend($div2);
                // $div2.prependTo("#container");
            });
    
            $("#btn4").click(function () {
               //4.清空内容
                $("#container").empty();
            });
    
            $("#btn5").click(function () {
                //5.操作标签属性
                $("#username").attr("value","adminisstrator");
            });
    
            $("#btn6").click(function () {
                //6.操作标签class属性
                $("#container").toggleClass("change");
            });
    
            $("#btn7").click(function () {
                //7.操作标签样式
                // $("#container").css("border","dashed red 3px");
                $("#container").css({
                    "border":"dotted red 3px"
                });
            });
            
            $("#btn8").click(function () {
                //8.操作标签内容——文本内容
                $("#container").text("<h1>这是一行普通的文本</h1>")
            });
    
            $("#btn9").click(function () {
                //9.操作标签内容——HTML内容
                //请慎重:xxs漏洞:代码注入漏洞
                $("#container").html("<h1>这是一行普通的文本</h1>")
            });
    
            $("#btn10").click(function () {
                //10.操作标签内容——表单内容
                $("#username").val("添加的val内容");
            });
    
            $("#btn11").click(function () {
                //11.获取标签内容——表单内容
                var $v = $("#username").val();
                console.log($v);
            });
    
            $("#btn12").click(function () {
                //12.操作标签——宽度—高度
                var $c = $("#container");
                var _info = "宽度:" + $c.width() + ";高度:" + $c.height();
                $c.text(_info)
            });
    
            $("#btn13").click(function () {
                //13.操作标签——inner(内部的)宽度—高度
                var $c = $("#container");
                var _info = "inner宽度:" + $c.innerWidth() + ";inner高度:" + $c.innerHeight();
                $c.text(_info)
            });
    
            $("#btn14").click(function () {
                //14.操作标签——outer(外部的)宽度—高度
                var $c = $("#container");
                var _info = "outer宽度:" + $c.outerWidth() + ";outer高度:" + $c.outerHeight();
                $c.text(_info)
            });
    
            $("#btn15").click(function(){
                //15.操作标签——元素位置
                var $c = $("#container");
                var _info="left:"+$c.offset().left+";top"+$c.offset().top;
                $c.text(_info)
            });
    
            $("#btn16").click(function(){
                //16.操作标签——移动位置
                var $c = $("#container");
                $c.offset({"left":200,"top":200});
            });
        })
    </script>
    
    </body>
    </html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容