注意本篇和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
```