jQuery 删除、复制和替换元素
2016-07-16 23:46
555 查看
一、使用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 ajax向spring mvc controller中传值并接受及解析返回值
- jquery实现 datatables
- jQuery 淡入淡出、滑动和动画
- jQuery 事件
- 使用jQuery实现网页定位导航
- jQuery 选择器
- jquery 跨域post 问题解决
- jQuery.loadTemplate客户端模板
- treeTable jquery的树表组件 java实现 Java实现树形菜单
- jQuery插件之jqzoom的使用和参数设置
- jQuery.tap.js插件tap事件执行两次问题
- jquery图片轮播，点击左右按钮轮播，可控制是否自动播放，是否循环轮播（自写）
- 用jquery实现图片轮播
- jQuery学习之jQuery Ajax用法详解
- Jquery $.ajax/$.post/$.get
- jquery数字打分插件与嵌入到EasyUI datagrid中的示例
- jQuery 3.0最终版发布，十大新特性眼前一亮
- jquery 常用的tabs效果代码
- jQuery之动画效果