【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一、JQuery中的DOM操作。
什么是DOM：DOM是一中和浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM简称文档对象模型，是Document Oject Model的简写形式。
二、内部插入和外部插入
1.内部插入
（1）append：向调用该方法的元素的内部的结尾处追加内容
a.append(content)，插入之后内容为：<a标签头>a原来的内容+content<a标签尾>
（2）appendTo：将调用的元素自身追加到指定的元素中的内部结尾处。
a.appendTo(content),插入之后的内容为：<content标签头>content原来的内容+a<content标签尾>
（3）prepend：向调用该方法元素的内部的开头处添加内容。
a.prepend(content)，查入之后的内容为：<a标签头>content+a内容<a标签尾>
（4）prependTo：将调用该方法元素自身添加到指定元素的内部开头处。
a.prependTo(content)，插入之后的内容为：<content标签头>a+content原来的内容<content标签尾>
（5）完整代码说明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
#foo1{
background-color: #CCC;
} </style>
<!--引入jquery的js库-->
</head> <body>
<input type="button" value="测试append" id="b1">
<input type="button" value="测试appendTo" id="b2">
<input type="button" value="测试prepend" id="b3">
<input type="button" value="测试prependTo" id="b4">
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul> <span id="foo1">Hello1</span> </body>
<script language="JavaScript">
//* append(content) :向每个匹配的元素的内部的结尾处追加内容
$("#b1").click(function(){
$("#bj").append($("#foo1"));
});
//* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 $("#b2").click(function(){
$("#foo1").appendTo($("#bj"));
});
//* prepend(content):向每个匹配的元素的内部的开始处插入内容 $("#b3").click(function(){
$("#foo1").prepend($("#bj"));
});
//* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处 $("#b4").click(function(){
$("#foo1").prependTo($("#bj"));
});
</script> </html>
Insert_Inside.html
2.外部插入
（1）after(content)：在每个调用的元素之后插入内容
（2）before(content)：在每个调用的元组之前插入内容
（3）insertAfter(content)：把调用该方法的元素自身插入到内容之后。
（4）insertBefore(content)：把调用该方法的元素自身插入到内容之前。
（5）完整代码说明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
p{
background-color: #CCC;
width:200px;
}
</style>
<!--引入jquery的js库-->
</head> <body>
<input type="button" value="测试after" id="b1">
<input type="button" value="测试before" id="b2">
<input type="button" value="测试insertAfter" id="b3">
<input type="button" value="测试insertBefore" id="b4">
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <p id="p3">I would like to say: p3</p> <p id="p2">I would like to say: p2</p> <p id="p1">I would like to say: p1</p> </body>
<script language="JavaScript">
//* after(content) :在每个匹配的元素之后插入内容
$("#b1").click(function(){
$("#bj").after($("#p2"));
});
//* before(content):在每个匹配的元素之前插入内容
$("#b2").click(function(){
$("#bj").before($("#p2"));
});
//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面
$("#b3").click(function(){
$("#bj").insertAfter($("#p2"));
});
//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
$("#b4").click(function(){
$("#bj").insertBefore($("#p2"));
});
</script> </html>
Outer_Insert.html
3.内部插入和外部插入的比较
（1）都不仅能够将新创建的DOM元素插入到文档之中，还能够对原有的DOM元素进行移动。
（2）内部插入插入到标签之中，外部插入插入到标签外面，这是内部插入和外部插入的本质区别。
三、查找节点
1.查找属性节点可以使用JQuery对象的选择器来完成，详情请见上一篇随笔。
2.使用JQuery对象的attr()方法可以得到指定属性的值。
3.可以使用JQuery对象的text()方法得到指定文本节点的文本。
四、节点的CRUD操作
1.创建节点
（1）使用JQuery的工厂函数$()可以创建新节点，但是创建新节点的时候需要传入节点的标签名。
（2）创建文本节点就是在创建节点的时候直接将文本写出来。
（3）创建节点应当注意使用标准的XHTML格式，特别是需要注意闭合标签。
（4）示例：$("<a></a>");这样就创建了一个a节点。
（5）text()方法和arr()方法同时具有设置和获取的功能。
（6）创建节点实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body> <ul id="city">
<li id="bj" name="beijing">北京</li>
</ul> </body>
<script language="JavaScript">
//在city下增加<li id="tj" name="tianjin">天津</li>节点
$li=$("<li></li>");
//<li></li>
//设置属性<li id="tj" name="tianjin"></li>
$li.attr("name","tianjin");
//添加文本节点<li id="tj" name="tianjin">天津</li>
$li.text("天津");
//添加到city的下
$("#city").append($li);
</script> </html>
CreateNewNode.html
（7）核心代码
<script language="JavaScript">
$li=$("<li></li>");
$li.attr("name","tianjin");
$li.text("天津");
$("#city").append($li);
</script>
2.删除节点
（1）可以使用remove()方法和empty()方法删除，但是remove方法删除的是连同标签都删除了，empty方法只是删除了内容。
（2）remove方法：当某个节点调用remove方法之后，该节点及所包含的所有后代节点将会全部被删除，返回值是一个指向已经被删除的节点的引用；如果带有参数，则就是对删除的对象进行筛选，如果满足条件则删除，否则不删除。
（3）empty方法：清空节点。清空元素的后代所有节点，但是不包含元素自身。该方法不带有参数。
（4）删除节点实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script language="JavaScript">
//删除<li id="bj" name="beijing">北京</li>
//$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#bj").empty();
</script> </html>
Delete_Nodes.html
（5）核心代码
//删除<li id="bj" name="beijing">北京</li>
//$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#bj").empty();
3.复制节点
（1）使用方法clone()和clone(true)
（2）clone和clone(true)方法的区别：前者克隆的时候不会带有触发函数等，后者则将监听事件等一并复制走了。
（3）实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<button>保存</button>
<br> <br> <br>
<p>段落</p>
</body>
<script language="JavaScript">
$("button").click(function(){
window.alert("单击了button按钮！");
});
//button增加事件
//克隆button 追加到p上 ,但事件不克隆
//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
/* $back=$("button").clone();
$("p").append($back); */
//克隆button 追加到p上 ,但事件也克隆
//clone(true): 复制元素的同时也复制元素中的的事件
$back=$("button").clone(true);
$("p").append($back);
</script>
</html>
Clone_Nodes.html
（4）核心代码
//克隆button 追加到p上 ,但事件不克隆
//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
/* $back=$("button").clone();
$("p").append($back); */
//克隆button 追加到p上 ,但事件也克隆
//clone(true): 复制元素的同时也复制元素中的的事件
$back=$("button").clone(true);
$("p").append($back);
4.替换节点
（1）替换节点可以使用replaceWith方法和replaceAll方法
（2）replaceWith方法:被替换者主动调用
（3）replaceAll方法：替换者主动调用，实际上和replaceWith方法相对。
（4）实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<button>按钮</button>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
<script language="JavaScript"> //$("button")用 <p>tttttttt</P>替换
/* $newp=$("<p></p>");
$newp.text("按钮将会被替换");
$("button").replaceWith($newp); */ // p 用 <button>保存</button> 替换
$("<button>保存</button>").replaceAll($("p"));
</script>
</html>
ReplaceNode.html
（5）核心代码
//$("button")用 <p>tttttttt</P>替换
/* $newp=$("<p></p>");
$newp.text("按钮将会被替换");
$("button").replaceWith($newp); */
// p 用 <button>保存</button> 替换
$("<button>保存</button>").replaceAll($("p"));
五、属性操作
1.attr()方法：可以设置属性的值或者获取属性的值。
2.实际上JQuery中有很多方法都是既能够设置值也能够修改值的：attr()、html()、text()、val()、height()、width()、css()等。
【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】的更多相关文章
- 【Java EE 学习 32 上】【JQuery】【选择器】
一.JQuery简介 1.JQuery是JavaScript库,封装了很多预定义对象和实用函数. 2.JQury的优势: (1)简洁,其宗旨就是写更少的代码做更多的事. (2)文档声明非常全面:htt ...
- 【Java EE 学习 24 下】【注解在数据库开发中的使用】【反射+注解+动态代理在事务中的应用service层】
一.使用注解可以解决JavaBean和数据库中表名不一致.字段名不一致.字段数量不一致的问题. 1.Sun公司给jdbc提供的注解 @Table.@Column.@Id.@OneToMany.@One ...
- 【Java EE 学习 67 下】【OA项目练习】【SSH整合JBPM工作流】【JBPM项目实战】
一.SSH整合JBPM JBPM基础见http://www.cnblogs.com/kuangdaoyizhimei/p/4981551.html 现在将要实现SSH和JBPM的整合. 1.添加jar ...
- 【Java EE 学习 29 下】【JDBC编程中操作Oracle数据库】【调用存储过程的方法】
疑问:怎样判断存储过程执行之后返回值是否为空. 一.连接oracle数据库 1.需要的jar包:在安装的oracle中就有,所以不需要到官网下载,我的oracle11g下:D:\app\kdyzm\p ...
- 【Java EE 学习 80 下】【调用WebService服务的四种方式】【WebService中的注解】
不考虑第三方框架,如果只使用JDK提供的API,那么可以使用三种方式调用WebService服务:另外还可以使用Ajax调用WebService服务. 预备工作:开启WebService服务,使用jd ...
- 【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】
之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计 实现统计图显示的流 ...
- 【Java EE 学习 70 下】【数据采集系统第二天】【Action中User注入】【设计调查页面】【Action中模型赋值问题】【编辑调查】
一.Action中User注入问题 Action中可能会经常用到已经登陆的User对象,如果每次都从Session中拿会显得非常繁琐.可以想一种方法,当Action想要获取User对象的时候直接使用, ...
- 【Java EE 学习 79 下】【动态SQL】【mybatis和spring的整合】
一.动态SQL 什么是动态SQL,就是在不同的条件下,sql语句不相同的意思,曾经在“酒店会员管理系统”中写过大量的多条件查询,那是在SSH的环境中,所以只能在代码中进行判断,以下是其中一个多条件查询 ...
- 【Java EE 学习 69 下】【数据采集系统第一天】【实体类分析和Base类书写】
之前SSH框架已经搭建完毕,现在进行实体类的分析和Base类的书写.Base类是抽象类,专门用于继承. 一.实体类关系分析 既然是数据采集系统,首先调查实体(Survey)是一定要有的,一个调查有多个 ...
随机推荐
- SSIS同步多个数据库
这周接到了一个新的需求,从IBM DB2,同步数据到SQLServer.在从SQLServer,同步到Oracle. 因为IBM是32位的平台,ORACLE是64位的平台.而且要求使用计划任务,所以需 ...
- 动态规划（DP）基础
DP基础 简单dp 背包问题 记忆化搜索 简单dp 数字三角形 给一个数字构成的三角形,求从顶端走到底部的一条路径,使得路径上的和最大(或者最小). 1 2 3 6 5 4 Example_1 7 3 ...
- [JavaEE]设计模式之SOLID原则
1. S The Single Responsibility Principle 单一责任原则 当需要修改某个类的时候原因有且只有一个(THERE SHOULD NEVER BE MORE THA ...
- yaml
YAML http://baike.baidu.com/link?url=Jqbh_SBnlVuP0dPCknzd5ti5jr4h9HcacA0j56ztf4QsPcXI8kvgFaKpvhRG3em ...
- Java编程中“为了性能”需做的26件事
1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: (1)控制资源的使用,通过线程同步来控制 ...
- hzwer模拟赛 Hzwer的陨石
题目描述 Description 经过不懈的努力,Hzwer召唤了很多陨石.已知Hzwer的地图上共有n个区域,且一开始的时候第i个陨石掉在了第i个区域.有电力喷射背包的ndsf很自豪,他认为搬陨石很 ...
- LYDSY模拟赛day1 String Master
/* 暴力枚举两个后缀,计算最长能匹配多少前缀. 最优策略一定是贪心改掉前 k 个失配的字符. 时间复杂度 O(n3). */ #include<cstdio> ],b[]; int ma ...
- jquery numberbox赋值
numberbox不能使用$('#id').val( '');只能使用$('#id').numberbox('setValue','');
- ASP.NET 系统对象 Request（一）
Request对象 用来获取客户端在请求一个页面或传送一个Form是提供的所有信息.它包括用户的HTTP变量.能够识别的浏览器.存储客户端的Cookie信息和请求地址等. Request对象是Syst ...
- 如何取消 DiscuzX 帖子被系统自动隐？
设置路径: 全局 -> 站点功能 -> 帖子阅读 -> 启用隐藏水帖,选择“否”