1. append(content|fn), 向每个匹配的元素内部追加内容

在内部结尾添加。

参数说明:

  • content:String, Element, jQuery,要追加到目标中的内容
  • function(index, html):返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
$("p").append("<b>Hello</b>");

2. appendTo(content), 把所有匹配的元素追加到另一个指定的元素元素集合中

实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

参数说明:

  • content:String,用于被追加的内容

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用end()方法.

<p>I would like to say: </p>
<div></div><div></div> $("p").appendTo("div"); //结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
<div></div><div></div>

$("<p/>")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2"); //结果<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

3. prepend(content), 向每个匹配的元素内部前置内容

参数说明:

  • content:String, Element, jQuery,要插入到目标元素内部前端的内容
  • function(index, html):返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
$("p").prepend("<b>Hello</b>");

4. prependTo(content), 把所有匹配的元素前置到另一个、指定的元素元素集合中

实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法。

参数说明:

  • content:String,用于匹配元素的jQuery表达式
$("p").prependTo("#foo");

5. after(content|fn), 在每个匹配的元素之后插入内容

参数说明:

  • content:String, Element, jQuery,插入到每个目标后的内容
  • function(index, html):函数必须返回一个html字符串
<p>I would like to say: </p>

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

//结果
<p>I would like to say: </p><b>Hello</b>

6. before(content|fn), 在每个匹配的元素之前插入内容

参数说明:

  • content:String, Element, jQuery,插入到每个目标前的内容
  • function(index, html):函数必须返回一个html字符串
<p>I would like to say: </p>

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

//结果
<b>Hello</b><p>I would like to say: </p>

7. insertAfter(content), 把所有匹配的元素插入到另一个、指定的元素元素集合的后面

实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法。

参数说明:

  • content:String
<p>I would like to say: </p><div id="foo">Hello</div>

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

//结果
<div id="foo">Hello</div><p>I would like to say: </p>

8. insertBefore(content), 把所有匹配的元素插入到另一个、指定的元素元素集合的前面

实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法。

参数说明:

  • content:String,用于匹配元素的jQuery表达式
$("p").insertBefore("#foo");

9. wrap(html|element|fn), 把所有匹配的元素用其他元素的结构化标记包裹起来

参数说明:

  • html:String, HTML标记代码字符串,用于动态生成元素并包裹目标元素
  • element:用于包装目标元素的DOM元素
  • fn:Function, 生成包裹结构的一个函数
//把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");

10. unwrap(), 将移出元素的父元素, 能快速取消 .wrap()方法的效果

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

<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div> $("p").unwrap() //结果
<p>Hello</p>
<p>cruel</p>
<p>World</p>

11. replaceWith(content|fn), 将所有匹配的元素替换成指定的HTML或DOM元素

参数说明:

  • content:String, Element, jQuery, Function,用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话,函数返回值必须是HTML字符串
  • fn:Function, 返回HTML字符串,用来替换的内容
<p>Hello</p><p>cruel</p><p>World</p>

$("p").replaceWith("<b>Paragraph. </b>");

//结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

12. replaceAll(selector), 用匹配的元素替换掉所有 selector匹配到的元素

参数说明:

  • selector:选择器, 用于查找所要被替换的元素
$("<b>Paragraph. </b>").replaceAll("p");

13. empty(), 删除匹配的元素集合中所有的子节点

$("p").empty();

14. remove([expr]), 从DOM中删除所有匹配的元素

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

参数说明:

  • expr:String, 用于筛选元素的jQuery表达式
<p>Hello</p> how are <p>you?</p>

$("p").remove();

//结果:how are

15. detach([expr]), 从DOM中删除所有匹配的元素

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

参数说明:

  • expr:String, 用于筛选元素的jQuery表达式
<p>Hello</p> how are <p>you?</p>

$("p").remove();

//结果:how are

16. clone([Even[,deepEven]]), 克隆匹配的DOM元素并且选中这些克隆的副本

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

参数说明:

  • Events:Boolean, 一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false
  • Events[,deepEvents]:Boolean,Boolean
    • 一个布尔值(true 或者 false)指示事件处理函数是否会被复制
    • 一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制
<b>Hello</b><p>, how are you?</p>

$("b").clone().prependTo("p");

//结果
<b>Hello</b><p><b>Hello</b>, how are you?</p>

jQuery中的文档处理(五)的更多相关文章

  1. jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强)

    jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...

  2. jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  4. 关于js与jquery中的文档加载

    jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$( ...

  5. 孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档

    孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档 (完整学习过程屏幕记录视频地址在文末) 今天继续研究Firebase数据库,利用google免费提供的这个数据库 ...

  6. jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  7. Mongoose在向集合中插入文档时的集合命名问题

    Mongoose使用结构化的模式应用到MongoDB集合,为MongoDB Node.js原生驱动程序提供了更多的功能和简化了数据库操作. 从创建连接到向数据库中写入一个条数据经历了以下步骤: 1.连 ...

  8. 在SharePoint 2013 中使用文档库Scheduling (计划公布功能)

    本文讲述在SharePoint2013 中使用文档库Scheduling (计划公布功能)的步骤和注意的事项. 文档库Scheduling (计划公布功能) 用于设定当文档通过审批后特定的时间区间内才 ...

  9. JavaScript中的文档模式和严格模式

    JavaScript中的文档模式和严格模式 语法模式有普通模式和严格模式两种 普通模式:正常的JavaScript语法拼写以及代码编写(相对于严格模式存在着语法上的不严谨),尽可能的识别错误以及不规范 ...

随机推荐

  1. acwing 528. 奶酪 解题记录

    习题地址 https://www.acwing.com/problem/content/description/530/ 现有一块大奶酪,它的高度为h,它的长度和宽度我们可以认为是无限大的,奶酪中间有 ...

  2. bzoj5219 [Lydsy2017省队十连测] 最长路径

    题意: 做法来自 首先竞赛图缩点后是一条链,\(1\)号节点在开头的那个\(SCC\)中,因此从\(1\)号节点出发的最长链即为\(1\)号节点所在的\(SCC\)的大小\(+1\)号节点拓扑序之后的 ...

  3. wepy安装后提示Cannot read property 'addDeps'

    最近准备做一个微信小程序,以前一直用的小程序原始api做,但是这次准备用一个框架来做练习,当然在做之前需要比较一下现在小程序框架的优缺点. 经过认真挑选,选定wepy,Taro,uni-app,mpv ...

  4. 大话设计模式Python实现-单例模式

    单例模式(Singleton Pattern):保证类仅有一个实例,并提供一个访问它的全局访问点. 下面是单例模式的demo: #!/usr/bin/env python # -*- coding:u ...

  5. leetcode一刷总结,明天二刷

    1:基础的数据结构:图掌握极差,二叉树次之 2:常用的算法思想:dp,深度有先,广度优先等等. 3:优化以解决的题目,注意思想的总结 4:将约150道题都刷掉 5:优先解决设计算法思想的题目类别,其次 ...

  6. mysql中的replace

    replace字面意思是替换,在mysql里面的运用是 如下图所示 1.  replace into test values(6, 'wowowo', 'new', 'japan') 这条语句则他会正 ...

  7. 【Linux命令】文件目录管理命令7个(touch、mkdir、cp、mv、rm、dd、file)

    目录 touch创建空白文档或设置文件时间 mkdir创建空白目录 cp复制文件或目录 mv剪切文件或重命名文件 rm删除文件或目录 dd按照指定大小和个数的数据库来复制文件或转换文件 file查看文 ...

  8. Linq分页排序通用方法

    1.通用方法 2.调用 -----------------------------1.------------------------------------------- public class ...

  9. Java生鲜电商平台-用户管理的架构与实战

    Java生鲜电商平台-用户管理的架构与实战 在电商后台中,用户管理是运营人员管理用户的模块.这里的用户区别于运营人员,会在权限的角色管理中分别阐述.这里的用户包含平台的一般用户,会员用户等.本文将分享 ...

  10. Linux常用命令(2)

    3.帮助命令 A,帮助命令:man    B,其他帮助命令 3.1,格式:man [命令名] 查看命令拥有哪个级别的帮助:                                       ...