Jquery节点的操作

最新推荐文章于 2022-04-27 10:17:17 发布

木的理想

最新推荐文章于 2022-04-27 10:17:17 发布

阅读量194

点赞数

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

本文链接：https://blog.csdn.net/qq_43401687/article/details/107116039

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. Jquery节点的添加

1. 向元素内部插入节点

append(content)
将要添加的元素添加到指定元素的后边
prepend(content)
将要添加的元素添加到指定元素的前边

2. 向元素外部添加节点

after（）：将元素添加到指定元素外部的后边

before（）：将元素添加到指定元素外部的前边


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-jQuery添加节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            内部插入
            append(content|fn)
            appendTo(content)
            会将元素添加到指定元素内部的最后

            prepend(content|fn)
            prependTo(content)
            会将元素添加到指定元素内部的最前面


            外部插入
            after(content|fn)
            会将元素添加到指定元素外部的后面

            before(content|fn)
            会将元素添加到指定元素外部的前面

            insertAfter(content)
            insertBefore(content)
            */
            $("button").click(function () {
                // 1.创建一个节点
                var $li = $("<li>新增的li</li>");
                // 2.添加节点
                $("ul").append($li);
                $("ul").prepend($li);

                // $li.appendTo("ul");
                // $li.prependTo("ul");


                // $("ul").after($li);
                // $("ul").before($li);
                // $li.insertAfter("ul");
            });
        });
    </script>
</head>
<body>
<button>添加节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<div>我是div</div>
</body>
</html>

2.Jquery节点的删除

remove：传递的参数代表删除指定元素，但是不会将匹配的元素从Jquery对象中删除，，因而可以在将来再使用这些匹配的元素，但是会删除绑定的所有数据和事件
$(“p”).remove() 删除所有段落
$(“p”).remove(".hel") 删除带有.hel类名的段落
empty：删除指定元素的所有子元素和文本内容，但是不会删除元素自身

helloworld

$("p").empty();

3. detach:这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>52-jQuery删除节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            删除
            remove([expr])
            删除指定元素
            empty()
            删除指定元素的内容和子元素, 指定元素自身不会被删除
            detach([expr])
            */
            $("button").click(function () {
                 //$("div").remove();
              //  $("div").empty();
               //  $("li").remove(".item");

                // 利用remove删除之后再重新添加,原有的事件无法响应
                // var $div = $("div").remove();
                // 利用detach删除之后再重新添加,原有事件可以响应
               // var $div = $("div").detach();
                // console.log($div);
              //  $("body").append($div);
            });
            $("div").click(function () {
                alert("div被点击了");
            });
        });
    </script>
</head>
<body>
<button>删除节点</button>
<ul>
    <li class="item">我是第1个li</li>
    <li>我是第2个li</li>
    <li class="item">我是第3个li</li>
    <li>我是第4个li</li>
    <li class="item">我是第5个li</li>
</ul>
<div>我是div
    <p>我是段落</p>
</div>
</body>
</html>

3. Jquery节点的替换

两种替换方法：
replaceWith和replaceAll
　selector.replaceWith(“element”) 用匹配的元素替换成指定的HTML 元素
　$(“element”)replaceAll(selector) :方法把被选元素替换为新的 HTML 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-jQuery替换节点相关方法</title>
    <script src="../jQuery基础/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            替换
            replaceWith(content|fn)
            replaceAll(selector)
            替换所有匹配的元素为指定的元素
            */
            $("button").click(function () {
                // 1.新建一个元素
                var $h6 = $("<h6>我是标题6</h6>");
                // 2.替换元素
                 $("h1").replaceWith($h6);
               // $h6.replaceAll("h1");
            });
        });
    </script>
</head>
<body>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
</body>
</html>

4. Jquery节点的复制

clone：克隆匹配的DOM元素并且选中这些克隆的副本。

appendTo：把所有匹配的元素追加到另一个指定的元素元素集合中。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>54-jQuery复制节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // clone([Even[,deepEven]])
            /*
            如果传入false就是浅复制, 如果传入true就是深复制
            浅复制只会复制元素, 不会复制元素的事件
            深复制会复制元素, 而且还会复制元素的事件
            */
            $("button").eq(0).click(function () {
                // 1.浅复制一个元素
                var $li = $("li:first").clone(false);//浅复制
                // 2.将复制的元素添加到ul中
                $("ul").append($li);
            });
            $("button").eq(1).click(function () {
                // 1.深复制一个元素
                var $li = $("li:first").clone(true);//深复制
                // 2.将复制的元素添加到ul中
                $("ul").append($li);
            });

            $("li").click(function () {
                alert($(this).html());
            });
        });
    </script>
</head>
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>
</body>
</html>

木的理想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Jquery节点的操作

1. Jquery节点的添加1. 向元素内部插入节点append(content)将要添加的元素添加到指定元素的后边prepend(content)将要添加的元素添加到指定元素的前边2. 向元素外部添加节点after（）：将元素添加到指定元素外部的后边before（）：将元素添加到指定元素外部的前边<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫