今日任务
-
使用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值为none
var 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插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.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>
