jQuery(四)、文档处理

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》

1 内部插入

　　1.1 append(content | fn)

　　向每个匹配的元素内部追加内容。

　　参数：

　　(1) content：要追加到目标中的内容。

　　(2) function(index, html)：返回一个HTML字符串，用于追加到每一个元素里面。index为元素索引，html为元素内的html。

　　1.2 appendTo(content)

　　把所有匹配元素追加到另一个指定的元素集合中。

　　1.3 prepend(content | fn)

　　向每个匹配的元素内部添加前置内容。这是在所有匹配元素内部开始插入内容的最佳方式。

　　参数：

　　(1) content：要插入到目标元素内部的内容。

　　(2) function(index, html)：返回一个HTML字符串，用于追加到每一个元素里面。index为元素索引，html为元素内的html。

　　1.4 prependTo(content)

　　把所有匹配的元素添加到另一个指定的元素集合的前置。

2 外部插入

　　2.1 after(content | fn)

　　在每个匹配的元素之后插入内容。

　　2.2 before(content | fn)

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

　　2.3 insertAfter(content)

　　把所有匹配的元素插入到另一个、指定的元素集合的后面。

　　2.4 insertBefore(content)

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

3 包裹

　　3.1 wrap(html | element | fn)

　　把所有匹配的元素用其他元素的结构化标记包裹起来。

　　参数：

　　(1) html：HTML标记代码字符串，用于动态生成元素并包裹目标元素。

　　(2) element：用于包装目标元素的DOM元素。

　　(3) fn：生成包裹结构的一个元素。

// HTML 代码:

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

// jQuery 代码:

$('.inner').wrap(function() {

  return '<div class="' + $(this).text() + '" />';

});

// 结果:

<div class="container">

  <div class="Hello">

    <div class="inner">Hello</div>

  </div>

  <div class="Goodbye">

    <div class="inner">Goodbye</div>

  </div>

</div>

　　3.2 upwarp()

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

　　3.3 warpAll(html | element)

　　将所有匹配的元素用单个元素包裹起来。

　　参数：

　　(1) html：HTML标记代码字符串，用于动态生成元素并包装目标元素。

　　(2) element：用于包装目标元素的DOM元素。

　　3.4 warplnner(html | element | fn)

　　将每一个匹配的元素的子内容(包括文本节点)用一个html结构包裹起来。

　　参数：

　　(1) html：HTML标记代码字符串，用于动态生成元素并包裹目标元素

　　(2) element：用于包装目标元素的DOM元素

　　(3) fn：生成包裹结构的一个函数

4 替换

　　4.1 replaceWith(content | fn)

　　将所有匹配的元素替换成指定的HTML或DOM元素。

　　参数：

　　(1) content：用于将匹配元素替换掉的内容。

　　(2) fn：返回HTML字符串，用于替换的内容。

　　4.2 replaceAll(selector)

　　用于匹配的元素替换掉所有 selector选择匹配到的元素。

5 删除

　　5.1 empty()

　　删除匹配的元素集合中所有的子节点。

　　5.2 remove([selector])

　　从DOM中删除所有匹配的元素。

　　这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

　　参数：

　　(1) .remove() : 删除所有元素

　　(2) selector : 用于筛选元素的jQuery表达式,如 $("p").remove(".hello");

　　5.3 detach([selector])

　　从DOM中删除所有匹配的元素。

　　这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

　　参数：

　　(1) .remove() : 删除所有元素

　　(2) selector : 用于筛选元素的jQuery表达式,如 $("p").remove(".hello");

6 复制

　　6.1 clone([Even[, deepEven]])

　　克隆匹配的DOM元素并且选中这些克隆的副本。

　　在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

　　参数：

　　(1) Event：一个布尔值，指示事件处理函数是否会被复制。v1.5以上版本默认值是：false。

　　(2) Event[, deepEvent]：1：一个布尔值，指示事件处理函数是否会被复制

　　　　　　　　　　　　 2：一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

巴特西

jQuery(四)、文档处理

最新文章

热门文章