Day17-jQuery对文档的操作

[大数据入门-jQuery]

jQuery对html文档的操作

  1. 添加标签
  2. 删除标签
  3. 修改标签
  4. 事件操作
    1.添加标签
    添加标签分为两种：内部插入（父子标签关系）和外部插入（兄弟标签关系）。
    内部插入演示 代码
<head>
    <meta charset="UTF-8">
    <title>01-内部插入</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
/*
 * 后插入
 * 1.append(content|fn)  在子元素后面追加元素,A.append(B) B添加到A中
 * 2.appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。A.appendTo(B) A添加到B中
 * 前插入
 * 3.prepend(content)  每个匹配的元素内部前置内容。
 * 4.prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
 */
    $(function(){
            // 1.append(content|fn)  在子元素后面追加元素
            // $("#edu").append("<option name='研究生'>研究生</option>");
            // 2.appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合
            // $("<option name='研究生'>研究生</option>").appendTo("#edu");
            // 3.prepend(content) 在子元素前面追加元素 A.prepend(B);B添加到A中
            //$("#edu").prepend("<option name='学前班'>学前班</option>");
            // 4.prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
            $("<option name='学前班'>学前班</option>").prependTo("#edu");

        });
    </script>
</head>
<body>

    <select id="edu">

        <option name="小学">小学</option>
        <option name="初中">初中</option>
        <option name="高中">高中</option>
        <option name="大学">大学</option>

    </select>

</body>

外部插入代码演示

<head>
    <meta charset="UTF-8">
    <title>02-外部插入</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        // after(content|fn) 在每个匹配的元素之后插入内容。
        // before(content|fn) 在每个匹配的元素之前插入内容。
        // insertAfter(content)  把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
        // insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
        $(function(){
                //alert($("#edu option:first").text());
                // before(content|fn) 在每个匹配的元素之前插入内容。
                //$("#edu option:first").before("<option name='学前班'>学前班</option>");
                // insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
                //$("<option name='学前班'>学前班</option>").insertBefore("#edu option:first");

                // after(content|fn) 在每个匹配的元素之后插入内容。
                //$("#edu option:last").after("<option name='研究生'>研究生</option>");
                // insertAfter(content)  把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
                //$("<option name='研究生'>研究生</option>").insertAfter("#edu option:last");
            });
    </script>
</head>
<body>

    <select id="edu">

        <option name="小学">小学</option>
        <option name="初中">初中</option>
        <option name="高中">高中</option>
        <option name="大学">大学</option>

    </select>

</body>

删除标签演示

<head>
<meta charset="UTF-8">
<title>03-删除标签</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/*
 * 1. empty() 删除所有子节点
 * 2. remove([expr]) 从DOM中删除所有匹配的元素,包括事件、附加数据.
 * 3. detach([expr]) 从DOM中删除所有匹配的元素,所有绑定的事件、附加的数据等都会保留下来
 */

$(function(){
    // 1. empty()的应用
    //$("#id1").empty();
    // 2. remove()的应用
    $("#id1").click(function(){
        alert("这个是div id为#id1的单击事件");
    });

    // remove的应用
    // var id1obj=$("#id1").remove();
    // $("#id2").append("<hr/>");
    // $("#id2").append(id1obj); // 之前绑定的点击事件已失效

    var id1obj1=$("#id1").detach();
    $("#id2").append("<hr/>");
    $("#id2").append(id1obj1);// 之前绑定的点击事件被继承了下来

});

</script>
</head>
    <body>

    <div id="id1">
        <p> 
            段落开头
            <p> 嵌套段落</p>
            段落结尾
        </p>

        <p> 
            段落开头2
            <p> 嵌套段落2</p>
            段落结尾2
        </p>

    </div>

    <hr/>
    <div id="id2">
        <p> 
            段落开头3
            <p> 嵌套段落3</p>
            段落结尾3
        </p>
    </div>
</body>