JQuery 選擇器文檔處理操做

時間 2019-11-06

原文原文鏈接

和昨天寫JS DOM操做如出一轍。增長刪除替換修改節點。javascript

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="a">點擊
    <div class="b">ss</div>
</div>
<div class="c"></div>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input class="fasong" type="text"/>
<button class="dianji">發送</button>
<script>
    $(function () {
        var oNode = document.createElement("div");
        var oNode1 = document.createElement("div");
        var b = $(".b");
        var div = $(".c")
        var oText = document.createTextNode("This a LY");
        var oText1 = document.createTextNode("This a LYY");
        var dom = $(oNode).append(oText);
        var dom1 = $(oNode1).append(oText1);
        b.before(dom);
        /* dom.after(dom1);*/
        b.replaceWith(dom1);
        dom.attr({class: "LY"});
        dom1.addClass("LYY");
        var c = 0;
        $(".a").on("click", function () {
            c++;
            if (c % 2 == 1) {
                dom.text("true")
            } else {
                dom.html('<button>This a LY</button>')
            }
        });
        $(":input").val(oText.nodeValue)
        $(".dianji").on("click", function () {
            var wenben = $(".fasong").val();
            var content = document.createElement("div");
            var html = "";
            html += wenben + "<button class='del'>刪除</button>" + "<button class='xiugai'>修改</button>";
            $(content).append(html);
            div.append(content)
        });
        $(".del").live("click", function () {
                $(this).parent().remove()
        });
        $(".xiugai").live("click",function(){
            var parent=$(this).parent();
            parent.html("<input type='text' class='inp'><button class='yes'>肯定</button>");
            $(".inp").val($(".fasong").val())
        });
        $(".yes").live("click",function(){
            var parent=$(this).parent();
            parent.html($(".inp").val()+"<button class='del'>刪除</button>" + "<button class='xiugai'>修改</button>")
        })
    });
</script>
</body>
</html>