六、文档处理

一、创建节点

// $(htmlStr)   htmlStr：html格式的字符串
$('<span>这是一个span元素</span>');

二、内部插入

A.append(B)  将B插入到A的内部后面（之后的串联操作，操作A）
    <A>
        ....
        <B></B>
    <A>
A.prepend(B) 将B插入到A的内部前面
    <A>
        <B></B>
        ....
    <A>
--------------------------------------------(下面了解)
A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A）
    <B>
             ....
        <A></A>
    <B>
A.prependTo(B) 将A插入到B的内部前面
    <B>
        <A></A>
        ....
    <B>

//1.将天津分别插入到love内部的后面
 $("#love").append($("#tj")) ;
 $("#tj").appendTo($("#love"));
//2.将天津分别插入到love内部的前面
$("#love").prepend($("#tj")) ;
$("#tj").prependTo($("#love"));

三、外部插入

A.insertAfter(B) , 将A插入到B后面（同级）
    <B></B>
    <A></A>
A.insertBefore(B) 将A插入到B前面
    <A></A>
    <B></B>
-----------------------------------(下面了解)
A.after(B)  , 将B插入到A后面（同级）
    <A></A>
    <B></B>
A.before(B) ，将B插入到A前面
    <B></B>
    <A></A>

//将city分别插入到p2的前面和后面
<script type="text/javascript">
    var $city = $("#city");
    var $p2 = $("#p2");
    $city.after($p2);
    $city.before($p2);
</script>

四、删除节点

empty()  清空标签体（清空文本节点和子节点）,自身保留(清理门户),会清除子元素上绑定的内容
remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留
$('div').html('');// 使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

//先将city移除，再拼接到body里最后
<script type="text/javascript">
    //1.获取city元素
    var $city = $("#city");
    //2.给city元素绑定事件
    $city.click(function(){
        alert("哈哈");
    });
    //3.给city元素绑定数据
    $city.data("天空","就是蓝");
    //4.移除city
    //移除city,使用remove方法之后，city对象绑定的事件和数据都没有了
    //$city.remove();
    //移除city，使用detach方法之后，city对象绑定的事件和数据还存在
    $city.detach();
    alert($city.data("天空"));
    //5.将city拼接到body后面
    $("body").append($city);
</script>
//注意：这里面用到了数据的绑定，使用方式如下
    //data(name) 获得锁绑定的数据
    //data(name,value) 设置要绑定的数据

五、复制节点

clone(even) 克隆
    even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

//点击按钮，将按钮本身复制一份，追加到body中
<script type="text/javascript">
    $(".save").click(function(){
        $("body").append($(this).clone(true));
    });
</script>

六、替换节点

A.replaceWith(B) ，使用B将A替换掉
A.replaceAll(B) ，使用A替换B

//使用指定内容替换掉p标签
<script type="text/javascript">
    //$("p").replaceWith("<a>xxxx</a>");
    $("<a>ssss</a>").replaceAll("p");
</script>

七、案例

7-1 左右select

//需求：点击1个箭头按钮，把选中的第一个option移到右侧
//      点击2个箭头的按钮，把所有选中的option移到右侧
//      点击3个箭头的按钮，把所有的option移到右侧
<script type="text/javascript">
    $(document).ready(function(){
    $("#left1").click(function(){
        $("#leftSelectId option:selected:first").appendTo($("#rightSelectId"));
        //去除选中状态
        $("select option:selected").each(function(){
            $(this).prop("selected",false);
        });
    });
    $("#left2").click(function(){
        $("#leftSelectId option:selected").appendTo($("#rightSelectId"));
    });
    $("#left3").click(function(){
        $("#leftSelectId option").appendTo("#rightSelectId");
    });
    $("#right1").click(function(){
        $("#rightSelectId option:selected:first").appendTo($("#leftSelectId"));
    });
    $("#right2").click(function(){
        $("#rightSelectId option:selected").appendTo($("#leftSelectId"));
    });
    $("#right3").click(function(){
        $("#rightSelectId option").appendTo("#leftSelectId");
    });
});
</script>
//注意：在jquery中使用$(“select :selected”).removeAttr(“selected”)无法清除选中的option控件，需要通过下面方式才行：
//$("select :selected").prop("selected",false);

7-2 动态创建表格

<input type="button" value="获取数据" id="btnCreate"/>
<div>
    <table>
        <thead>
        <tr>
            <th>名称</th>
            <th>说明</th>
        </tr>
        </thead>
        <tbody id="tbd">
        </tbody>
    </table>
</div>
<style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
        margin-left: 300px;
        margin-top: 100px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
    }
    th,
    td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }
    th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
    }
    td {
        font: 14px "微软雅黑";
    }
    tbody tr {
        background-color: #f0f0f0;
    }
    tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }
</style>
<script>
    // 模拟从后台拿到的数据
    var datas = [
        {
            name: "芙蓉姐姐",
            url: "http://www.360doc.com/content/18/0326/18/44232639_740385433.shtml",
            type: "大美女"
        },
        {
            name: "柳岩",
            url: "https://baike.baidu.com/item/%E6%9F%B3%E5%B2%A9/9476597?fr=aladdin",
            type: "大大美女"
        },
        {
            name: "范冰冰",
            url: "http://www.360doc.com/content/18/0827/14/27053206_781579849.shtml",
            type: "呵呵了"
        }];
       //1.页面加载后,点击按钮,遍历数组,获取数组中的元素内容,创建行和列,加入到表格中的tbody中
        $(function () {
            $("#btnCreate").click(function () {
                //遍历数组
                for(var i=0;i<datas.length;i++){
                    var obj=datas[i];//数组中的每一个对象
                    //创建行和列,加入到tbody中
                    $("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>      <td>"+obj.type+"</td></tr>").appendTo($("#tbd"));
                }
            });
        });
        //2.将表格行和列的信息放入到数组，再讲数组信息追加到表格中
        $(function () {
            $("#btnCreate").click(function () {
                var arr=[];
                //遍历数组
                for(var i=0;i<datas.length;i++){
                    var obj=datas[i];//数组中的每一个对象
                    //创建行和列,加入到tbody中
                    arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>      <td>"+obj.type+"</td></tr>");
                }
                $("#tbd").html(arr.join(""));
            });
        });
</script>