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. Ibatis XML 配置文件注释引起错误及解决方案

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp35 Ibatis XML 配置文件注释引起错误及解决方案 最近在使用Iba ...

  2. JAVA设计模式：状态模式

    声明:转载请说明来源:http://www.cnblogs.com/pony1223/p/7518226.html 一.引出状态模式 假设我们现在有一个糖果机项目,那么我们知道正常一般糖果机提供给用户 ...

  3. express传输buffer文件

    最近要做一个功能,导出动态生成的excel文件,这个普普通通的功能却让我折腾了半天.大致流程是这样的,将数据结合excel模板通过ejsExcel库,动态生成excel文件,并发送到客户端. 在exp ...

  4. 交叉编译器安装 gcc version 4.3.3 (Sourcery G++ Lite 2009q1-203)

    安装环境    :ubuntu 14.04 安装包       :toolchain.tar.gz 编译器版本:gcc version 4.3.3 (Sourcery G++ Lite 2009q1- ...

  5. 第五次作业2、请将该code进行代码重构，使之模块化，并易于阅读和维护；

    1.请运行下面code,指出其功能: (需附运行结果截图,并用简短文字描述其功能) 显示了人的姓名.年龄 2.请将该code进行代码重构,使之模块化,并易于阅读和维护: 3.观看视频The Exper ...

  6. 微信小程序中的微信支付js代码和流程详解

    微信支付流程 步骤 (一)获取用户的信息 (二)统一下单(返回的prepay_id用于第(三)步的请求参数) (三)发起支付请求 操作(这边假设你已经获得了用户的openId) (一).获取用户ope ...

  7. 201521123071 《JAVA程序设计》第十周学习总结

    第十周-异常与多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业:本次PTA作业题集异常.多线程 1. finally:题目4-2 1. ...

  8. 201521123078 《java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 创建线程:定义Thread的子类可以实现Runable接口 线程的控制:线程暂停Thread.sleep() ...

  9. lintcode.46 主元素

    给定一个整型数组,找出主元素,它在数组中的出现次数严格大于数组元素个数的二分之一. 注意事项 You may assume that the array is non-empty and the ma ...

  10. Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'zhongfucheng.user' does

    编写第一个Hibernate程序的时候,就发现出现了错误 Exception in thread "main" org.hibernate.exception.SQLGrammar ...