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. Android studio 一些技术添加依赖，依赖库

    Recyclerview compile 'com.android.support:recyclerview-v7:21.0.+' butterKnife 的依赖compile 'com.jakewh ...

  2. 团队作业8——第二次项目冲刺（Beta阶段）博客汇总

    一.冲刺计划安排 http://www.cnblogs.com/teamworkers/p/6875742.html 二.七天冲刺汇总 http://www.cnblogs.com/teamworke ...

  3. 团队作业4——第一次项目冲刺（Alpha版本） Day2

    1.Day 2 站立式会议: 2.leangoo任务分截图: 3.会议记录及任务分配: 队员 今日进展 明日安排 林燕 完善逻辑架构框架,继续学习微信开发 完成4.24随笔 王李焕 初步总结微信开发的 ...

  4. 201521123036 《Java程序设计》第6周学习总结

    本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 对象克隆:Clon ...

  5. 201521123106《java程序设计》第三周学习总结

    1. 本周学习总结 2. 书面作业 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pub ...

  6. java课程设计---团体

    课设题目:学生信息管理系统 一.团队成员介绍 周汉麟(组长):网络1511 201521123030 吴敏烽(组员):网络1512 201521123044 二.项目git地址 [课设] 吴敏烽 ht ...

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

    1. 本周学习总结 (1)网络中为了进行数据交换(通信)而建立的规则.标准或约定(=语义+语法+规则)称之为协议(常用http/ftp) (2)大致熟悉了TCP协议,但是UDP怎么辣么蓝,好理解却用不 ...

  8. shell脚本之流程控制

      shell脚本之流程控制 shell脚本之流程控制 条件语句 条件判断 循环语句for,while,until for循环 while循环 until循环 循环控制语句continue 循环控制语 ...

  9. 定时器(setTimeout和setInterval)调用带参函数失效解决方法

    方法1:用匿名函数包裹  function test(str){  alert(str);  }  var a = "abcde"  setTimeout(function(){  ...

  10. 树莓派3 B+ 的摄像头简单使用（video-streamer）

    一.首先在某东上购买树莓派摄像头 我的买的硬件张这个样子的(CSI接口摄像头): 正视图                                                         ...