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. [C#] 分布式ID自增算法 Snowflake

    最近在尝试EF的多数据库移植,但是原始项目中主键用的Sqlserver的GUID.MySQL没法移植了. 其实发现GUID也没法保证数据的递增性,又不太想使用int递增主键,就开始探索别的ID形式. ...

  2. angularjs-1.3代码学习-$parse

    这次我们来看一下angular的Sandboxing Angular Expressions.关于内置方法的,核心有两块:Lexer和Parser.其中大家对$parse可能更了解一点.好了不多废话, ...

  3. JavaScript 的使用基础总结②DOM

    HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HT ...

  4. 结队编程--基于GUI的四则运算

    coding地址 https://git.coding.net/lizhiqiang0x01/GUI-sizeyunsuan.git 李志强 201421123028 连永刚 201421123014 ...

  5. 【Alpha】Daily Scrum Meeting——Day1

    站立式会议照片 每个人的工作分配 成 员 今日计划完成的任务 胡丹丹 学习手机app开发的总体流程以及搭建APP开发所需要的安卓环境,加强Java语言的学习掌握 曾丽君 学习手机app开发的总体流程以 ...

  6. 201521123030 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4 ...

  7. 201521123077 《Java程序设计》第7周学习总结

    1. 本周学习总结 (图片来自网络) 可以看到,java的容器很多,这里讲一下这周经常用到的 ArrayList:用数组形式保存数据的容器,随机访问比较快,但是插入删除操作都比较耗时,会自动调整内部数 ...

  8. 201521123119《Java程序设计》第4周学习总结

    1. 本周学习总结 2.书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在网上商城 ...

  9. 201521123097《Java程序设计》第一周学习总结

    1.本周学习总结 知道了JAVA语言的发展历史和目前使用的版本,还有什么是JDK(Java Development Kit).JRE (Java Runtime Environment).JVM(Ja ...

  10. 《JAVA程序设计》第10周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中fin ...