JQuery DOM標簽操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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 hotpink;
        transition:2s;
        background-color: #0c79be;
    }

    #container div{
        width:100px;
        height:20px;
        background-color:cornflowerblue;
    }

    .change{
        background-color:yellowgreen;
    }

    button{
        display: block;
    }
</style>
</head>
<body>
<button id="btn1">DOM操作_創(chuàng)建標簽</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="btn16">DOM操作_元素inner寬度/高度</button>
<button id="btn13">DOM操作_元素outer寬度/高度</button>
<button id="btn14">DOM操作_元素位置</button>
<button id="btn15">DOM操作_移動位置</button>

<div id="container">
<input type="text" id="username" placeholder="請輸入內容">
</div>

<script>
$(function(){
    $("#btn1").click(function(){
        //1. 創(chuàng)建標簽
        var $div1 = $("<div>");
        console.log($div1);
    });

    $("#btn2").click(function() {
        // 2. 創(chuàng)建并添加標簽到頁面中
        var $div2 = $("<div id='abc$'>");
        $("#container").append($div2);
        // $div2.appendTo("#container");
    });

    $("#btn3").click(function() {
        // 3. 創(chuàng)建并添加標簽到頁面中
        var $div2 = $("<div>");
        $("#container").prepend($div2);
        // $div2.prependTo("#container");
    });

    $("#btn4").click(function() {
        // 4、 清空標簽內容
        $("#container").empty();
    });

    $("#btn5").click(function() {
        // 5. 操作標簽屬性
        $("#username").attr("value", "administrator");
        // $("#username").prop("value", "administrator");
        // console.log($("#username").attr("nodeName"));
        // console.log($("#username").prop("nodeName"));
    });

    $("#btn6").click(function() {
        // 6. 操作標簽class屬性
        // $("#container").addClass("change");
        $("#container").removeClass("change");
        // $("#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內容
        // 請慎重：XSS漏洞：代碼注入漏洞
        $("#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>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容