主要有添加,替换,删除,清空三种方式:

添加又分为,在之前添加,在之后添加,在元素外之前添加,在元素外之后添加。每个添加方式又有俩种方法(效果一模一样):

俩种方法区添加,在原内容之后:

p.appendTo("#div");
$("#div").append(p);

俩种方法区添加,在原内容之前:

p.prependTo("#div");
$("#div").prepend(p);

俩种方法区添加,在原内容外的前面添加:

p.insertBefore("#div");
$("#div").before(p);

俩种方法区添加,在原内容外的后面添加:

p.insertAfter("#div");
$("#div").after(p);

替换指定结点元素,也时俩种方式(下标是从1开始):

p.replaceAll("div p:nth-child(2)");
$("div p:nth-child(2)").replaceWith(p);

删除指定结点元素:

1.删除整个div:

$("div").remove();

2.删除指定元素,下标从1开始:

$("div p:nth-child(4)").remove();

清空内容 和删除也一样也时俩种方式(清空和删除的区别:清空只是将内容清空,框架还在,删除就是全部删除):

1.清空整个div:

$("div").empty();

2.清空指定元素:

$("div p:nth-child(2)").empty();

jQuery操作页面的元素的更多相关文章

  1. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  2. 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  3. jQuery操作得到DOM元素

    jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用.以下是一个小样例及其效果图. 代码例如以下: <html xml ...

  4. jQuery 实战读书笔记之第五章:使用 jQuery 操作页面

    html 如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  5. jQuery操作DOM基础 - 元素属性的查看与设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Jquery 操作页面中iframe自动跟随窗口大小变化,而页面不出现滚动条,只在iframe内部出滚动条

    很多时候大家需要iframe自适应所加载的页面高度而不要iframe滚动条,但是这次我需要的是页面不需要滚动条而iframe要滚动条,且iframe自动跟随窗口大小变化.自适应页面大小.下面是代码,下 ...

  7. jquery操作ajax返回的页面元素

    这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...

  8. jquery操作iframe的方法:父页面和子页面相互操作的方法

    今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互 ...

  9. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

随机推荐

  1. python使用openpyxl操作excel总结

    安装openpyxl pip install openpyxl 简单示例 from openpyxl import Workbook #创建一个工作薄对象,也就是创建一个excel文档 wb = Wo ...

  2. java VS c#,异同点

    因工作安排,后期需要维护一个java项目.所以稍微熟悉下java,开此篇记录下java与c#的区别点,方便增强自己学习效果.肯定是不全的,可能是有错的,欢迎批评指正. 一.关键字 描述 C# Java ...

  3. windows中修改IP映射的位置

    windows中修改IP映射的位置 置顶 2018年08月05日 14:42:44 wangxiaolong0 阅读数:1473   在安装linux之后,发现windows不能通过映射来访问linu ...

  4. TCP--文件上传

    客户端 public class Test2_UpdateClient { public static void main(String[] args) throws UnknownHostExcep ...

  5. 微擎JS资源请求 403

    微擎JS资源请求 403 1.确认JS是否指定 type ==> text/javascript 2.确认src的路径是否正确,{MODULE_URL}项目的根目录带反斜杠 3.实例:(PS:t ...

  6. beta week 1/2 Scrum立会报告+燃尽图 02

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9912 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩昊 ...

  7. vue 父子组件传值,兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

  8. DDD实战与进阶 - 值对象

    目录 DDD实战与进阶 - 值对象 概述 何为值对象 怎么运用值对象 来看一个例子 值对象的持久化 总结 DDD实战与进阶 - 值对象 概述 作为领域驱动设计战术模式中最为核心的一个部分-值对象.一直 ...

  9. IDEA必备插件系列 - Key Promoter X(快捷键使用提示)

    Key Promoter X 是用于基于 IntelliJ 产品(如 IDEA,Android Studio 或 CLion)的插件,它有助于在工作时从鼠标操作中 学习基本的键盘快捷键. 当您在 ID ...

  10. 删除节点(removeChild())

    remoceChild():方法将从一个给定元素里删除一个子节点: reference = element.removeChild(node); 这个方法的返回值是一个指向已经被删除的子节点的引用指针 ...