jQuery相關方法4-----元素建立和移除

時間 2019-11-13

原文原文鏈接

1、建立添加元素

父元素.append(子元素)-----被動追加建立
子元素.appendTo(父元素)-----主動追加建立

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $("#dv").append($("<a href='http://www.baidu.com'>百度</a>"));
            });
            $("#btn2").click(function () {
                $("<a href='http://www.baidu.com'>百度</a>").appendTo($("#dv"));
            });
        });
    </script>
    <input type="button" value="建立方式1" id="btn1">
    <input type="button" value="建立方式2" id="btn2">
    <div id="dv"></div>

2、案例:建立10個p標籤

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                for(var i=0;i<10;i++){
                    $("#dv").append($("<p>建立了p</p>"));
                }
            });
        });
    </script>
    <input type="button" value="建立" id="btn">
    <div id="dv"></div>

3、案例:建立列表

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //第一種方式
            $("#btn1").click(function(){
                var ulObj=$("<ul></ul>");
                $("#dv").append(ulObj);
                var liObj=$("<li>劉備</li><li>關羽</li><li>張飛</li>");
                liObj.appendTo(ulObj).mouseenter(function(){
                    $(this).css("backgroundColor","red");
                }).mouseleave(function(){
                    $(this).css("backgroundColor","");
                }).click(function(){
                    $(this).css("fontSize","50px");
                });
            });
            //第二種方式
            var array=["曹操","司馬懿","諸葛亮"]
            $("#btn2").click(function(){
                var ulObj=$("<ul></ul>");
                ulObj.appendTo($("#dv"));
                for(var i=0;i<array.length;i++){
                    $("<li>"+array[i]+"</li>").appendTo(ulObj).mouseenter(function(){
                        $(this).css("backgroundColor","red");
                    }).mouseleave(function(){
                        $(this).css("backgroundColor","");
                    }).click(function(){
                        $(this).css("fontSize","50px");
                    });
                }
            });
        });
    </script>
    <input type="button" value="建立方式1" id="btn1">
    <input type="button" value="建立方式2" id="btn2">
    <div id="dv"></div>

4、append方法和clone方法的區別

獲取的元素經過append方法添加到另外一個元素中的時候,至關於剪切
clone()方法能夠實現複製的效果

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#dv1>p:first").appendTo("#dv2");
            });
            $("#btn2").click(function(){
                $("#dv1>p:last").clone().appendTo("#dv2");
            });
        });
    </script>
    <input type="button" value="剪切" id="btn1">
    <input type="button" value="複製" id="btn2">
    <div id="dv1" style="width: 200px;height: 200px;border: 1px solid #000;">
        <p>我是第一個p</p>
        <p>我是第二個p</p>
    </div>
    <div id="dv2" style="width: 200px;height: 200px;border: 1px solid #000;"></div>

5、元素建立的不一樣方式

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //第一種方法---不斷點擊按鈕,一直建立
            $("#btn1").click(function(){
                $("<p>一個p標籤</p>").appendTo($("#dv"));
            });
            //第二種方法-----不斷點擊按鈕,只建立一個,由於這種方法至關於賦值
            $("#btn2").click(function(){
                $("#dv").html("<span>一個span標籤</span>");
            });
        });
    </script>
    <input type="button" value="建立1" id="btn1">
    <input type="button" value="建立2" id="btn2">
    <div id="dv"></div>

6、添加元素的其餘方法

append()和prepend()-----添加子元素
after()和before()------添加兄弟元素

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //建立p標籤添加到div中,插入到原來p的後面
            $("#btn1").click(function(){
                $("#dv").append($("<p>建立了p1</p>"));
            });
            //建立p標籤添加到div中,插入到原來p的前面
            $("#btn2").click(function(){
                $("#dv").prepend($("<p>建立了p2</p>"));
            });
            //建立p標籤添加到div的下一個兄弟元素
            $("#btn3").click(function(){
                $("#dv").after($("<p>建立了p3</p>"));
            });
            //建立p標籤添加到div的上一個兄弟元素
            $("#btn4").click(function(){
                $("#dv").before($("<p>建立了p4</p>"));
            });
        });
    </script>
    <input type="button" value="添加1" id="btn1">
    <input type="button" value="添加2" id="btn2">
    <input type="button" value="添加3" id="btn3">
    <input type="button" value="添加4" id="btn4">
    <div id="dv" style="width: 300px;height: 300px;border: 1px solid #000;">
        <p>原來的p</p>
    </div>

7、移除元素的方法(html、empty、remove)

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //第一種-----html方法
            $("#btn1").click(function(){
                $("#d1").html("");
            });
            //第二種----empty()方法(推薦)
            $("#btn2").click(function(){
                $("#d2").empty();
            });
            //第三種----remove()方法是清除包括本身
            $("#btn3").click(function(){
                $("#d3").remove();
            });
        });
    </script>
    <input type="button" value="移除" id="btn1">
    <input type="button" value="清空" id="btn2">
    <input type="button" value="自殺" id="btn3">
    <div>
        <div id="d1" style="width: 200px;height: 100px;border: 1px solid #000;"><p>這是一個p</p><span>這是一個span</span></div>
        <div id="d2" style="width: 200px;height: 100px;border: 1px solid #000;"><p>這是一個p</p><span>這是一個span</span></div>
        <div id="d3" style="width: 200px;height: 100px;border: 1px solid #000;"><p>這是一個p</p><span>這是一個span</span></div>
    </div>

8、案例：建立表格，在表格添加一行，移除表格

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //建立
            var arr=[
                {name:"百度1",href:"http://www.baidu.com"},
                {name:"百度2",href:"http://www.baidu.com"},
                {name:"百度3",href:"http://www.baidu.com"},
                {name:"百度4",href:"http://www.baidu.com"}
                ];
            $("#btn1").click(function(){
                var table=$("<table></table>");
                $("#dv").append(table);
                for(var i=0;i<arr.length;i++){
                    var dt=arr[i];
                    var tr=$("<tr></tr>");
                    table.append(tr);
                    var td1=$("<td>"+dt.name+"</td>");
                    tr.append(td1);
                    var td2=$("<td><a href="+dt.href+">"+dt.name+"</a></td>");
                    tr.append(td2);
                }
            });
            //添加一行
            $("#btn2").click(function(){
                    var tr=$("<tr><td>騰訊</td><td><a href='http://qq.com'>騰訊</a><td></tr>");
                    $("#dv").children("table").append(tr);
            });
            //移除
            $("#btn3").click(function(){
                $("#dv").empty();
            });
        });
    </script>
    <input type="button" value="建立表格" id="btn1">
    <input type="button" value="添加一行" id="btn2">
    <input type="button" value="移除表格" id="btn3">
    <div id="dv" style="width: 400px;height: 400px;border: 1px solid #000;"></div>

9、案例：權限選擇，移動

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //第一個按鈕:把左邊選中的移動到右邊
            $("#toRight").click(function(){
                $("#se1>option:selected").prependTo($("#se2"));
            });
            //第二個按鈕:把右邊選中的移動到左邊
            $("#toLeft").click(function(){
                $("#se2>option:selected").prependTo($("#se1"));
            });
            //第一個按鈕:把左邊所有移動到右邊
            $("#alltoRight").click(function(){
                $("#se1>option").prependTo($("#se2"));
            });
            //第一個按鈕:把右邊所有移動到左邊
            $("#alltoLeft").click(function(){
                $("#se2>option").prependTo($("#se1"));
            });
        });
    </script>
    <div>
        <select id="se1" multiple style="float: left; width: 80px;height: 85px;">
            <option>添加</option>
            <option>刪除</option>
            <option>修改</option>
            <option>查詢</option>
        </select>
        <div style="float: left;">
            <input type="button" value=">" id="toRight" style="display: block;">
            <input type="button" value="<" id="toLeft" style="display: block;">
            <input type="button" value=">>" id="alltoRight" style="display: block;">
            <input type="button" value="<<" id="alltoLeft" style="display: block;">
        </div>
        <select id="se2" multiple style="float: left; width: 80px;height: 85px;">
            <option ></option>
            <option ></option>
            <option ></option>
            <option ></option>
        </select>
    </div>