今日任务
-
使用JQuery完成页面定时弹出广告(DOM转换和选择器)
-
使用JQuery完成表格的隔行换色
-
使用JQuery完成复选框的全选效果(jQuery的属性操作)
-
使用JQuery完成省市联动效果(jQuery的遍历和DOM操作)
-
使用JQuery完成下列列表左右选择(jQuery的事件)
-
使用JQuery完成表单的校验.
一、使用JQ完成首页的定时广告弹出
1.需求分析
在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】
2.技术分析
2.1 jquery相关的知识
1) 什么是jquery
Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
2) 怎么使用jQuery
jQuery它是一个库(框架)，要想使用它，必须先引入！
jQuery-1.8.3.js：一般用于学习阶段。jQuery-1.8.3.min.js：用于项目使用阶段
3)jQuery的简单入门
所有的jQuery代码写在页面加载函数
$(function(){Jquery代码});
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jQuery入门</title><script type="text/javascript" src="../../js/jquery-1.8.3.js"></script><script>$(function(){alert("hello jQuery！")});</script></head><body></body>
</html><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jQuery页面加载与JS加载区别</title><script type="text/javascript" src="../../js/jquery-1.8.3.js"></script><script>window.onload = function(){alert("张三");}//传统方式页面加载存在覆盖问题,加载比JQ慢（整个页面加载完毕<包括里面的其他内容,比如图片>）window.onload = function(){alert("老王");}//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕被加载)jQuery(document).ready(function(){alert("李四");});//JQ不存在覆盖问题,加载的时候是顺序执行$(document).ready(function(){alert("王五");});//JQ简写方式$(function(){alert("汾九");});</script></head><body></body>
</html>
点击之后出现“老王”
先出现李四,接着出现王五
总的出现顺序：李四=>王五=>汾九=>老王
4) 获取元素
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jQuery的获取</title><!--第一步导入库--><script type="text/javascript" src="../../js/jquery-1.8.3.js"></script><script>$(function(){//1.传统方式获取//document.getElementById("btn").onclick=function(){//location.href="惊喜.html";//}//2.JQ方式获取=====>$("#btn")$("#btn").click(function(){location.href="惊喜.html";});});</script></head><body><input type="button" value="点我有惊喜" id="btn" /></body>
</html>
5) Jquery对象与DOM对象转换
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>DOM对象与JQ对象的转换</title><script type="text/javascript" src="../../js/jquery-1.8.3.js"></script><script>function write1(){//1.JS的DOM操作//document.getElementById("span1").innerHTML="么么哒";//DOM对象无法操作JQ对象里面属性和方法//document.getElementById("span1").html="么么哒";var spanEle = document.getElementById("span1");//将DOM对象转换成JQ对象$(spanEle).html("思密达");}$(function(){$("#btn").click(function(){//JQ对象无法操作JS里面的属性和方法！！！//$("#span1").innerHTML="呵呵哒";$("#span1").html("呵呵哒");//JQ对象向DOM对象转换方式一$("#span1").get(0).innerHTML="美美哒";//JQ对象向DOM对象转换方式二//$("#span1")[0].innerHTML="棒棒哒";});});</script></head><body><input type="button" value="JS写入" onclick="write1()" /><input type="button" value="JQ写入" id="btn" /><br />班长：<span id="span1">你好帅！</span></body>
</html>
注意：
JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。
6) Jquery的效果
3.实现步骤
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
4.代码实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用JQ完成首页轮播图</title><style>#father{/*border: 0px-去除了边界线*/border: 0px solid red;width: 1300px;height: 2170px;margin: auto;}/*logo画框*//*#logo{border: 0px solid black;width: 1300px;height: 50px;}*/#clear{clear: both;}.top{border: 0px solid blue;width: 431px;height: 50px;float: left;}#top{padding-top: 12px;height: 38px;}#menu{border: 0px solid red;width: 1300px;height: 50px;background-color: black;margin-bottom: 10px;}ul li{display: inline;color: white;}#product{border: 0px solid red;width: 1300px;height: 558px;}#product_top{border: 0px solid blue;width: 100%;height: 50px;padding-top: 8px;}#product_bottom{border: 0px solid green;width: 100%;height: 500px;}#product_bottom_left{border: 0px solid red;width: 200px;height: 500px;float: left;}#product_bottom_right{border: 0px solid blue;width: 1094px;height: 500px;float: left;}#big{border: 0px solid red;width: 544px;height: 250px;float: left;}#small{border: 0px solid blue;width: 180px;height: 250px;float: left;/*让里面内容居中*/text-align: center;}#bottom{text-align: center;}/*去除下划线的标签*/a{text-decoration: none;}</style><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><script>$(function(){//1.书写显示广告图片的定时操作 time-是全局变量time = setInterval("showAd()",3000);});//2.书写显示广告图片的函数function showAd(){//3.获取广告图片,并让其显示//$("#img2").show(1000);//$("#img2").show();//slideDown(speed, [callback])//通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。//$("#img2").slideDown(5000);//fadeIn(speed, [callback])//通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。$("#img2").fadeIn(3000);//4.清除显示图片的定是操作clearInterval(time);//5.设置隐藏图片的定时操作time = setInterval("hiddenAd()",3000);}function hiddenAd(){//6.获取广告图片,并让其隐藏//$("#img2").hide();//slideUp(speed, [callback])//通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数//$("#img2").slideUp(5000);//fadeOut(speed, [callback])//通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。$("#img2").fadeOut(5000);//7.清除隐藏图片的定时操作clearInterval(time);}</script><!--<script type="text/javascript"></script>--><!--内部引入JavaScript--><!--<script>function init(){//书写轮播图片显示的定时操作setInterval("changeImg()",3000);//1.设置显示广告图片的定时操作//这里注意不能定义var time，否则time就是局部变量了//此时time是一个全局变量time = setInterval("showAd()",3000);}//书写函数var i = 0;function changeImg(){i++;//获取图片位置并设置src属性值document.getElementById("img1").src="../img/" + i + ".jpg";if(i == 3){i = 0;}}//2.书写显示广告图片的函数function showAd(){//3.获取广告图片的位置var adEle = document.getElementById("img2");//4.修改广告图片元素里面的属性让其显示adEle.style.display = "block";//5.清除显示图片的定时操作clearInterval(time);//6.设置隐藏图片的定时操作setInterval("hiddenAd()",3000);}//7.书写隐藏广告图片的函数function hiddenAd(){//8.获取广告图片并设置其style属性的display值为nonevar adEle = document.getElementById("img2").style.display="none";//9.清除隐藏广告图片的定时操作clearInterval(time);}</script>--><!--外部引入JavaScript--><script type="text/javascript" src="JS外部注入完成定时首页.js"></script></head><body "init()"><div id="father"><!--把八个div封这个fatherdiv里面--><!--定时弹出广告图片位置--><img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2"/><!--1.logo部分--><div id="logo"><div class="top"><img src="../img/logo2.png" height="46px" /></div><div class="top"><img src="../img/header.png" height="46px" /></div><div class="top" id="top"><a href="#">登录</a><a href="#">注册</a><a href="#">购物车</a></div> </div><!--如果上面logo没画框，可以清除浮动--><div id="clear"></div><!--2.导航栏部分--><div id="menu"><ul><a href="#"><li style="font-size: 20px;">首页</li></a> <a href="#"><li>手机数码</li></a> <a href="#"><li>家用电器</li></a> <a href="#"><li>鞋靴箱包</li></a> <a href="#"><li>奢饰品</li></a> <a href="#"><li>飞机大炮</li></a></ul></div><!--3.轮播图部分--><div id=""><img src="../img/1.jpg" width="100%" id="img1"/></div><!--4.最新商品--><!--分成上下两个div，下面的div又分成左右两个div,右边的div又可以分成一个大的图片的div，还有剩下九个小的图片的div--><div id="product"><div id="product_top"> <!--用span，他是内联的，全部内容占一行--><span style="font-size: 25px;">最新商品</span> <img src="../img/title2.jpg" /></div><div id="product_bottom"><div id="product_bottom_left"><img src="../img/big01.jpg" width="100%" height="100%" /></div><div id="product_bottom_right"><div id="big"><a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div></div></div></div><!--5.广告图片--><div id=""><img src="../img/ad.jpg" width="100%" height="100%"/></div><!--6.热门商品--><!--分成上下两个div，下面的div又分成左右两个div,右边的div又可以分成一个大的图片的div，还有剩下九个小的图片的div--><div id="product"><div id="product_top"> <span style="font-size: 25px;">热门商品</span> <img src="../img/title2.jpg" /></div><div id="product_bottom"><div id="product_bottom_left"><img src="../img/big01.jpg" width="100%" height="100%" /></div><div id="product_bottom_right"><div id="big"><a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div><div id="small"><img src="../img/small01.jpg" /><a href="#"><p style="color: gray;">咖啡机</p></a><p style="color: red;">¥399</p></div></div></div></div><!--7.广告图片--><div id=""><img src="../img/footer.jpg" width="100%" height="100%"/></div><!--8.友情链接和版权信息--><div id="bottom"><a href="#">关于我们</a><a href="#">联系我们</a><a href="#">招贤纳士</a><a href="#">法律声明</a><a href="#">友情链接</a><a href="#">支付方式</a><a href="#">配送方式</a><a href="#">服务声明</a><a href="#">广告声明</a><p>Copyright © 2005-2016 传智商城 版权所有</p></div></div></body>
</html>5.补充内容
Toggle的使用
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>toggle的使用</title><style>div{border: 1px solid white;width: 500px;height: 350px;margin: auto;text-align: center;}</style><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><script>$(function(){$("#btn").click(function(){$("#img1").toggle();});});</script></head><body><!--<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。--><div><input type="button" value="显示/隐藏" id="btn"/><br />|<img src="../img/飞机05.gif" width="100%" height="100%" id="img1"/></div></body>
</html>
6.总结
6.1 jquery的选择器
1) 基本选择器
id选择器： $(“#id名称”);
元素选择器： $(“元素名称”);
类选择器： $(“.类名”);
通配符： *
多个选择器共用(并集)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基本选择器</title><link rel="stylesheet" href="../../css/style.css" /><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){//id选择器$("#btn1").click(function(){//css(name, value) 在所有匹配的元素中，设置一个样式属性的值。$("#one").css("background-color","pink");});$("#btn2").click(function(){//类名选择器$(".mini").css("background-color","pink");});$("#btn3").click(function(){//元素选择器$("div").css("background-color","pink");});$("#btn4").click(function(){//匹配所有元素$("*").css("background-color","pink");});$("#btn5").click(function(){//selector1,selector2,selectorN//你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内$("#two,.mini").css("background-color","pink");});});</script></head><body><input type="button" id="btn1" value="选择为one的元素"/><input type="button" id="btn2" value="选择样式为mini的元素"/><input type="button" id="btn3" value="选择所有的div元素"/><input type="button" id="btn4" value="选择所有元素"/><input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>
2) 层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级选择器</title><link rel="stylesheet" type="text/css" href="../../css/style.css"/><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("body div").css("background-color","gold");});$("#btn2").click(function(){$("body>div").css("background-color","gold");});$("#btn3").click(function(){$("#two+div").css("background-color","gold");});$("#btn4").click(function(){$("#one~div").css("background-color","gold");});});</script></head><body><input type="button" id="btn1" value="选择body中的所有的div元素"/><input type="button" id="btn2" value="选择body中的第一级的孩子"/><input type="button" id="btn3" value="选择id为two的元素的下一个元素"/><input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>
3) 基本过滤选择器
$('li').first() <=等价于=> $(“li:first”)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级选择器</title><link rel="stylesheet" href="../../css/style.css" type="text/css"/><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){$("#btn1").click(function(){//获取第一个元素$("body div:first").css("background-color","red");});$("#btn2").click(function(){//获取最后个元素$("body div:last").css("background-color","red");});$("#btn3").click(function(){//匹配所有索引值为奇数的元素，从 0 开始计数$("body div:odd").css("background-color","red");});$("#btn4").click(function(){$("body div:even").css("background-color","red");});});</script></head><body><input type="button" id="btn1" value="body中的第一个div元素"/><input type="button" id="btn2" value="body中的最后一个div元素"/><input type="button" id="btn3" value="选择body中的奇数的div"/><input type="button" id="btn4" value="选择body中的偶数的div"/><hr/><div id="one"> <div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>
4) 属性选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级选择器</title><link rel="stylesheet" href="../../css/style.css" /><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){$("#btn1").click(function(){$("div[id]").css("background-color","red");});$("#btn2").click(function(){//$("input[name='newsletter']").attr("checked", true);$("div[id='two']").css("background-color","red");});});</script></head><body><input type="button" id="btn1" value="选择有id属性的div"/><input type="button" id="btn2" value="选择有id属性的值为two的div"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body>
</html>
5) 表单选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单选择器</title><link rel="stylesheet" href="../../css/style.css" /><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){ $("#btn1").click(function(){$(":input").css("background-color","red");});$("#btn2").click(function(){$(":text").css("background-color","red");});});</script></head><body><input type="button" id="btn1" value="选择所有input元素" /><input type="button" id="btn2" value="选择文本框" /><br/><form><input type="text" /><br /><input type="checkbox" /><br /><input type="radio" /><br /><input type="image" /><br /><input type="file" /><br /><input type="submit" /><input type="reset" /><br /><input type="password" /><br /><input type="button" /><br /><select><option/></select><br /><textarea></textarea><br /><button></button></form></body>
</html>
二、使用JQ完成表格的隔行换色
1.需求分析
在页面加载的时候让显示用户的表格进行隔行换色显示，效果如下：使用JQ实现！
2.技术分析
需要使用jquery的选择器(基本选择器、基本过滤选择器)
还需要使用jquery的CSS的方法(css(name,value))
如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作
3.步骤分析
第一步：引入jquery的类库
第二步：直接写页面加载函数
第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
4.代码实现
style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;padding-left:25px;
}
.onSuccess{background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;padding-left:25px;
}
.high{color:red;
}div,span,p {width:140px;height:140px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;}div.mini { width:55px;height:55px;background-color: #aaa;font-size:12px;}div.hide { display:none;}table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
01_使用jQuery完成表格隔行变色.htm
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用jQuery完成表格隔行换色</title><link rel="stylesheet" href="../css/style.css" /><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script>//1.页面加载$(function(){/*//2.获取tbody下面的偶数行并设置背景颜色$("tbody tr:even").css("background-color","yellow");//3.获取tbody下面的奇数行并设置背景颜色$("tbody tr:odd").css("background-color","green");*///2.获取tbody下面的偶数行并设置背景颜色$("tbody tr:even").addClass("even");//$("tbody tr:even").removeClass("even");//3.获取tbody下面的奇数行并设置背景颜色$("tbody tr:odd").addClass("odd");});</script></head><body><table border="1" width="500" height="50" align="center" id="tbl" id="tbl"><thead><tr><th>编号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr ><td>1</td><td>张三</td><td>22</td></tr><tr ><td>2</td><td>李四</td><td>25</td></tr><tr ><td>3</td><td>王五</td><td>27</td></tr><tr ><td>4</td><td>赵六</td><td>29</td></tr><tr ><td>5</td><td>田七</td><td>30</td></tr><tr ><td>6</td><td>汾九</td><td>20</td></tr></tbody></table></body>
</html>
三、使用JQ完成全选和全不选
1.需求分析
在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选
2.技术分析
需要使用jquery的选择器(id选择器、类选择器)
需要使用jquery的属性操作方法 prop()
3.步骤分析
第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！
4.代码实现
注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。
☞ 在jquery中如何调用方法？
元素.方法（） //使用jquery选择器获取到需要操作元素
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用jQuery完成复选框的全选和全不选</title><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>--><script>$(function(){$("#select").click(function(){//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。//attr方法与JQ的版本有关，在1.8.3及以下有效。//$("tbody input").attr("checked",this.checked);$("tbody input").prop("checked",this.checked);});});</script></head><body><table border="1" width="500" height="50" align="center" id="tbl" ><thead><tr><td colspan="4"><input type="button" value="添加" /><input type="button" value="删除" /></td></tr><tr><th><input type="checkbox" id="select"></th><th>编号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr ><td><input type="checkbox" class="selectOne"/></td><td>1</td><td>张三</td><td>22</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>2</td><td>李四</td><td>25</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>3</td><td>王五</td><td>27</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>4</td><td>赵六</td><td>29</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>5</td><td>田七</td><td>30</td></tr><tr ><td><input type="checkbox" class="selectOne"/></td><td>6</td><td>汾九</td><td>20</td></tr></tbody></table></body>
</html>
四、使用JQ完成省市二级联动
1.需求分析
使用jquery完成省市二级联动
2.技术分析
2.1数组的遍历操作
方式一：
$(function(){// 全选/ 全不选$("#checkallbox").click(function(){var isChecked = this.checked;//使用对象访问的方式进行遍历，语法：$().each(function(){})$("input[name='hobby']").each(function(){this.checked = isChecked;});});
});方式二：
$.each( [0,1,2], function(i, n){ //[0,1,2]: 被遍历的对象, i: 角标， n： 被遍历后的内容alert( "Item #" + i + ": " + n );
});
2.2 文档处理操作
追加内容
apend: A.append(B) 将B追加到A的内容的末尾处appendTo: A.appendTo(B) 将A加到B内容的末尾处
3.步骤分析
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步：创建二维数组来存储省份和城市
第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步：接着遍历数组中的城市
第五步：创建一个城市文本节点
第六步：创建option元素节点
第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步：获取第二个下拉列表并将option元素节点添加进去
第九步：清除第二个下拉列表的option内容
4.代码实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用jQuery完成省市二级联动</title><style type="text/css">.top{border: 1px solid red;width: 32.9%;height: 50px;float: left;}#clear{clear: both;}#menu{border: 1px solid blue;width: 99%;height: 40px;background-color: black;}#menu ul li{display: inline;color: white;font-size: 19px;}#bottom{text-align: center;}#contanier{border: 1px solid red;width: 99%;height: 600px;background: url(../img/regist_bg.jpg);position: relative;}#content{border: 5px solid gray;width: 50%;height: 60%;position: absolute;top: 100px;left: 300px;background-color: white;padding-top: 50px;}</style><!--引入jquery文件--><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("郑州市","洛阳市","开封市","安阳市");//1：确定事件(change事件),在绑定的函数里面获取用户选择的省份$("#province").change(function(){//alert("aaa");//测试//10.清除第二个下拉列表的内容//empty删除匹配的元素集合中所有的子节点。$("#city").empty();//1.获取用户选择的省份var val = this.value;//alert(val);//测试拿到索引//3.遍历二维数组中的省份//jQuery.each(object, [callback])//object-需要例遍的对象或数组,callback (可选)-每个成员/元素执行的回调函数。$.each(cities, function(i,n) {//测试遍历二维数组中的省份//alert( "Item #" + i + ": " + n );//4.判断用户选择的省份和遍历的省份if(val == i){//5.遍历该省份下的所有城市$.each(cities[i],function(j,m){//测试遍历选中的该省份下的城市//alert(m);//6.创建城市文本节点var textNode = document.createTextNode(m);//7.创建option元素节点//这段代码创建新的 option元素：var opEle = document.createElement("option");//8.将城市文本节点添加到option元素节点去//$(element)-根据给定的元素名匹配所有元素$(opEle).append(textNode);//9.将option元素节点追加到第二个下拉列表中去//$("#id")根据给定的ID匹配一个元素$(opEle).appendTo($("#city"));});}});});});</script></head><body><div><!--1.logo部分的div--><div><!--切分为3个小的div--><div class="top"><img src="../img/logo2.png" height="47px"/></div><div class="top"><img src="../img/header.png" height="47px"/></div><div class="top" style="padding-top: 15px;height: 35px;"><a href="#">登录</a><a href="#">注册</a><a href="#">购物车</a></div></div><!--清除浮动--><div id="clear"></div><!--2.导航栏部分的div--><div id="menu"><ul><li >首页</li><li >电脑办公</li><li >手机数码</li><li >孕婴保健</li><li >鞋靴箱包</li></ul></div><!--3.中间注册表单部分div--><div id="contanier"><div id="content"><table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white"><form method="get" action="#" onsubmit="return checkForm()"><tr><td colspan="2" align="center"><font size="5">会员注册</font></td></tr><tr><td>用户名</td><td><input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span></td></tr><tr><td>密码</td><td><input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span></td></tr><tr><td>确认密码</td><td><input type="password" name="repassword" /></td></tr><tr><td>email</td><td><input type="text" name="email" id="email" /></td></tr><tr><td>姓名</td><td><input type="text" name="name" /></td></tr><!--1.编写HTML文件部分的内容--><tr><td>籍贯</td><td><!--2.确定事件，通过函数传参的方式拿到改变后的城市--><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><tr><td>性别</td><td><input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女</td></tr><tr><td>出生日期</td><td><input type="text" name="birthday" /></td></tr><tr><td>验证码</td><td><input type="text" name="yanzhengma" /><img src="../img/yanzhengma.png" /></td></tr><tr><td colspan="2"><input type="submit" value="注册" /> </td></tr></form></table></div></div><!--4.广告图片的div--><div id=""><img src="../img/footer.jpg" width="99%" /></div><!--5.超链接与版权信息的div--><div id="bottom"><a href="#">关于我们 </a><a href="#">联系我们 </a><a href="#">招贤纳士 </a><a href="#">法律声明</a><a href="#">友情链接</a><a href="#">支付方式</a><a href="#">配送方式 </a><a href="#">服务声明 </a><a href="#">广告声明 </a><p>Copyright © 2005-2016 传智商城 版权所有 </p></div></div></body>
</html>
五、使用JQ完成下拉列表左右选择
1.需求分析
见图片文字部分内容。
2.分析
第一步：确定事件(鼠标单击事件click)
第二步：获取左侧下拉列表被选中的option($(“#left option:selected”))
[假设左侧select定义了一个id=left]
第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
3.代码实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>下拉列表左右选择</title><!--引入jquery文件--><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script>$(function(){/*1.选中单击去右边*///#id-根据给定的ID匹配一个元素//触发每一个匹配元素的click事件$("#selectOneToRight").click(function(){$("#left option:selected").appendTo($("#right"));});/*2.单击全部去右边*/$("#selectAllToRight").click(function(){$("#left option").appendTo($("#right"));});/*3.选中双击去右边*///触发每一个匹配元素的dblclick事件//:selected//匹配所有选中的option元素$("#left option").dblclick(function(){$("#left option:selected").appendTo($("#right"));});/*4.选中单击去左边*///#id-根据给定的ID匹配一个元素//触发每一个匹配元素的click事件$("#selectOneToleft").click(function(){$("#right option:selected").appendTo($("#left"));});/*5.单击全部去左边*/$("#selectAllToleft").click(function(){$("#right option").appendTo($("#left"));});/*6.选中双击去左边*///触发每一个匹配元素的dblclick事件//:selected//匹配所有选中的option元素$("#right option").dblclick(function(){$("#right option:selected").appendTo($("#left"));});});</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="#" style="padding-left: 20px;" id="selectOneToleft"><<</a></p><!--<<<-- <<<--><p><a href="#" style="padding-left: 20px;" id="selectAllToleft"><<<</a></p></span></td></tr><tr><td colspan="2"><input type='submit' value="修改"/></td></tr></table></body>
</html>
六、使用JQ完成表单校验
1.需求分析
2.技术分析
这里使用validation插件完成对表单数据的校验
validation插件介绍
一款优秀的表单验证插件——validation插件
特点：
1)内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
2)自定义验证规则：可以很方便的自定义验证规则
3)简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
4)实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。
下载：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
快速入门：
validate入门案例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>validate入门案例</title><!--先导入jQuery库--><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>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网站注册页面</title><style>#contanier{border: 0px solid white;width: 1300px;margin: auto;}#top{border: 0px solid white;width: 100%;height: 50px;}#menu{border: 0px solid white;height: 40px;background-color: black;padding-top: 10px;margin-bottom: 15px;margin-top: 10px;}.top{border: 0px solid white;width: 405px;height: 100%;float: left;padding-left: 25px;}#top1{padding-top: 15px;}#bottom{margin-top: 13px;text-align: center;}#form{height: 500px;padding-top: 70px;background-image: url(../img/regist_bg.jpg);margin-bottom: 10px;}a{text-decoration: none;}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;}#father{border: 0px solid white;padding-left: 307px;}#form2{border: 5px solid gray;width: 660px;height: 450px;}</style><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><!--引入validate插件js文件--><script type="text/javascript" src="../js/jquery.validate.min.js" ></script><!--引入国际化js文件--><script type="text/javascript" src="../js/messages_zh.js" ></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:5},sex:{required:true}},messages:{user:{required:"用户名不能为空!",minlength:"用户名不得少于3位!"},password:{required:"密码不能为空!",digits:"密码必须是整数!",minlength:"密码不得少于6位!"},repassword:{required:"确认密码不能为空!",equalTo:"两次输入密码不一致!"},email:{required:"邮箱不能为空!",email:"邮箱格式不正确!"},username:{required:"姓名不能为空!",maxlength:"姓名不得多于5位!"},sex:{required:"性别必须勾选!"}},errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是labelsuccess: function(label) { //验证成功后的执行的回调函数//label指向上面那个错误提示信息标签labellabel.text(" ") //清空错误提示消息.addClass("success"); //加上自定义的success类}});});</script></head><body><div id="contanier"><div id="top"><div class="top"><img src="../img/logo2.png" height="47px"/></div><div class="top"><img src="../img/header.png" height="45px" /></div><div class="top" id="top1"><a href="#">登录</a><a href="#">注册</a><a href="#">购物车</a></div></div><div id="menu"><a href="#"><font size="5" color="white">首页</font></a> <a href="#"><font color="white">电脑办公</font></a> <a href="#"><font color="white">手机数码</font></a> <a href="#"><font color="white">鞋靴箱包</font></a> </div><div id="form"><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> 密码</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><label for="sex" class="error" style="display: none;"></label></span></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></div><div><img src="../img/footer.jpg" width="100%"/></div><div id="bottom"><a href="../案例一：网站信息显示页面/网站信息显示页面.html">关于我们</a><a href="#">联系我们</a><a href="#">招贤纳士</a><a href="#">法律声明</a><a href="../案例三：网站友情链接显示页面/网站友情链接显示页面.html">友情链接</a><a href="#">支付方式</a><a href="#">配送方式</a><a href="#">服务声明</a><a href="#">广告声明</a><p>Copyright © 2005-2016 传智商城 版权所有 </p></div></div></body>
</html>
