jquery文档处理及实例之复制样式条

时间:2021-07-26 16:58:31   收藏:0   阅读:0

文档处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

实例之复制样式条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
            <div class="outer">
                <div class="item">
                        <input type="button" value="+" onclick="add(this);">
                        <input type="text">
                </div>
            </div>

<script src="jquery-1.11.3.min.js"></script>
    <script>
            //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?
            function add(self){
                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
                 var $clone_obj=$(self).parent().clone();
                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
                 $(self).parent().parent().append($clone_obj);
            }
           function removed(self){

               $(self).parent().remove()

           }

    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--    <div class="c1">-->
<!--        <p>ppp</p>-->
<!--    </div>-->
<!--    <button>add</button>-->

<!--    <script src="jquery-3.3.1.js"></script>-->
<!--    <script>-->
<!--        $(‘button‘).click(function () {-->
<!--            // $(‘.c1‘).append(‘<h1>hello</h1>‘);-->

<!--            let $ele=$(‘<h1></h1>‘);-->
<!--            $ele.html(‘hello world‘);-->
<!--            $ele.css(‘color‘,‘red‘);-->
<!--// 标签内部插入-->
<!--            // $(‘.c1‘).append($ele); // 追加到p标签后面-->
<!--            // $ele.appendTo(‘.c1‘); // 追加到p标签后面-->

<!--            // $(‘.c1‘).prepend($ele); // 追加到p标签前面-->
<!--            // $ele.prependTo(‘.c1‘); // 追加到p标签前面-->
<!--// 标签外部插入-->
<!--            // $(‘.c1‘).after($ele); // 追加到div标签后面-->
<!--            // $ele.insertAfter(‘.c1‘); // 追加到div标签后面-->

<!--            // $(‘.c1‘).before($ele); // 追加到div标签前面-->
<!--            // $ele.insertBefore(‘.c1‘); // 追加到div标签前面-->
<!--// 替换-->
<!--            // $(‘p‘).replaceWith($ele); // 将创建的h1标签替换p标签-->

<!--// 删除-->
<!--            // $(‘.c1‘).empty(); // div标签还在-->
<!--            // $(‘.c1‘).remove(); // div标签已不存在-->

<!--// 复制-->
<!--            let $ele2=$(‘.c1‘).clone(); // 复制出来的标签都是一样的,连class属性也是,所以此时并不是一个一个的添加-->
<!--            $(‘.c1‘).after($ele2);-->
<!--        })-->
<!--    </script>-->

<!--实例之复制样式条-->
    <div class="outer">
        <div class="item">
            <button onclick="add(this)">+</button>
            <input type="text">
        </div>
    </div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        function add(self) {
            let $ele3=$(self).parent().clone(); // 把onclick也复制了
            $ele3.children(button).html(-).attr(onclick,remove(this));
            $(.outer).append($ele3);
        };
        function remove(self) {
            $(self).parent().remove();
        };
    </script>
</body>
</html>

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!