【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)是一定要有的,一个调查有多个 ...
随机推荐
- telnet建立http连接获取网页HTML内容
利用telnet可以与服务器建立http连接,获取网页,实现浏览器的功能.它对于需要对http header进行观察和测试到时候非常方便.因为浏览器看不到http header. 步骤如下: 1. 运 ...
- JAVA_jdk下载和环境变量的配置
Java是一种计算机编程语言,拥有跨平台.面向对象.泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发. 基本组成: Java由四方面组成:Java编程语言.Java类文件格式.Java虚拟 ...
- python更新后yum问题
How to switch between Python versions on Fedora Linux Currently, the default python version on Fedor ...
- maven的eclise配置
http://blog.csdn.net/guanning0109/article/details/26069277
- 发起post、get请求
HttpURLConnection对象 /*** * 发起post请求,传输xml数据 * @param strUrl 请求地址 * @param xml 发送数据 * @return string ...
- C#之字符串篇
大杂烩 一.类型转换 字符串转整形: int a = int.Parse(""); //不能转换null int b = Convert.ToInt32("&quo ...
- NAT穿越
1.NAT类型 目前主要的NAT类型有如下几种: 1)Full-cone NAT, also known as one-to-one NAT 一旦一个内网地址 (iAddr:iPort) 被映射到一个 ...
- Windows XP系统下添加任务计划常出现问题解决办法
Windows XP系统下添加任务计划常出现问题解决办法 计划任务就是让电脑在指定的时间内执行指定的动作(计划动作),这些动作可以是一个程序,也可以是一个批处理,但是至少是可以运行的(通俗一些就是双击 ...
- 关于ajax的提交未完再续！
$.ajax({ cache: true, type: "POST", url:"__URL__/add", data:$('#myform').seriali ...
- DataTable数据检索的性能分析（转寒江独钓)
我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic Data,XML, NHibernate,LINQ to SQ ...