回顾前几节笔记中JQuery 的 Dom 操作:
1 、使用 html() 方法读取或者设置元素的 innerHTML :
alert($("a:first").html()); $("a:first").html("hello");2 、使用 text() 方法读取或者设置元素的 innerText :
alert($("a:first").text()); $("a:first").text("hello");3 、 使用 attr() 方法读取或者设置元素的属性,对于 JQuery 没有封装的属性(所有浏览器没有差异的属性)用 attr 进行操作。
alert($("a:first").attr("href")); $("a:first").attr("href", "http://www.rupeng.com");
4 、使用 removeAttr 删除属性。注意,删除不是清空,删除的属性在源代码中看不到,而清空属性是清空属性值,属性本身还存在。
【1】动态创建Dom节点(注意,写网页的时候,能静态的就静态,能不动态就不动态,一般搜索引擎搜索网页的时候抓不到动态创建的东西。若是动态的多了就不利于SEO)
(1):分两步:
第一步:使用 $(html 字符串 ) 来创建 Dom 节点字符串,并且返回一个 jQuery 对象
第二步:调用 append 等方法将新创建的节点添加到 Dom 中
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var link = $("<a href='http://www.baidu.com'>百度</a>");//注意,此时只是创建一个字符串,并返回一个JQuery 对象,还没有添加到页面中 $("div:first").append(link);//将返回的JQuery对象添加到div中 }); </script> </head> <body> <div></div> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var data = { "百度": "http://www.baidu.com", "谷歌": "http://wwww.google.com" }; $.each(data, function (key, value) { var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>"); $("#table1").append(tr); }); }); </script> </head> <body> <table id="table1"></table> </body> </html>
before :在元素之前添加元素(添加兄弟)
【2】删除节点
( 1 ) remove() 删除选择的节点
案例:清空 ul 中的特定项
$("ul li.licolor").remove(); 删除 ul 下 li 中有 licolor样式的元素。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .licolor{background-color:Yellow} </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // $("ul li[class=licolor]").remove(); 也可以写成: $("ul li.licolor").remove(); $("#btndelete").click(function () { $("ul li[class=licolor]").remove(); }); }); </script> </head> <body> <ul> <li>sdfsdf</li> <li class="licolor">werwer</li> <li>hghrtyer</li> <li>wer234234df</li> <li class="licolor">fghwhjwersdfwerwhe</li> </ul> <input id="btndelete" type="button" value="删除一部分LI" /> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .licolor{background-color:Yellow} </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btndelete").click(function () { var lis = $("ul li[class=licolor]").remove(); $("#moveto").append(lis); }); }); </script> </head> <body> <ul> <li>sdfsdf</li> <li class="licolor">werwer</li> <li>hghrtyer</li> <li>wer234234df</li> <li class="licolor">fghwhjwersdfwerwhe</li> </ul> <input id="btndelete" type="button" value="移动一部分LI" /> <ul id="moveto"> </ul> </body> </html>
【3】 替换节点:
$("br").replaceWith("<hr/>");
将 <br/> 替换为 <hr/>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnReplace").click(function () { $("br").replaceWith("<hr/>"); }); }); </script> </head> <body> 时间飞逝的方式<br />飞桑菲杰收到飞<br />哦地方<br /> <input id="btnReplace" type="button" value="替换" /> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnWrap").click(function () { $("p").wrap("<font color='red'></font>"); }); }); </script> </head> <body> <p>时间飞逝</p><p>的方式飞桑菲杰收</p><p>到飞哦地方</p> <input id="btnWrap" type="button" value="包裹" /> </body> </html>