【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()等。

上一篇:Asp.Net Mvc4 Ajax提交数据成功弹框后跳转页面


下一篇:20145214 《Java程序设计》第4周学习总结