利用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>