jQuery之節點和節點屬性操作
阿新 • • 發佈：2018-12-13
利用jQ最常見的功能就是選擇器，節點操作和節點屬性操作，選擇器在前面有小結過，這一篇來看看節點和節點屬性。
1.操作節點
最常見的操作節點的函式有如下幾個：
a.append(b):將節點b新增到指定的節點a裡面，b作為原節點的子節點
a.appendTo(b):將a節點作為子節點，新增到b節點裡面
a.after(b)：將b節點新增到a節點後面，a和b沒有包含關係
a.before(b)：將b節點新增到a節點前面，a和b沒有包含關係a.remove(select);a是一個節點集合，從節點集合中刪除用select選擇出來的節點
下面通過具體的DEMO來說明
1）demo1,之前用原生js寫過兩個select聯動的例子，用jQ的方式也可以寫，而且更加簡單。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文件</title> <script type="text/javascript" src="jquery-1.8.0.js"></script> <script type="text/javascript"> $(document).ready( function(){ //點選獲取省份按鈕 $("#testButton").click( function(){ $("#province").empty(); addOption("province","--請選擇--",""); addOption("province","海南","hn"); addOption("province","湖北","hb"); } ) //切換省份 $("#province").change( function(){ $("#city").empty(); if($("#province").val()=="hb"){ addOption("city","武漢","wuhan"); addOption("city","宜昌","yichang"); } if($("#province").val()=="hn"){ addOption("city","海口","haikou"); addOption("city","三亞","sanya"); } } ) //新增option節點通用函式 function addOption(id,text,v){ var option="<option value="+v+">"+text+"</option>"; $("#"+id).append(option); } } ) </script> </head> <body> <select id="province" name="province"></select>省 <select id="city" name="city"></select>市 <input type="button" id="testButton" value="獲取省份" /> </body> </html>
說明：上面的例子主要用到了a.append(b)這個函式，b是節點的html表示方法，相比於原生js，不用經過新建節點，給節點設定屬性，新增節點這麼多步驟，直接拼接節點的完整html表示就可以新增，相對而言更加簡潔。
2）demo2,演示其他的幾個函式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文件</title> <script type="text/javascript" src="jquery-1.8.0.js"></script> <script type="text/javascript"> $(document).ready( function(){ $("#testButton").click( function(){ //$("#div2").after("<div id='div4' style='width:100px; height:100px; background-color:yellow'></div "); $("#div2").before("<div id='div4' style='width:100px; height:100px; background-color:yellow'></div "); } ) } ) </script> </head> <body> <div id="div1" style="width:100px; height:100px; background-color:red"></div> <div id="div2" style="width:100px; height:100px; background-color:blue"></div> <div id="div3" style="width:100px; height:100px; background-color:green"></div> <br/> <input type="button" id="testButton" value="測試" /> </body> </html>
說明：demo的效果是有三個div,分別是div1,div2,div3,中間的為div2,在div2的前面後者後面新增一個新的div4，用到了
a.after(b)和a.before(b)方法。
2.操作節點屬性
節點操作的主要函式有
a.attr(); 獲取節點a的屬性/給節點a新增屬性
a.removeAttr("XX"); 移除節點a的XX屬性
a.prop();用法同attr()函式相同
a.removeProp("XX") 用法同removeAtrr()函式相同
a.addClass("XX"); 給節點a新增XX樣式
a.removeClass("XX") 移除a節點的XX樣式
a.toggleClass("XX") 新增或者移除XX樣式
a.html("XX");把XX當作html標籤設定到a標籤內
a.text("XX")把XX當作普通文字設定到a標籤內
DEMO如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style type="text/css">
.style01{color:red}
.style02{font-size:40px}
</style>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#testButton").click(
function(){
//a.attr();獲取屬性值
//var val = $("#f").attr("style");
//alert(val);
//給屬性設定值
//$("#f").attr("style","color:green;font-size:30px");
//移除屬性
//$("#f").removeAttr("style");
//a.prop()的用法與attr的用法一致
//var style=$("#f").prop("style");
//alert(style);
//將id="f"的元素的value屬性值設定為admin
//$("#f").prop("style",function(){return "color:green;font-size:30px"});
//移除屬性
//$("#f").removeProp("style");
//a.addClass() 新增樣式
//$("#lb1").addClass("style01 style02");
//a.removeClass() 移除樣式
//$("#lb1").removeClass("style02");
//$("#lb1").toggleClass("style02");
//移除所有樣式
//$("#lb1").removeClass();
//$("#lb1").removeAttr("class");
//$("#lb2").html("<font color='blue'>哇哈哈</font>");
//$("#lb2").text("<font color='blue'>哇哈哈</font>");
}
)
}
)
</script>
</head>
<body>
<font id ="f" style="color:blue;font-size:40px">大師兄</font><br/>
<label id="lb1" class="style01 style02">二師兄</label><br/>
<label id="lb2">三師弟</label><br/>
<input type="button" value="測試" id="testButton"/>
</body>
</html>