一、使用JQ完成省市二级联动：
步骤：
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步：创建二维数组来存储省份和城市
第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步：接着遍历数组中的城市
第五步：创建一个城市文本节点
第六步：创建option元素节点
第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步：获取第二个下拉列表并将option元素节点添加进去
第九步：清除第二个下拉列表的option内容
JS部分代码：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
//3.遍历二维数组中的省份
$.each(cities, function(i,n) {
//4.判断用户选择的省份和遍历的省份
if(val==i){
//5.遍历该省份下的所有城市
$.each(cities[i], function(j,m) {
//6.创建城市文本节点
var textNode=document.createTextNode(m);
//7.创建option元素节点
var opEle=document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$("#city").append($(opEle));
});
}
});
});
});
</script>
html部分代码：
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河南</option>
<option value="3">河北</option>
</select>
<select id="city">
</select>
二、使用JQ完成下拉列表左右选择：
Paste_Image.png
步骤：
第一步：确定事件(鼠标单击事件click)
第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
JS部分代码：
<script type="text/javascript"src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
/*1.选中单击去右边*/
$("#selectOneToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function(){
$("#left option").appendTo($("#right"));
});
/*3.选中双击去右边*/
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
});
});
</script>
三、使用JQ完成表单校验：
使用validation插件：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate入门</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<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:6
}
},
messages:{
username:{
required:"用户名不能为空！",
minlength:"用户名不得少于6位！"
},
password:{
required:"密码不能为空!",
digits:"密码只能为数字！",
minlength:"长度至少为6位！"
}
}
});
});
</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>
