【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）完整代码说明
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 #foo1{ 9 background-color: #CCC; 10 } 11 12 </style> 13 <!--引入jquery的js库--> 14 </head> 15 16 <body> 17 <input type="button" value="测试append" id="b1"> 18 <input type="button" value="测试appendTo" id="b2"> 19 <input type="button" value="测试prepend" id="b3"> 20 <input type="button" value="测试prependTo" id="b4"> 21 <ul id="city"> 22 <li id="bj" name="beijing">北京</li> 23 <li id="tj" name="tianjin">天津</li> 24 <li id="cq" name="chongqing">重庆</li> 25 </ul> 26 27 28 <ul id="love"> 29 <li id="fk" name="fankong">反恐</li> 30 <li id="xj" name="xingji">星际</li> 31 </ul> 32 33 <span id="foo1">Hello1</span> 34 35 </body> 36 <script language="JavaScript"> 37 //* append(content) :向每个匹配的元素的内部的结尾处追加内容 38 $("#b1").click(function(){ 39 $("#bj").append($("#foo1")); 40 }); 41 //* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 42 43 $("#b2").click(function(){ 44 $("#foo1").appendTo($("#bj")); 45 }); 46 //* prepend(content):向每个匹配的元素的内部的开始处插入内容 47 48 $("#b3").click(function(){ 49 $("#foo1").prepend($("#bj")); 50 }); 51 //* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处 52 53 $("#b4").click(function(){ 54 $("#foo1").prependTo($("#bj")); 55 }); 56 </script> 57 58 </html>
2.外部插入
（1）after(content)：在每个调用的元素之后插入内容
（2）before(content)：在每个调用的元组之前插入内容
（3）insertAfter(content)：把调用该方法的元素自身插入到内容之后。
（4）insertBefore(content)：把调用该方法的元素自身插入到内容之前。
（5）完整代码说明
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div.visible{ 29 display:none; 30 } 31 p{ 32 background-color: #CCC; 33 width:200px; 34 } 35 </style> 36 <!--引入jquery的js库--> 37 </head> 38 39 <body> 40 <input type="button" value="测试after" id="b1"> 41 <input type="button" value="测试before" id="b2"> 42 <input type="button" value="测试insertAfter" id="b3"> 43 <input type="button" value="测试insertBefore" id="b4"> 44 <ul id="city"> 45 <li id="bj" name="beijing">北京</li> 46 <li id="tj" name="tianjin">天津</li> 47 <li id="cq" name="chongqing">重庆</li> 48 </ul> 49 50 <p id="p3">I would like to say: p3</p> 51 52 <p id="p2">I would like to say: p2</p> 53 54 <p id="p1">I would like to say: p1</p> 55 56 </body> 57 <script language="JavaScript"> 58 //* after(content) :在每个匹配的元素之后插入内容 59 $("#b1").click(function(){ 60 $("#bj").after($("#p2")); 61 }); 62 //* before(content):在每个匹配的元素之前插入内容 63 $("#b2").click(function(){ 64 $("#bj").before($("#p2")); 65 }); 66 //* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面 67 $("#b3").click(function(){ 68 $("#bj").insertAfter($("#p2")); 69 }); 70 //* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 71 $("#b4").click(function(){ 72 $("#bj").insertBefore($("#p2")); 73 }); 74 </script> 75 76 </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）创建节点实例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div.visible{ 29 display:none; 30 } 31 </style> 32 <!--引入jquery的js库--> 33 34 </head> 35 36 <body> 37 38 39 <ul id="city"> 40 <li id="bj" name="beijing">北京</li> 41 </ul> 42 43 </body> 44 <script language="JavaScript"> 45 //在city下增加<li id="tj" name="tianjin">天津</li>节点 46 $li=$("<li></li>"); 47 //<li></li> 48 //设置属性<li id="tj" name="tianjin"></li> 49 $li.attr("name","tianjin"); 50 //添加文本节点<li id="tj" name="tianjin">天津</li> 51 $li.text("天津"); 52 //添加到city的下 53 $("#city").append($li); 54 </script> 55 56 </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）删除节点实例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div.visible{ 29 display:none; 30 } 31 </style> 32 <!--引入jquery的js库--> 33 34 </head> 35 36 <body> 37 <ul id="city"> 38 <li id="bj" name="beijing">北京</li> 39 <li id="tj" name="tianjin">天津</li> 40 <li id="cq" name="chongqing">重庆</li> 41 </ul> 42 <p class="hello">Hello</p> how are <p>you?</p> 43 </body> 44 <script language="JavaScript"> 45 //删除<li id="bj" name="beijing">北京</li> 46 //$("#bj").remove(); 47 //删除所有的子节点 清空元素中的所有后代节点(不包含属性节点). 48 $("#bj").empty(); 49 </script> 50 51 </html>
（5）核心代码
//删除<li id="bj" name="beijing">北京</li> //$("#bj").remove(); //删除所有的子节点 清空元素中的所有后代节点(不包含属性节点). $("#bj").empty();
3.复制节点
（1）使用方法clone()和clone(true)
（2）clone和clone(true)方法的区别：前者克隆的时候不会带有触发函数等，后者则将监听事件等一并复制走了。
（3）实例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div.visible{ 29 display:none; 30 } 31 </style> 32 <!--引入jquery的js库--> 33 </head> 34 <body> 35 <button>保存</button> 36 <br> <br> <br> 37 <p>段落</p> 38 </body> 39 <script language="JavaScript"> 40 $("button").click(function(){ 41 window.alert("单击了button按钮！"); 42 }); 43 //button增加事件 44 //克隆button 追加到p上 ,但事件不克隆 45 //clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为 46 /* $back=$("button").clone(); 47 $("p").append($back); */ 48 //克隆button 追加到p上 ,但事件也克隆 49 //clone(true): 复制元素的同时也复制元素中的的事件 50 $back=$("button").clone(true); 51 $("p").append($back); 52 </script> 53 </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）实例
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 28 div.visible{ 29 display:none; 30 } 31 </style> 32 <!--引入jquery的js库--> 33 </head> 34 <button>按钮</button> 35 <body> 36 <p>段落</p> 37 <p>段落</p> 38 <p>段落</p> 39 </body> 40 <script language="JavaScript"> 41 42 //$("button")用 <p>tttttttt</P>替换 43 /* $newp=$("<p></p>"); 44 $newp.text("按钮将会被替换"); 45 $("button").replaceWith($newp); */ 46 47 // p 用 <button>保存</button> 替换 48 $("<button>保存</button>").replaceAll($("p")); 49 </script> 50 </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()等。
