经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery(四)、文档处理
来源:cnblogs  作者:(普通人)  时间:2019/4/17 9:03:42  对本文有异议

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:生成包裹结构的一个元素。

  1. // HTML 代码:
  2. <div class="container">
  3. <div class="inner">Hello</div>
  4. <div class="inner">Goodbye</div>
  5. </div>
  6.  
  7. // jQuery 代码:
  8. $('.inner').wrap(function() {
  9. return '<div class="' + $(this).text() + '" />';
  10. });
  11. // 结果:
  12. <div class="container">
  13. <div class="Hello">
  14. <div class="inner">Hello</div>
  15. </div>
  16. <div class="Goodbye">
  17. <div class="inner">Goodbye</div>
  18. </div>
  19. </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:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

原文链接:http://www.cnblogs.com/www-123456/p/10717832.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号