【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)是一定要有的,一个调查有多个 ...
随机推荐
- [转]Extjs combo数据绑定与获取
原文地址:http://www.cnblogs.com/loveme123/archive/2012/05/10/2494466.html 1. 配置combo: { ...
- ob_start()
ob_start()函数用于打开缓冲区 1.用于header()之前 ob_start(); //打开缓冲区 echo "Hellon"; //输出 header("lo ...
- Django简单的数据库操作
当然,本篇的前提是你已经配置好了相关的环境,这里就不详细介绍. 一. 在settings.py文件中设置数据库属性. 如下: DATABASES = { 'default': { 'ENGINE': ...
- 平衡二叉查找树（AVL）的理解与实现
AVL树的介绍 平衡二叉树,又称AVL(Adelson-Velskii和Landis)树,是带有平衡条件的二叉查找树.这个平衡条件必须要容易保持,而且它必须保证树的深度是 O(log N).一棵AVL ...
- JS实现网页批量下载文件，支持PC/手机
//把下载链接放入集合里 var downloadData = new Array{"http://www.empli.com/data1.apk","http://ww ...
- 牛顿法|阻尼牛顿法|拟牛顿法|DFP算法|BFGS算法|L-BFGS算法
一直记不住这些算法的推导,所以打算详细点写到博客中以后不记得就翻阅自己的笔记. 泰勒展开式 最初的泰勒展开式,若 在包含 的某开区间(a,b)内具有直到n+1阶的导数,则当x∈(a,b)时,有: ...
- wordpress 函数、条件判断以及文件的总结
WordPress基本模板文件 一套完整的WordPress模板应至少具有如下文件: style.css : CSS(样式表)文件 index.php : 主页模板 archive.php : Arc ...
- API接口：分页
// 查询满足要求的总记录数 $count = M("back")->where($back_map)->count(); $pagecount = ceil($cou ...
- Androidstudio报错UnsupportedClassVersionError
报错信息 Error:java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.m ...
- win7下安装和使用Windows XP Mode
如果想在电脑中安装多个操作系统有几种方法: 1.安装虚拟机,继而在虚拟机中安装操作系统.虚拟机个数就相当于电脑个数,常用的虚拟机软件有VMVare,VMVare功能齐全,但是安装文件较大. 2.如果你 ...