今日内容介绍：
重写JS案例：省市联动、左右选择、表单校验
今日学习目标：
1.能够使用JQ为标签添加属性或样式
2.能够为指定标签添加字标签或兄弟标签
3.学会给标签绑定事件
使用jQuery完后省市二级联动
步骤分析：
第一步：确定事件（change事件），在绑定的函数里面获取用户选择的省份
第二步：创建二维数组来存储省份和城市
第三步：遍历二维数组中的省份（与用户选择的省份进行比较）【使用JQ的遍历操作】
第四步：接着遍历数组中的城市
第五步：创建一个城市文本节点
第六步：创建option元素节点
第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步：获取第二个下拉列表并将option元素节点添加进去
第九步：清除第二个下拉列表的option内容
技术点分析：数组的遍历操作
方式一：
方式二：
遍历用法，核心代码：
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
//解释：如下为遍历循环，i代表前面集合的脚标
$("img").each(function(i){
this.src = "../img/"+(i+1)+".jpg"
});
//解释：前面集合代表待遍历集合，后面i参数代表脚标，n代表每一个i对应的具体参数值
$.each(["你好",'你是sb',1,2,9,111111],function(i,n){
alert("item"+i+"value"+n)
});
});
</script>
html核心代码：
<body>
<img />
<img />
</body>文档处理操作：append（）与appendTo（）
插入字段和标签：核心代码：
<link rel="stylesheet" type="text/css" href="../css/1.css" />
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
//解释：appendTo将XX标签插入到XX标签 addClass给该标签添加一个class样式
$("p").appendTo("div").addClass("test");
//解释：将XX字段追击到XX标签的尾部
$("p").append("<b>你好</b>")
});
</script>
html核心代码：
<body>
<p>I would like to say: </p>
<div></div>
<div></div>
</body>
清除子节点内容：
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
//解释：清除子节点内容
$("#btn").click(function() {
$("p").empty();
});
//解释：添加子节点内容
$("#btnn").click(function() {
$("p").append("hello,<span>span<br /></span><a href='插入.html'>点击</a>")
})；
//解释：清除部分子节点，两个效果一样
$("#btnnn").click(function(){
$("span").remove();
// $("span").detach();
});
});
</script>
html核心代码：
<body>
<h1>
Hello,
<p>hello,
<span>
span<br />
</span>
<a href="插入.html">点击</a>
</p>
</h1>
<input type="button" id="btn" value="清除子节点" />
<input type="button" id="btnn" value="添加文字" />
<input type="button" id="btnnn" value="清除子节点" />
</body>使用JQ进行省市二级联动：核心代码：
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></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("郑州市", "洛阳市", "开封市", "安阳市");
//解释：查找id，并绑定change事件
$("#province").change(function() {
//1.获取用户选择的省份
var val = this.value;
//10.清除子节点
$("#city").empty();
//3.遍历二维数组中的省份
$.each(cities, function(i,n) {
//4.判断用户选择的省份和遍历的省份
if(val==i){
// $("#city").append(n)
//5.遍历该省份下的所有城市
$.each(n, function(j,k) {
//下列注释为jQ最优添加方法
// $("#city").append("<option>"+k+"</option>")
//6.创建城市文本节点
var textNode = document.createTextNode(k);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中,在下列方法实现中append与appendTo都是jQuery中的方法，因此元素需要使用$符号将Dom转换为JQ
$(opEle).append(textNode);
//9.将optioon元素节点追加到第二个下拉列表中
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
html核心代码：
<tr>
<td>籍贯</td>
<td>
<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>
</td>
</tr>左右选择JQ实现：
1.分析：
第一步：确定事件（鼠标单击事件：click）
第二步：获取左侧下拉列表被选中的option[$("#left option:selected")假设左侧select定义了一个id=left]
第三步：将获取到的option添加到右侧的下拉列表。(append方法的使用)
核心代码：
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.选中单击去右边
$("#selectOneToRigth").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>
html核心代码：
<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="selectOneToRigth">>></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>事件绑定
1.点击展开事件：
<script src="../../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".head").addClass("test");
//事件绑定
$(".head").bind("click",function(){
var $content = $(this).next();
if ($content.is(":visible")) {
$content.hide();
} else{
$content.show();
}
});
$("#bt").click(function(){
//事件解绑
$(".head").unbind("click");
});
});
</script>
html核心代码：
<body>
<div id="panel">
<h5 class="head">什么是JQ？</h5>
<div id="content">
巴拉巴拉
</div>
</div>
<input type="button" name="bt" id="bt" value="点击解绑事件" />
</body>2.鼠标滑过事件：
<script src="../../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#bt").click(function(){
$.each(["mouseover","mouseout"], function(i,n) {
$(".head").unbind(n);
});
});
$("#bt2").click(function(){
$(".head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
});
});
});
</script>
html核心代码：
<body>
<div id="panel">
<h5 class="head">什么是JQ？</h5>
<div id="content">
巴拉巴拉
</div>
</div>
<input type="button" name="bt" id="bt" value="点击解绑事件" />
<input type="button" name="bt2" id="bt2" value="点击绑定鼠标滑过事件" />
</body>3.事件合成一：
核心代码：
<script src="../../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//解释如下代码：hover(over,out)两个参数，第一个参数是代表鼠标移入的操作，第二个参数是鼠标移出的操作，内部均由事件控制
$(".head").hover(
function(){
$(this).addClass("test");
},function(){
$(this).removeClass("test");
}
);
});
</script>
html核心代码：
<body>
<div id="panel">
<h5 class="head">什么是JQ？</h5>
<div id="content">
巴拉巴拉
</div>
</div>
</body>4.事件合成二：
核心代码：
<script src="../../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//解释如下代码：toggle后面可以添加许多方法轮换操作，每次点击都会轮换方法
$(".head").toggle(
function(){
$(this).addClass("test");
},function(){
$(this).removeClass("test");
},function(){
$(this).next().hide();
},function(){
$(this).next().show();
}
);
});
</script>
html核心代码：
<body>
<div id="panel">
<h5 class="head">什么是JQ？</h5>
<div id="content">
巴拉巴拉
</div>
</div>
</body>案例 表单校验：
在实际开发中一般使用第三方工具，本案例使用JQ插件validation进行表单校验。
因为validation是基于JQ的，所以在导库的时候导在JQ库之后
.js与.min.js的区别在于前者是格式标准的js库，可供开发者查看，后者是全部写在一行中，两者的代码量是一样的。
核心代码：
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$("#registForm").validate({
rules: {
user: {
required: true,
minlength: 3
},
password: {
required: true,
digits: true,
minlength: 6
},
repassword: {
required: true,
equalTo: "[name='password']"
},
email: {
required: true,
email: true
},
username: {
required: true,
maxlength: 3
},
sex: {
required: true
}
},
messages: {
user: {
required: "用户名不能为空！",
minlength: "用户名不能少于3个字符！"
},
password: {
required: "密码不能为空!",
digits: "密码必须为数字!",
minlength: "密码不能少于6位！"
},
repassword: {
required: "确认密码不能为空！",
equalTo: "两次输入密码不一致"
},
email: {
required: "邮箱不能为空！",
email: "邮箱格式不正确！"
},
username: {
required: "姓名不能为空！",
minlength: "名称至多三个字！"
},
sex: {
required: "性别必须勾选！"
}
},
errorElement: "label", //用来创建错误提示信息标签，默认的就是label,可以不用再次声明
success: function(label) { //验证成功后的执行的回调函数
//lable指向上面那个错误提示信息标签label
label.text("") //清空错误提示信息
.addClass("success"); //加上自定义的success类
}
//问题:当减少一个字符,或者使不能满足时,这里的success类还存在,导致不仅有红色字体还有对的图片
});
});
</script>
html核心代码：
<form action="#" method="get" id="registForm">
<div id="father">
<div id="form2">
<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2">
<font size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
<label for="user">用户名</label>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user" />
</td>
</tr>
<tr>
<td>
<label for="password">密码</label>
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="repassword" size="35px" />
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email" />
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="username" size="35px" />
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
</span>
<label for="sex" class="error" style="display: none;"></label>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="birthday" size="35px" />
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 册" height="50px" />
</td>
</tr>
</table>
</div>
</div>
</form>存在问题：表单校验时：//问题:当减少一个字符,或者使不能满足时,这里的success类还存在,导致不仅有红色字体还有对的图片
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
