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

Posted justlive-tears

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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节点的增删改的主要内容,如果未能解决你的问题,请参考以下文章

项目实操:jQuery伪分页

如何在rails 3.1中使用jquery-addresspicker jquery

Rails 3.1 和 jquery-ui 资产

如何将 jquery 插件添加到 rails 3.1

看jquery3.3.1学js类型判断的技巧

关于jquery文件上传插件 uploadify 3.1的使用