案例一：創建省市二級聯動
1.首先要確定事件，所選的事件應該是change事件，並綁定
2.通過JQ的選擇器獲取這個對象
3.創建二維數組來存儲對應省份所涉及的城市
4.通過一層遍歷尋找對應的城市，再通過遍歷得到該城市的所有節點
5.每次遍歷出一個節點就要創建一個城市文本節點，創建一個option元素，並將這個文本節點添加到對應的元素節點中
6.每次在遍歷出所有城市之前還要清除之前所加入的所有城市的標籤
這裏涉及了：數組的創建 城市的遍歷 JQuery的DOM操作
對於數組創建：
var A=new Array();
A[0]=" ";
A[1]=" ";
或var A=new Array("A","B","C");
對於所有JQ遍歷：
$(傳入的數組,function(i,n){
alert(i+" "+n);
}); //i就是索引值，n就是所遍歷出來的值
JQ的DOM操作：詳見實例
實例：
$(function (){
$("#province").change(function(){
//獲取用戶所選擇的值
var val=this.value;
//創建二維數組用於存儲省份和城市
var cities=new Array(3);
cities[0]=new Array("A","B","C");
cities[1]=new Array("AA","BB","CC");
cities[2]=new Array("AAAA","BBBB","CCCC");
cities[3]=new Array("AAAAA","BBBBB","CCCCC");
$("#city").empty();
//遍歷二維數組中的省份
$.each(cities,function (i,n){
//判斷用戶選擇的省份與遍歷的省份
if(val==i){
//遍歷該省份下的所有城市
$.each(cities[i],function(i,m){
//創建城市文本節點
var textNode=document.createTextNode(m);
//創建元素節點
var opEle=document.createElement("option");
//將文本節點添加到option元素節點中
$(opEle).append(textNode);
//將元素節點追加到下拉列表中
$(opEle).appendTo($("#city"));
});
}
});
});
});
此處只列舉出了JS部分代碼，HTML部分代碼已經在上邊列出
案例二：使用JQ來完成下拉列表的左右選擇
實現步驟：
1，獲取事件，鼠標單擊事件click
2，獲取所選擇的下拉框的元素，將它添加到右邊下拉框的元素（可以使用appendTo來操作）
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右選擇</title>
<script src="../JS/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(function () {
//選中單擊去右邊
$("#selectOneToRight").click(function () {
$("#left option:selected").appendTo($("#right"));
});
//單擊全部去右邊
$("#selectAllToRight").click(function () {
$("#left option").appendTo($("#right"));
});
//選中雙擊去右邊
$("#left option").dblclick(function () {
$("#left option:selected").appendTo($("#right"));
});
});
</script>
</head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分類名稱
</td>
<td>
<input type="text" name="cname" value="手機數碼"/>
</td>
</tr>
<tr>
<td>
分類描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手機數碼類商品</textarea>
</td>
</tr>
<tr>
<td>
分類商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋體">已有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>IPhone6s</option>
<option>小米4</option>
<option>錘子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋體">未有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
<option>三星Note3</option>
<option>華爲6s</option>
</select>
<p><a href="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改"/>
</td>
</tr>
</table>
</body>
</html>
案例三：註冊頁面表單驗證
這裏要使用到插件validate
validate是一個插件，用來驗證提交表單信息的插件，它是基於JQuery開發的，所以在使用時要先導入JQuery，導入它後，還需要導入它的中文版插件
確保他是中文版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<script type="text/javascript" src="../JS/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../JS/jquery.validate.js"></script>
<script type="text/javascript" src="../JS/messages_zh.js"></script>
<script>
$(function () {
$("#checkForm").validate({
rules:{
username:{
required:true,
minlength:6
},
password:{
required:true,
digits:true,
minlength:8
}
},
messages:{
username:{
required:"用戶名不能爲空",
minlength:"用戶名不得少於6位"
},
password:{
required:"密碼不得爲空",
digits:"密碼必須是整數",
minlength:"密碼不得少於六位",
}
}
});
});
</script>
</head>
<body>
<form action="#" id="checkForm">
用戶名：<input type="text" name="username"><br />
密碼：<input type="password" name="password"><br />
<input type="submit">
</form>
</body>
</html>
通過JQ的獲取表單屬性，再調用函數進行驗證，在函數內部書寫驗證規則，
rules下寫的是要求的規則，而messages下寫的是出現錯誤時需要提示的信息