1.使用对象访问的方式进行遍历：
语法：$().each(function(){})
2.使用jquery实现二级联动
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.创建二维数组用来存储城市
var cities = new Array(5);
cities[0] = new Array("合肥", "芜湖", "蚌埠", "淮南")
cities[1] = new Array("朝阳区", "海淀区", "通州区", "房山区")
cities[2] = new Array("松江区", "宝山区", "金山区", "嘉定区")
cities[3] = new Array("武汉市", "宜昌市", "襄樊市", " 荆州市")
cities[4] = new Array("苏州市", "徐州市", "盐城市", "无锡市")
$("#province").change(function(){
//10.清除第二个下拉列表中的内容
$("#city").empty();
//1.获取用户选择的省份
var prov=this.value;
//alert(prov);
//3.遍历二维数组中的省份
$.each(cities,function(i,n){
//alert(i+"-"+n);
//4.判断用户选择的省份下的所有城市
if(i==prov){
//5.遍历该省份下的所有城市
$.each(cities[i],function(j,m){
//6.创建城市节点文本
var textNode=document.createTextNode(m);
//7.创建option节点
var optionNode=document.createElement("option");
//8.将城市文本节点添加到option节点中去
$(optionNode).append(textNode)
//9.将option节点加到第二个select下拉列表中去
$(optionNode).appendTo($("#city"))
});
}
});
});
});
</script>3.使用jQuery的插件Validation实现表单校验
CSS部分代码
#father{
width: 1240px;
height: 900px;
margin: auto;
}
#head{
width: 100%;
height: 50px;
}
.head1{
width: 410px;
height: 100%;
float: left;
}
#head1{
width: 210px;
}
.head11{
color: #000000;
}
#head2{
background: url(../img/header.png);
width: 510px;
}
#nav{
width: 89%;
height: 50px;
background-color: #000000;
}
.nav1{
color: white;
}
#rigst{
width: 100%;
height: 600px;
background-image: url(../img/regist_bg.jpg);height: 85%;
}
#help{
width: 100%;
height: 100px;
background-image: url(../img/footer.jpg);width: 100%;
}
#copyright{
width: 100%;
height: 100px;
}
a{
text-decoration: none;
}
a font{
color: blue;
}
label.error{
background:url(../img/unchecked.gif) no-repeat 10px 3px;
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
}
label.success{
background:url(../img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}
HTML部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<link rel="stylesheet" href="css/rigst.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<!--引入validation插件-->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!--引入国际化文件-->
<script type="text/javascript" src="js/messages_zh.js"></script>
<script>
$(function() {
$("#register").validate({
rules: {
username: {
required: true,
minlength: 3
},
password: {
required: true,
digits: true,
minlength: 6
},
repassword: {
required: true,
equalTo: "[name='password']"
},
email: {
required: true,
email: true
},
name: {
required: true,
minlength: 2
},
sex: {
required: true
}
},
messages: {
username: {
required: "用户名不能为空！",
minlength: "用户名不得少于3位！"
},
password: {
required: "密码不能为空！",
digits: "密码只能为数字！",
minlength: "密码不得少于6位！"
},
repassword: {
required: "确认密码不能为空",
equalTo: "两次输入密码不一致"
},
email: {
required: "邮箱必须填写！",
email: "邮箱格式不正确！"
},
name: {
required: "姓名必须填写",
minlength: "姓名不得少于两位数"
},
sex: {
required: "性别必须勾选"
}
},
errorElement: "label", //用来创建错误提示信息标签
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
<body>
<div id="father">
<!--头部部分-->
<div id="head">
<div class="head1" id="head1"><img src="img/云顶logo.png" width="140px" height="120px" /> </div>
<div class="head1" id="head2"></div>
<div class="head1" style="float: right;margin-top: 15px;">
<a href="#">
<font size="4" class="head11">登录</font>
</a>
<a href="#">
<font size="4" class="head11">注册</font>
</a>
<a href="#">
<font size="4" class="head11">购物车</font>
</a>
</div>
</div>
<!--导航部分-->
<div id="nav" style="margin-left: 140px;">
<a href="#">
<font size="6" class="nav1">首页</font>
</a>
<a href="#">
<font size="4" class="nav1">品牌手机</font>
</a>
<a href="#">
<font size="4" class="nav1">品牌电脑</font>
</a>
<a href="#">
<font size="4" class="nav1">电脑配件</font>
</a>
<a href="#">
<font size="4" class="nav1">手机配件</font>
</a>
<a href="#">
<font size="4" class="nav1">宽带办理</font>
</a>
<a href="#">
<font size="4" class="nav1">套餐开卡</font>
</a>
</div>
<br />
<!--登录页面-->
<div id="rigst">
<br />
<br />
<br/>
<br/>
<form action="#" method="get" id="register">
<table align="center" width="800px" height="500px" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2">
<font size="4" color="darkblue">会员注册</font> USER REGISTER</td>
</tr>
<tr>
<td align="center"><b>用户名</b></td>
<td><em style="color: red;">*</em> <input type="text" name="username" id="username" style="line-height: 30px;" placeholder="请输入用户名" size="50px" /></td>
</tr>
<tr>
<td align="center"><b>密码</b></td>
<td><em style="color: red;">*</em> <input type="password" name="password" id="password" style="line-height: 30px;" placeholder="请输入密码" size="50px" /></td>
</tr>
<tr>
<td align="center"><b>确认密码</b></td>
<td><em style="color: red;">*</em> <input type="password" name="repassword" id="repassword" style="line-height: 30px;" placeholder="请输入确认密码" size="50px" /></td>
</tr>
<tr>
<td align="center"><b>Email</b></td>
<td><em style="color: red;">*</em> <input type="email" name="email" id="email" style="line-height: 30px;" placeholder="Email" size="50px" /></td>
</tr>
<tr>
<td align="center"><b>姓名</b></td>
<td><em style="color: red;">*</em> <input type="text" name="name" id="name" style="line-height: 30px;" placeholder="请输入姓名" size="50px" /></td>
</tr>
<tr>
<td align="center"><b>性别</b></td>
<td>
<span>
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
</span>
</td>
</tr>
<tr>
<td align="center"><b>出生日期</b></td>
<td><em style="color: red;">*</em> <input type="date" name="birthday" style="line-height: 30px; " placeholder="年\月\日" /> </td>
</tr>
<tr>
<td align="center"><b>验证码</b></td>
<td><em style="color: red;">*</em> <input type="text" name="yzm" id="yanzhengma" style="line-height: 30px;" size="20px" id="yanzhengma" /> <img src="img/yanzhengma.png" width="60px" height="30px" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册" style="background: url(img/register.gif);width: 90px; height: 40px;color: white;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<br />
<br />
<!--帮助中心-->
<div id="help">
</div>
<br />
<!--版权所有-->
<div id="copyright" align="center">
<a href="#">
<font size="4">关于我们</font>
</a>
<a href="#">
<font size="4">联系我们</font>
</a>
<a href="#">
<font size="4">招贤纳士</font>
</a>
<a href="#">
<font size="4">法律声明</font>
</a>
<a href="#">
<font size="4">友情链接</font>
</a>
<a href="#">
<font size="4">支付方式</font>
</a>
<a href="#">
<font size="4">配送方式</font>
</a>
<a href="#">
<font size="4">服务声明</font>
</a>
<a href="#">
<font size="4">广告声明</font>
</a>
<br/>
<br/>
<font size="4">Copyright © 2018-2028 云顶商城 版权所有</font>
</div>
</div>
<script src="js/页面校验.js"></script>
</body>
</html>
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
