jQuery 删除复制和替换元素

Posted A_山水子农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 删除复制和替换元素相关的知识,希望对你有一定的参考价值。

一、使用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>
divheight: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操作DOM

DOM——拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap()

为啥 Jquery 只影响第一个 div 元素? [复制]