JQuery 选择器文档处理操作

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_33827590

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量71

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1431116/blog/274479

版权

2019独角兽企业重金招聘Python工程师标准>>>

和昨天写JS DOM操作一模一样。增加删除替换修改节点。

<!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>

转载于:https://my.oschina.net/u/1431116/blog/274479