jQuery 删除、复制和替换元素
来源:互联网 发布:vba提取网页数据 编辑:程序博客网 时间:2024/04/28 07:22
一、使用jQuery删除元素
(1)、remove()移除所有匹配的元素
remove() 方法移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。
语法:$(selector).remove()
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); });});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">This is some text in the div.<p>This is a paragraph in the div.</p><p>This is another paragraph in the div.</p></div><br><button>删除 div 元素</button></body></html>
查看返回的对象:返回删除所有的元素
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var obj=$("#div1").remove(); $("body").append(obj); });});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">This is some text in the div.<p>This is a paragraph in the div.</p><p>This is another paragraph in the div.</p></div><br><button>删除 div 元素</button></body></html>
remove() 方法也可接受一个参数,允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); });});</script></head><body><p>This is a paragraph in the div.</p><p class="italic"><i>This is another paragraph in the div.</i></p><p class="italic"><i>This is another paragraph in the div.</i></p><button>删除 class="italic" 的所有 p 元素</button></body></html>
(2)、empty()删除匹配的元素集合中所有的子节点
empty() 方法从被选元素移除所有内容,包括所有文本和子节点。
语法:$(selector).empty()
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){ $("p").empty(); });});</script></head><body><p style="width:200px;height:200px;background-color:yellow">This is a paragraph. <b>Bold</b> and <i>italic</i> text.</p><button class="btn1">删除 p 元素的内容</button></body></html>
查看返回的对象:返回的对象不包括删除的子元素,只保留节点。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){ var obj=$("p").empty(); $("body").append(obj) });});</script></head><body><p style="width:200px;height:200px;background-color:yellow">This is a paragraph. <b>Bold</b> and <i>italic</i> text.</p><button class="btn1">删除 p 元素的内容</button></body></html>
(3)、detach() 从 DOM 中移除匹配元素集合
detach() 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
语法:$(selector).detach()
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("body").append($("p").detach()); }); $("p").click(function(){ $(this).animate({fontSize:"+=1px"}) });});</script></head><body><p>在本段落移动之后,试着点击该段落,请注意它保留了 click 事件。</p><button>移动 p 元素</button></body></html>
二、使用jQuery复制元素
clone() 方法生成被选元素的副本,包含子节点、文本和属性。
语法:$(selector).clone(includeEvents)
includeEvents可选。布尔值。规定是否复制元素的所有事件处理。默认地,副本中不包含事件处理器。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("body").append($("p:first").clone(true)); }); $("p").click(function(){ $(this).animate({fontSize:"+=1px"}); });});</script></head><body><p>点击本段落可以增加文本的大小。事件处理器同样被复制到新的段落。</p><button>复制每个 p 元素,然后追加到 body 元素</button></body></html>
三、使用jQuery替换元素
(1)、replaceAll()用匹配的元素替换所有匹配到的元素
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。提示:replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。
语法:$(content).replaceAll(selector)
content 必需。规定替换被选元素的内容。可能的值:
HTML 代码 - 比如 ("<div></div>")
新元素 - 比如 (document.createElement("div"))
已存在的元素 - 比如 ($(".div1")) ,已存在的元素不会被移动,只会被复制,并包裹被选元素。
selector 必需。规定要替换的元素。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn1").click(function(){ $(document.createElement("div")).replaceAll("p"); });});</script><style>div{height:20px;background-color:yellow;margin:10px;}</style></head><body><p>This is a paragraph.</p><p>This is another paragraph.</p><button class="btn1">用新的 div 替换所有段落</button></body></html>
(2)、replaceWith()用新内容替换匹配的元素
replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。提示:replaceWith() 与 replaceAll() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceAll() 无法使用函数进行替换。
语法:$(selector).replaceWith(content)
content 必需。规定替换被选元素的内容。可能的值:
HTML 代码 - 比如 ("<div></div>")
新元素 - 比如 (document.createElement("div"))
已存在的元素 - 比如 ($(".div1")),已存在的元素不会被移动,只会被复制,并包裹被选元素。
selector必需。规定要替换的元素。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn1").click(function(){ $("p").replaceWith("<b>Hello world!</b>"); });});</script></head><body><p>This is a paragraph.</p><p>This is another paragraph.</p><button class="btn1">用粗体文本替换所有段落</button></body></html>
使用函数来替换元素,使用函数把被选元素替换为新内容。
语法:$(selector).replaceWith(function())
function()必需。返回待替换被选元素的新内容的函数。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").replaceWith(function(){return "<p>Hello World!</p>"; }); });});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><button class="btn1">用新的 p 元素替换所有段落</button></body></html>
- jQuery 删除、复制和替换元素
- jQuery-替换和删除元素
- jQuery插入,复制、替换和删除节点
- jQuery插入,复制、替换和删除节点
- jQuery插入,复制、替换和删除节点
- jQuery:插入,复制,替换和删除节点
- jQuery插入,复制、替换和删除节点
- jQuery:插入,复制,替换和删除节点
- JQUERY插入,复制、替换和删除节点
- jQuery插入,复制、替换和删除节点
- jQuery插入,复制、替换和删除节点
- jQuery -> 删除/替换DOM元素
- JQuery插入,复制,替换和删除ul中的li
- jQuery节点追加、替换、删除、复制
- jQuery中DOM节点删除、复制、替换、
- jQuery-创建、删除、复制、替换、包裹节点
- jQuery 文档操作 之 文档的插入操作、删除、复制和替换
- 元素的创建,插入,替换和删除
- 海量数据解决方案 知识总结
- C++ 基于CSock的远程五子棋对弈程序
- rhel7 install mysql
- 利用栈的中序遍历二叉树的非递归算法
- JAVA 中BIO,NIO,AIO的理解
- jQuery 删除、复制和替换元素
- 传统IO
- XMPP聊天之Openfire后台的安装和配置
- 初识ListView
- java 接口 抽象类 继承 重载 重写 多态
- 多态的成员(变量、方法)访问特点【非静态】
- #android#java的常用类
- 设计模式之单例模式
- 在ubuntu中配置java环境并运行java程序