jQuery DOM

原創

2020-02-21 05:39

方法

创建
格式：$(标签对).(内容)
说明：标签对可以直接写，也可以用document.createElement()生成
插入
1. 内插
  说明：在元素内部插入
  1. 头插
    格式：$(选择器).prepend(元素)
  2. 尾插
    格式：$(选择器).append(元素)
2. 外插
  说明：在元素的外部插入
  1. 前插
    格式：$(选择器).before(元素)
  2. 后插
    格式：$(选择器).after(元素)
删除
1. remove()
  说明：删除被选元素及其子元素
2. empty()
  说明：删除被选元素的子元素
替换
1. replaceAll()
  说明：替换元素
  用法：$(新的元素).replaceAll(被替换的元素);
2. replaceWith()
  说明：替换内容
  用法：$(被替换的元素).replaceWith(内容);
  注：内容若是不加标签，那么标签名相当于未定义，会显示为内联元素；若是加上标签基本等同于replaceAll

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery DOM</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var count = 0;
            function createNode(){/*创建节点*/
                var sign = document.createElement("p");
                var txt = $(sign).text(count);
                count += 1;
                return txt;
            }
            $(function(){
                $("#create_button").click(function(){/*创建*/
                    var sign = document.createElement($("#sign").val());
                    var content = $("#content").val();
                    var txt = $(sign).text(content);
                    $("#create_container").append(txt);
                });
                $("#head_insert").click(function(){/*头插*/
                    var txt = createNode();
                    $("#boundary").prepend(txt);
                });
                $("#tail_insert").click(function(){/*尾插*/
                    var txt = createNode();
                    $("#boundary").append(txt);
                });
                $("#before_insert").click(function(){/*前插*/
                    var txt = createNode();
                    $("#boundary").before(txt);
                });
                $("#after_insert").click(function(){/*后插*/
                    var txt = createNode();
                    $("#boundary").after(txt);
                });
                $("#clear").click(function(){/*清空*/
                    var txt = createNode();
                    $("#boundary").empty();
                });
                $("#delete_button").click(function(){/*删除*/
                    $("#remove_container p").remove();
                });
                $("#replace_element").click(function(){/*替换a元素*/
                    $("<h5>新的元素</h5>").replaceAll("#replace_container a");
                });
                $("#replace_content1").click(function(){/*替换p1内容*/
                    $("#replace_p1").replaceWith("新的内容");/*若是不加标签，那么标签名相当于未定义，会显示为内联元素*/
                });
                $("#replace_content2").click(function(){/*替换p2内容*/
                    $("#replace_p2").replaceWith("<h5>新的内容</h5>");/*加上标签基本等同于replaceAll*/
                });
            });
        </script>
    </head>
    <body>
        <div id="create_container">
            <h3>创建节点</h3>
            <input id="sign" placeholder="请输入标签名" value=""></input><br/>
            <input id="content" placeholder="请输入内容" value=""></input><br/>
            <input type="button" value="创建" id="create_button"></input>
        </div>
        <hr/>
        <div id="insert_container">
            <h3>插入节点</h3>
            <input type="button" value="头插" id="head_insert"></input>
            <input type="button" value="尾插" id="tail_insert"></input>
            <input type="button" value="指定前插" id="before_insert"></input>
            <input type="button" value="指定后插" id="after_insert"></input>
            <input type="button" value="清空p" id="clear"></input>
            <div id="connect_container">
                <div id="boundary" style="background-color:yellow;height:200px;width:200px;">*-分界区域-*</div>
            </div>
        </div>
        <hr/>
        <div id="remove_container">
            <h3>删除节点</h3>
            <p>p1</p>
            <a>a</a>
            <p>p2</p>
            <lable style="display:block">l1</lable><!-- 内联元素转换为块元素 -->
            <input type="button" value="删除所有p" id="delete_button"></input>
        </div>
        <hr/>
        <div id="replace_container">
            <h3>替换节点</h3>
            <p id="replace_p1">p1</p>
            <a>a</a>
            <p id="replace_p2">p2</p>
            <input type="button" value="替换a元素" id="replace_element"></input>
            <input type="button" value="替换p1的内容" id="replace_content1"></input>
            <input type="button" value="替换p2的内容" id="replace_content2"></input>
        </div>
    </body>
</html>