案例一:创建省市二级联动
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下写的是出现错误时需要提示的信息