jQuery 文档处理

时间 2019-12-14

标签 jquery 文档处理栏目 JQuery 繁體版

原文原文链接

append appendTo
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>Hello world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每一个 p 元素的结尾添加内容</button>
</body>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(function(n){
      return "<b>This p element has index " + n + "</b>";
    });
  });
});
</script>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每一个 p 元素的结尾添加内容</button>
</body>

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。javascript

提示：append() 和 appendTo() 方法执行的任务相同。不一样之处在于：内容和选择器的位置，以及 append() 可以使用函数来附加内容。html

$(" Hello World!").appendTo("p");

1. append(content)方法java

方法做用：向每一个匹配的元素内部追加内容。jquery

参数介绍：content (<Content>): 要追加到目标中的内容。app

用法示例：dom

HTML代码为I come from I love 函数

向全部p标签中追加一个单词china，则写法为 $("p").append("china");spa

结果为：I come from chinaI love china code

2. appendTo(expr)方法htm

方法做用：把全部匹配的元素追加到指定的元素元素集合中。

参数介绍：expr (String): 用于匹配元素的jQuery表达式。

用法示例：

HTML代码为I love china

把标签b追加到p元素中，写法为$("b").appendTo("p");

结果为：>I love china

使用appendTo这个方法是颠倒了常规的$(A).append(B)的操做，即不是把B追加到A中，而是把A追加到B中。

prepend() prependTo() 元素内部前置内容。

在每一个匹配的元素以后插入内容。$("p").after("<b>Hello</b>");

在每一个匹配的元素以前插入内容。

$("p").before("<b>Hello</b>");

把全部匹配的元素插入到另外一个、指定的元素元素集合的后面。$("p").insertAfter("#foo");

把全部匹配的元素插入到另外一个、指定的元素元素集合的前面。

$("p").insertBefore("#foo");

把全部的段落用一个新建立的div包裹起来$("p").wrap("<div class='wrap'></div>");

用ID是"content"的div将每个段落包裹起来

$("p").wrap(document.getElementById('content'));

今晚看书的时候发现jQuery有三个包裹节点的方法，百度了一下jQuery wrap() / wrapAll() / wrapInner()，果真搜索结果 W3School的文档说明是排第一的。

但是，W3School的解释是这样的：

jQuery 文档操做 - wrap() 方法

wrap() 方法把每一个被选元素放置在指定的 HTML 内容或元素中。
jQuery 文档操做 - wrapAll() 方法

wrapAll() 在指定的 HTML 内容或元素中放置全部被选的元素。
jQuery 文档操做 - wrapInner() 方法

wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每一个被选元素中的全部内容 (inner HTML)。
我读的书少，看见这样的解释不能当即解决个人困惑真的很烦。

仍是动手最实际。

这是用来比较的原代码：

我是占位子的。
我是占位子的。
wrap()方法

$("p").wrap("");

结果：

从图中能够看出strong标签包围了每一个匹配的p标签。

wrapAll()方法

$("p").wrapAll("");

结果：

从图中能够看出strong标签把所有匹配的p标签一会儿全都包围了。

wrapInner()方法

$("p").wrapInner("");

结果：

从图中能够看出strong标签内嵌入每一个匹配的p标签里面。

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

$("p").unwrap()   移除父级元素，使p元素再也不被包围

在jquery中，咱们能够经过replaceWith（）和replaceAll（）方法来替换元素中的节点。

语法格式：replaceWith（content）将全部选择的元素替换成指定的html和dom元素。其中参数被选择替换的内容。

replaceAll（selector）替换指定的selector元素。

示例：在下面的页面中存在两个span标记。经过上面两个函数分别替换元素的内容

1 <script type="text/javascript">
2 $(function() {
3 $("#Span1").replaceWith("Rainier");
4 $("han163@163.com").replaceAll("#Span2");
5 })
6 </script>
7 </head>
8 <body>
9 姓名：
10 邮箱：
11 </body>

注意　replaceWith() 与replaceAll() 方法均可以实现元素节点的替换，两者最大的区别在
于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中
所选择的元素。同时，一旦完成替换，被替换元素中的所有事件都将消失。

$(".btn1").click(function(){
$("p").replaceWith(function(){
return "Hello World!";
});
});

删除匹配的元素集合中全部的子节点。$("p").empty();

$("p").remove();

从DOM中删除全部匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，于是能够在未来再使用这些匹配的元素。但除了这个元素自己得以保留以外，其余的好比绑定的事件，附加的数据等都会被移除。

$("p").detach();

从DOM中删除全部匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，于是能够在未来再使用这些匹配的元素。与remove()不一样的是，全部绑定的事件、附加的数据等都会保留下来。

clone()