07.31《jQuery》——3.1jQuery实现DOM节点的增删改

这一小节主要讲了HTNL DOM常见的操作，包括创建节点、查找节点、插入节点、移动节点、删除节点等。
接下来上具体的代码：
代码中的注释里有上课时所整理的部分知识点：
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            //jQuery插入元素
            // after() 在匹配的元素之后插入内容
                        $(function() {
                            $("#add").click(function() {
                                var $div4 = $("<div id='div4'>div4</div>");
                                $("#div2").after($div4)
                            });
                        });
            //        insertAfter()与after()用法相反，意思相同
            //        前者是： B.insertAfter( A ),意思是B插入在A的后面
            //        后者是: A.after( B ),意思是在A后面插入B

            // before() 在匹配的元素之前插入内容
                        $(function() {
                            $("#add").click(function() {
                                var $div4 = $("<div id='div4'>div4</div>");
                                $("#div2").before($div4)
                            });
                        });
            //        insertBefore()和before()用法相反，意思相同
            //        前者是： B.insertBefore( A ),意思是B插入在A的前面
            //        后者是: A.before( B ),意思是在A前面插入B

            // jQuery插入子级元素
            // append()    向匹配的元素内部追加内容
                        $(function() {
                            $("#add").click(function() {
                                var $div4 = $("<div id='div4'>div4</div>");
                                $("#div2").append($div4)
                            });
                        });
            // appendTo()和append()用法相反，意思相同

            // prepend()向每个元素内部前置内容
                        $(function() {
                            $("#add").click(function() {
                                var $div4 = $("<div id='div4'>div4</div>");
                                $("#div2").prepend($div4)
                            });
                        });
            //prependTo()prepend()用法相反，意思相同




            // jQuery移除节点
            // remove()删除 删除的是整个元素及元素所含内容
                        $(function() {
                            $("#delete").click(function() {
            
                                $("#div3").remove()
                            });
                        });


            // empty()清空 清空的是元素内所含的内容
                        $(function() {
                            $("#delete").click(function() {
            
                                $("#div3").empty()
                            });
                        });
            
            
            
        </script>
    </head>

    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <input type="button" name="add" id="add" value="添加节点" />
        <input type="button" name="delete" id="delete" value="删除节点" />

    </body>

</html>
07.31《jQuery》——3.1jQuery实现DOM节点的增删改

猜你喜欢
