jquery中的dom操作

废话不说：直接上例子：

1.添加节点-html页面

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

<body>

<ul id="city">

<li id="bj" name="beijing">北京</li>

<li id="cq" name="chongqing">重庆</li>

</ul>

<br>

<input type="button" value="添加">

</body>

Js代码

<script language="JavaScript">

/**

* 创建一个li节点<li id="tj" name="tianjing">天津</li>，追加到最后的li节点的后面

*/

$("input[type='button']").click(function(){

/**

* 1、创建一个节点li

* 2、设置两个属性

*/

var $li = $("<li/>").attr("id","tj").attr("name","tianjing").attr("aaa","bbbb").text("天津");

$("ul").append($li);//在<ul>内部添加元素

});

</script>

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

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

代码示例：

HTML 代码:

<p>I would like to say: </p><div></div><div></div>

jQuery 代码:

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

结果:

<div><p>I would like to say: </p></div><div><p>I would like to say: </p></div>

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

示例

描述:

向所有段落中前置一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

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

结果:

[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(content)

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

示例

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:

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

jQuery 代码:

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

结果:

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

返回值:jQueryafter(content)      在每个匹配的元素之后插入内容。

示例

描述:

在所有段落之后插入一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

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

结果:

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

返回值:jQuerybefore(content)在每个匹配的元素之前插入内容。

示例

描述:

在所有段落之前插入一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

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

结果:

[ <b>Hello</b><p>I would like to say: </p> ]

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

示例

描述:

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

HTML 代码:

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

jQuery 代码:

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

结果:

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

替换：

replaceWith(content) 返回值jQuery将所有匹配的元素替换成指定的HTML或DOM元素。

示例

描述:

把所有的段落标记替换成加粗的标记。

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

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

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

描述:

用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。

HTML 代码:

<div class="container">  <div class="inner first">Hello</div>  <div class="inner second">And</div>  <div class="inner third">Goodbye</div></div>

jQuery 代码:

$('.third').replaceWith($('.first'));

结果:

<div class="container">  <div class="inner second">And</div>  <div class="inner first">Hello</div></div>

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

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

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

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

删除节点

empty() 删除匹配的元素集合中所有的子节点。  返回值:jQuery

示例

描述:

把所有段落的子元素（包括文本节点）删除

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();

结果:

<p></p>

返回值:jQueryremove([expr])   用于筛选元素的jQuery表达式、

示例

描述:

从DOM中把所有段落删除

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

结果:

how are

返回值:jQuerydetach([expr])从DOM中删除所有匹配的元素。

示例

描述:

从DOM中把所有段落删除

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").detach();

结果:

how are

JavaWeb学习笔记——jquery中的dom操作的更多相关文章

  1. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  2. Jquery：jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  3. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  4. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  5. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  6. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  7. 锋利的jQuery ——jQuery中的DOM操作（三）

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  8. jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  9. Jquery：Jquery中的DOM操作<二>

    由于昨天晚上回来的晚,写的有点匆忙,所以昨天的学习笔记中出现了多处错误的地方,幸好有各位园友帮忙指出,在这里谢过各位了!今天继续学习关于Jquery中DOM的操作,其实是昨天随笔的延续,求围观!!! ...

随机推荐

  1. 转：swagger 入门

    前言 swagger ui是一个API在线文档生成和测试的利器,目前发现最好用的. 为什么好用?Demo 传送门 支持API自动生成同步的在线文档 这些文档可用于项目内部API审核 方便测试人员了解A ...

  2. Java单元测试之JUnit篇

    单元测试是编写测试代码,应该准确.快速地保证程序基本模块的正确性. 好的单元测试的标准 JUnit是Java单元测试框架,已经在Eclipse中默认安装. JUnit4 JUnit4通过注解的方式来识 ...

  3. 团队作业8——第二次项目冲刺（Beta版本）5.24

    1.当天站立式会议照片 会议内容 1.总结前几次会议中出现的问题. 2.对第二天需要做的任务进行分配. 3.询问团队队员任务完成情况以及时间分配是否充分. 4.对今后的任务,发表自己的看法. 2.每个 ...

  4. 英语学习app案列分析

    很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课?都不对,软件工程有理论,有实践,更重要的是分析,思辨,总结.在课程 ...

  5. 201521123076《java程序设计》第四次总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. instanceof可以测试一个对象是否是某个类(或其父类),右边'is a?'左边关系. ...

  6. Backtrack下的dns爆破工具的目录

    直接可以切换到 /pentest/enumeration/dns#

  7. JAVA课程设计——“小羊吃蓝莓”小游戏

    JAVA课程设计--"小羊吃蓝莓"小游戏 1. 团队课程设计博客链接 http://www.cnblogs.com/HXY071/p/7061216.html 2. 个人负责模块或 ...

  8. 201521123035《Java程序设计》第十一周作业

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 本周对多线程的冲突是从多线程的冲突开始讲起,从而提出互斥共享与互斥访问.其中,互斥访问提到了synchronize ...

  9. 201521123045java课程设计---定时器

    #课程设计--定时器(201521123045 郑子熙) 1.团队课程设计博客链接 http://www.cnblogs.com/chendajia/p/7065730.html 2.个人负责模块或任 ...

  10. MarkDown 例子

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...