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

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>