jQuery 的 DOM 操作- 中-阿里云开发者社区

jQuery 的 DOM 操作- 中

2023-08-08 42

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jQuery 的 DOM 操作- 中

注意本篇和jQuery 的 DOM 操作-上配套观看更好

复制节点

● 复制节点介绍

1、clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

2、clone(true): 复制元素的同时也复制元素中的的事件

保存

段落

//克隆节点，不克隆事件

$(“button”).clone().appendTo(“p”);

//克隆节点，克隆事件

$(“button”).clone(true).appendTo(“p”);

● 复制节点-应用实例

clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QJaVc9N-1690126488945)(…/…/…/Typora/%E5%9B%BE%E7%89%87/f7faadbc2eb44c02a4f6d7c10fac45c6.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //点击p, 弹出文本信息
            $("p").click(function () {
                //隐式的传入this->p的dom对象
                alert("段落的内容= " + $(this).text())
            })
            //克隆p, 插入到按钮后面
            //1. $("p").clone() 表示克隆p元素，但是没有复制事件
            //2. $("p").clone(true) 表示克隆p元素，同时复制事件
            $("p").clone(true).insertAfter($("button"));
        })
    </script>
</head>
<body>
<button>保存</button>
<br><br><br><br><br>
///<br>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>

替换节点

● 替换节点介绍

1.replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素A.placeWith(B)

2.replaceAll(): 颠倒了的 replaceWith() 方法 B.replaceAll(A)

3.注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

段落

方式一

$(“p”).replaceWith(“登陆”);

方式二

$(“登陆”).replaceAll(“p”);

● 替换节点-应用实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KyOJqYTA-1690126488946)(…/…/…/Typora/%E5%9B%BE%E7%89%87/c07cbc92db664f15940946cc5b500dce.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点-应用实例</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1. 将 p 替换成 button
            $("p").replaceWith("<input type='button' id='my' value='我的按钮'/>")
            //2.将p 替换成 超链接
            $("p").replaceWith("<a href='http://www.baidu.com'>点击到百度</a><br/>");
            //3. 使用对象来进行替换
            var $button = $("<input type='button' id='my' value='我的按钮~'/>");
            $button.click(function (){
                alert("ok ~~~");
            })
            $("p").replaceWith($button);
        });
    </script>
</head>
<body>
<h1>节点替换</h1>
<p>Hello</p>
<p>jquery</p>
<p>World</p>
</body>
</html>

属性操作

● 属性操作介绍/参考文档讲解即可

1.attr(): 获取属性和设置属性

2.attr()传递一个参数时, 即为某元素的获取指定属性

3.attr()传递两个参数时, 即为某元素设置指定属性的值

4.jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),height(), width(), css() 等,

5.removeAttr(): 删除指定元素的指定属性

样式操作

● 样式操作介绍

1.获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.

2.追加样式: addClass()

3.移除样式: removeClass() — 从匹配的元素中删除全部或指定的 class

4.切换样式: toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.

5.判断是否含有某个样式: hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回true; 否则返回 false

应用实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8xJA0467-1690126488946)(…/…/…/Typora/%E5%9B%BE%E7%89%87/4ce06ed6bcee4b399ca99609a63d4b45.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style type="text/css">
        div {
            width: 140px;
            height: 140px;
            margin: 20px;
            float: left;
            border: #000 1px solid;
        }
        .one {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)
            $("#b1").click(function (){
                $("#first").attr("class", "one");
            })
            //追加样式: addClass()
            $("#b2").click(function (){
                $("#first").addClass("one");
            })
            //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
            $("#b3").click(function (){
                $("#first").removeClass();
            })
            //切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
            $("#b4").click(function (){
                $("#first").toggleClass("one");
            })
            //判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
            $("#b5").click(function (){
                alert($("#first").hasClass("one"));
            })
        });
    </script>
</head>
<body>
<input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)" id="b1"/><br/><br/>
<input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)" id="b2"/><br/><br/>
<input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) " id="b3"/><br/><br/>
<input type="button"
       value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它"
       id="b4"/><br/><br/>
<input type="button"
       value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false"
       id="b5"/><br/><br/>
<div id="first">first</div>
<div id="second">second</div>
</body>
</html>

b4"/>

first

second

```