jQuery DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布

苦涩2020

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量183

点赞数 1

分类专栏： jQuery 前端文章标签： jquery

本文链接：https://blog.csdn.net/UserPython/article/details/107003156

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

jQuery中文开发文档

DOM操作是jQuery核心内容之一，在前端开发时，我们往往需要在页面某个地方添加元素或删除元素，这种添加元素、删除元素的操作就是通过DOM操作来实现的

文档处理

追加节点

$(selector).append(content | fn)：向元素内部最后追加内容
$(content).appendTo(selector)：把元素追加到指定的元素内部最后
$(selector).prepend(content | fn)：向元素内部最前追加内容
$(content).prependTo(selector)：把元素追加到指定的元素内部最前
二者区别：append、prepend能够使用函数来附加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
            width: 200px; height: 200px; 
            border: 1px solid black;
            margin: 50px auto; text-align: center;
        }
        span{display: block;}
        p{
            width: 200px; height: 30px; 
            margin: 20px auto; text-align: center;
            background: green;
        }
        button{
            width: 200px; height: 50px;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
    	//内部插入
        $(function(){
            // 1、append()：向元素内部最后追加内容
            $("button").click(function(){
                // 添加自定义内容
                // $("#box").append("<span>我是追加的span内容</span>")

                // 添加原有内容，但是原来的内容会消失
                // $("#box").append($("#p_id"));
            });

            // 2、appendTo()：把元素追加到指定的元素内部最后
            $("button").click(function(){
                // 添加自定义内容
                // $("<span>我是追加的span内容</span>").appendTo($("#box"));

                 // 添加原有内容，但是原来的内容会消失
                //  $("#p_id").appendTo($("#box"));
            })

            // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
            
            // 3、prepend()：向元素内部最前追加内容
            $("button").click(function(){
                // 添加自定义内容
                // $("#box").prepend("<span>我是追加的span内容</span>")

                // 添加原有内容，但是原来的内容会消失
                // $("#box").prepend($("#p_id"));
            });

            // 4、prependTo()：把元素追加到指定的元素内部最前
            $("button").click(function(){
                // 添加自定义内容
                // $("<span>我是追加的span内容</span>").prependTo($("#box"));

                // 添加原有内容，但是原来的内容会消失
                $("#p_id").prependTo($("#box"));
            })

        });
    </script>
</head>
<body>
    <div id="box">
        <span>文档节点1</span>
        <span>文档节点2</span>
        <span>文档节点3</span>
        <span>文档节点4</span>
        <span>文档节点5</span>
    </div>
    <p id="p_id">我是追加的p元素</p>
    <button>点击</button>
</body>
</html>

插入节点

$(selector).before(content | fn)：向指定元素前插入内容
$(content).insertBefore(selector)：把元素插入到指定的元素前
$(selector).after(content | fn)：向指定元素后插入内容
$(content).insertAfter(selector)：把元素插入到指定的元素后
二者区别：before、after能够使用函数来附加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
            width: 200px; height: 200px; 
            border: 1px solid black;
            margin: 50px auto; text-align: center;
        }
        span{display: block;}
        p{
            width: 200px; height: 30px; 
            margin: 20px auto; text-align: center;
            background: green;
        }
        button{
            width: 200px; height: 50px;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
        // 外部插入
        $(function(){
            // 1、after()：向指定元素后插入内容
            $("button").click(function(){
                // 添加自定义内容
                // $("#box").after("<span>我是插入的span内容</span>")
                // $("#box span").after("<span>我是插入的span内容</span>")
                // $("#box span").eq(1).after("<span>我是插入的span内容</span>")

                // 添加原有内容，但是原来的内容会消失
                // $("#box span").eq(4).after($("#p_id"));
            });

            // 2、insetAfter()：把元素插入到指定的元素后
            $("button").click(function(){
                // 添加自定义内容
                // $("<span>我是插入的span内容</span>").insertAfter($("#box span").eq(4));

                 // 添加原有内容，但是原来的内容会消失
                //  $("#p_id").insertAfter($("#box span").eq(4));
            });

            // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
            
            // 3、before()：向指定元素前插入内容
            $("button").click(function(){
                // 添加自定义内容
                // $("#box span").eq(0).before("<span>我是插入的span内容</span>")

                // 添加原有内容，但是原来的内容会消失
                // $("#box span").eq(0).before($("#p_id"));
            });

            // 4、insertBefore()：把元素插入到指定的元素前
            $("button").click(function(){
                // 添加自定义内容
                // $("<span>我是插入的span内容</span>").insertBefore($("#box span").eq(1));

                // 添加原有内容，但是原来的内容会消失
                $("#p_id").insertBefore($("#box span").eq(2));
            });

        });
    </script>
</head>
<body>
    <div id="box">
        <span>文档节点1</span>
        <span>文档节点2</span>
        <span>文档节点3</span>
        <span>文档节点4</span>
        <span>文档节点5</span>
    </div>
    <p id="p_id">我是插入的p元素</p>
    <button>点击</button>
</body>
</html>

复制节点

$(selector).clone(includeEvents)：克隆元素并且选中这些克隆的副本；includeEvent：可选；布尔值，规定是否复制元素的所有事件、附加数据

删除节点

$(selector).remove()：删除所有指定的元素，可传入筛选表达式参数。所有绑定的事件、附加的数据等都会被移除
$(selector).detach()：删除所有指定的元素；可传入筛选表达式参数。所有绑定的事件、附加的数据等都会保留下来
$(selector).empty()：删除元素内部的所有子元素，但保留自身节点，所有绑定的事件、附加数据都会被删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
            width: 200px; height: 200px; 
            border: 1px solid black;
            margin: 50px auto; text-align: center;
        }
        span{display: block;}
        p{
            width: 200px; height: 30px; 
            margin: 20px auto; text-align: center;
            background: green;
        }
        button{
            width: 200px; height: 50px;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
        $(function(){
            // 1、clone()：克隆元素并且选中这些克隆的副本
            $("button").click(function(){
                // var cl = $("#p_id").clone(); //把元素复制一份
                // $("#box").append(cl);
            });

            // 2、empty()：删除元素内部的所有子元素，不接受参数
            $("button").click(function(){
                // $("#box").empty();//保留自身
            });

            // 3、remove()：删除所有指定的元素，可传入筛选表达式参数
            $("button").click(function(){
                // $("#box").remove();
                // $("#box span").remove();
                // $("#box .sp1").remove();
                // $("#box span").remove(".sp1");
            });

            // 4、detach()：删除所有指定的元素，可传入筛选表达式参数
            $("button").click(function(){
                // $("#box").detach();
                $("#box span").detach(".sp1");
            })

        });
    </script>
</head>
<body>
    <div id="box">
        我没有标签包裹
        <span class="sp1">文档节点1</span>
        <span>文档节点2</span>
        <span>文档节点3</span>
        <span>文档节点4</span>
        <span>文档节点5</span>
    </div>
    <p id="p_id">我是插入的p元素</p>
    <button>点击</button>
</body>
</html>

替换节点

$(selector).replaceWith(content | fn)：将每一个匹配的元素替换成指定的内容
$(content).replaceAll(selector)：用指定的内容替换每一个匹配的元素
替换和被替换元素都会消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
            width: 200px; height: 200px; 
            border: 1px solid black;
            margin: 50px auto; text-align: center;
        }
        span{display: block;}
        p{
            width: 200px; height: 30px; 
            margin: 20px auto; text-align: center;
            background: green;
        }
        button{
            width: 200px; height: 50px;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
        $(function(){
            // 1、replaceWith()：将每一个匹配的元素替换成指定的内容
            // 替换和被替换元素都会消失
            $("button").click(function(){
                // $("#box span").replaceWith("<span>我是替换的span内容</span>")

                // $("#box span").replaceWith($("#p_id"));
                // $("#box .sp1").replaceWith($("#p_id"));
            });

            // 2、replaceAll()：用指定的内容替换每一个匹配的元素
            $("button").click(function(){
                // $("<span>我是替换的span内容</span>").replaceAll("#box");
                // $("<span>我是替换的span内容</span>").replaceAll("#box span");

                // $("#p_id").replaceAll("#box span");
                $("#p_id").replaceAll("#box .sp1");
            })
        });
    </script>
</head>
<body>
    <div id="box">
        <span class="sp1">文档节点1</span>
        <span>文档节点2</span>
        <span>文档节点3</span>
        <span>文档节点4</span>
        <span>文档节点5</span>
    </div>
    <p id="p_id">我是插入的p元素</p>
    <button>点击</button>
</body>
</html>

包裹节点

$(selector).wrap()：把每一个匹配的元素用指定的标签包裹，相当于添加元素的父元素
$(selector).unwrap()：取消每一个匹配的元素的标签包裹；相当于移除元素的父元素
$(selector).wrapAll()：把所有匹配的元素用指定的一个标签包裹
$(selector).wrapInner()：把每一个匹配的元素的子内容用一个标签包裹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
            width: 200px; height: 200px; 
            border: 1px solid black;
            margin: 50px auto; text-align: center;
        }
        span{display: block;}
        p{
            width: 200px; height: 30px; 
            margin: 20px auto; text-align: center;
            background: green;
        }
        button{
            width: 200px; height: 50px;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
        $(function(){
            // 1、wrap()：把每一个匹配的元素用指定的标签包裹
            $("button").click(function(){
                // $("#box span").wrap("<p></p>");
                // $("#box .sp1").wrap("<p></p>");
            });

            // 2、unwrap()：取消每一个匹配的元素的标签包裹
            $("button").click(function(){
                // $("#box span").unwrap();
            });

            // 3、wrapAll()：把所有匹配的元素用指定的一个标签包裹
            $("button").click(function(){
                // $("#box span").wrapAll("<p></p>");
            });

            // 4、wrapInner()：把每一个匹配的元素的子内容用一个标签包裹
            $("button").click(function(){
                $("#box span").wrapInner("<b></b>");
            });
        });
    </script>
</head>
<body>
    <div id="box">
        <span class="sp1">文档节点1</span>
        <span>文档节点2</span>
        <span>文档节点3</span>
        <span>文档节点4</span>
        <span>文档节点5</span>
    </div>
    <p id="p_id">我是插入的p元素</p>
    <button>点击</button>
</body>
</html>

遍历节点

$(selector).each(index)：遍历节点，为每个匹配元素执行一个函数，函数可以接收正在遍历元素的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        span{
            display: block; width: 200px; line-height: 30px;
            text-align: center; margin-top: 20px; background: #ccc;
        }
        button{
            width: 200px; height: 50px; margin-top: 50px;
        }
    </style>
    <script>
        $(function(){
            // each()：为每个匹配元素规定运行的函数，就是对元素遍历
            // 运行的函数可以接收正在遍历元素的索引
            $("button").click(function(){
                $("#box span").each(function(i){
                    // $(this).text("SPAN");
                    $(this).text("SPAN" + i);
                })
            })

        })
    </script>
</head>
<body>
    <div id="box">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
        <span>span6</span>
    </div>
    <button>按钮</button>
</body>
</html>

过滤方法

为了更加灵活迅速地操作元素，除了选择器之外，jquery还为我们提供了过滤、查找方法。过滤和查找补充了很多使用选择器无法进行的操作

first()/last()：返回被选元素的首个元素/最后一个元素
eq()：返回被选元素中带有指定索引号的元素；索引号从0开始，因此首个元素的索引号是0
filter()：筛选出与指定表达式匹配的元素集合，不匹配的元素从集合中删除，匹配的元素会被返回
not()：移除与指定表达式匹配的元素集合，与上面的刚好相反
is()：判断所选元素是否有符合某个条件的元素，返回值为true或false，根据选择器、元素或jquery对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回true
has()：筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
slice(start, [end])：把匹配元素集合缩减为指定的指数范围的子集
1、start：开始选取子集的位置。第一个元素是0，如果是负数，则可以从集合的尾部开始选起
2、end：结束选取自己的位置，如果不指定，则是本身的结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤方法</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        li{
            margin-top: 5px;width: 150px;
        }
    </style>

</head>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li class="pink1"><em>3</em></li>
        <li class="pink2">4</li>
        <li>5</li>
    </ol>
    <input type="button" id="btn" value="Button">
    <script>
        $(function(){
            // $("li:first").css("background", "orange");
            // $("li").first().css("background", "orange");

            // $("li").last().css("background", 'orange');

            // $("li").eq(1).css("background", "blue");

            // $("li").filter(".pink1, .pink2").css("background", "pink");

            // $("li").not(".pink1, .pink2").css("background", "red");

            $("#btn").click(function(){
                alert($("li:eq(2)").is(".pink1, .pink2"));
            })

            // $("li").has("em").css("background", "red");

            $("li").slice(-3, -1).css("background", "pink");
        })
    </script>
</body>
</html>

查找方法

查找祖先元素

parent()：获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）
parents()：获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）
parentsUnitl()：获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止（限定范围）

查找后代元素

children()：获得匹配元素集合中每个元素的所有子元素
find()：获得当前匹配元素集合中每个元素的后代，由选择器进行筛选（必须）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找方法</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        li{
            margin-top: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <ol class="main">
        <li>1</li>
        <li class="li2">
            <ul class="inner">
                <li><span>1</span></li>
                <li class="red"><span class="sp">2</span></li>
                <li><span>3</span></li>
            </ul>
        </li>
        <li>3</li>
    </ol>    
    <input type="button" id="btn1" value="查找祖先">
    <input type="button" id="btn2" value="查找后代">
    <script>
        $(function(){
            $("#btn1").click(function(){
                // alert($(".sp").parent());
                // $(".sp").parent().css("background", "pink");

                //进一步过滤
                // $("span").parent('.red').css("background", "pink");

                // $(".sp").parents('li').css("border", "solid 3px red");

                //限定查找范围.inner, 但不包含inner元素
                $(".sp").parentsUntil('.inner').css("border", "solid 3px red");
            })

            $("#btn2").click(function(){
                //查找子元素
                // $(".inner").children('.red').css("border", "solid 3px red");
                // 查找后代元素
                $(".main").find('li').css("border", "solid 3px red");
            })
        })
    </script>
</body>
</html>

向前查找

prev()：获得匹配元素集合中每个元素相邻的前一个同辈元素，由选择器筛选(可选)
prevAll()：获得匹配元素集合中每个元素之前的所有同辈元素（不包括自身），由选择器筛选（可选）
prevUnitl()：获得每个元素之前所有的同辈元素，知道遇到匹配选择器的元素为止（不包括自身）

向后查找

next()：获得匹配元素集合中每个元素相邻的后一个同辈元素，有选择器筛选（可选）
nextAll()：获得匹配元素集合中每个元素之后的所有同辈元素（不包括自身），由选择器进行筛选（可选）
nextUnitl()：获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止（不包括自身）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>向前查找</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        li{
            margin-top: 5px;width: 150px;
        }
    </style>
</head>
<body>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li class="red">列表项3</li>
        <li class="red">列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
        <li>列表项7</li>
    </ol>
    <input id="btn1" type="button" value="向前查找">
    <input id="btn2" type="button" value="向后查找">
    <script>
        $(function(){
            $("#btn1").click(function(){
                // $("li:last").prev().css("background", "pink");
                // $("li:last").prevAll('.red').css("background", "pink");
                $("li:last").prevUntil('.red').css("background", "pink");
            })

            $("#btn2").click(function(){
                // $("li:first").next().css("background", "pink");
                // $("li:first").nextAll('.red').css("background", "pink");
                $("li:first").nextUntil('.red').css("background", "pink");
            })
        })
    </script>
</body>
</html>

查找所有兄弟元素

siblings()：返回被选元素的所有同胞元素

其他

add()：将元素添加到匹配元素的集合中
addBack()：添加堆栈中元素集合到当前集合，一个选择性的过滤选择器
end()：结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态
map()：把当前匹配集合中的每个元素遍历一次再传递给函数，产生包含返回值的新jQuery对象
closest()：方法获得匹配选择器的第一个祖先元素，从当前元素开始沿DOM树向上
offsetParent()：获得用于定位的第一个父元素。即：返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找其他</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        li{margin-top: 5px; width: 150px;}
    </style>
</head>
<body>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li class="red">列表项3</li>
        <li>列表项4</li>
        <li style="position:relative">列表项5
            <ol>
                <li>列表项1</li>
                <li><span>列表项2</span></li>
            </ol>
        </li>
    </ol>
    <input type="button" value="add" id="btn1">
    <input type="button" value="addBack" id="btn2">
    <input type="button" value="end" id="btn3">
    <input type="button" value="map" id="btn4">
    <input type="button" value="closest" id="btn5">
    <input type="button" value="offsetParent" id="btn6">
    <script>
        $(function(){
            $("#btn1").click(function(){
                //这里的add()相当于和的意思
                // $("p").css("color", "red");
                // $("li").css("color", "red");
                // $("p, li").css("color", "red");

                $("p").add("li").css("color", "red");
            })

            $("#btn2").click(function(){
                // addBack将nextAll匹配到的元素添加到之前的$(".red")集合中
                $(".red").nextAll().addBack().css("background", "red");
            })

            $("#btn3").click(function(){
                // 执行到end()时，在重新从$("li")开始执行end()后面的
                $("li").filter(":even").css("background", "red").end().filter(":odd").css("background", "orange");
            })

            $("#btn4").click(function(){
                var arr = $("input").map(function(){
                    return $(this).val();
                })
                // map()函数的返回值为jquery类型对象
                // alert(arr)

                // 通过get方法来获取jquery对象中封装的整个数组或数组的某个元素
                alert(arr.get(2));
            })

            $("#btn6").click(function(){
                $("span").offsetParent("li").css("border", "solid 5px green");
                })
            })
    </script>
</body>
</html>