JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）
JQuery的使用案例
（一）利用JQuery完成省市二级联动
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步：创建二维数组来存储省份和城市
第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步：接着遍历数组中的城市
第五步：创建一个城市文本节点
第六步：创建option元素节点
第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步：获取第二个下拉列表并将option元素节点添加进去
第九步：清除第二个下拉列表的option内容
代码实现：
<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("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
//9.清除第二个下拉框里的内容
$("#city").empty();
//1.获取选择的省份
var val=this.value;
//3.进行省份的遍历，找出其下标
$.each(cities,function(i,n) {
if(val==i)
{
//4.遍历数组中的城市
$.each(cities[i],function (j,m) {
//5.创建城市文本节点
var t=document.createTextNode(m);
//6.创建option元素节点
var x=document.createElement("option");
//7.将文本节点添加到元素节点中
$(x).append(t);
//8.将元素节点添加到第二个下拉框下
$(x).appendTo($("#city"));
});
}
});
});
});
</script>
html代码：
<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>
成功的截图：
当选择省份后：
（二）利用JQuery来实现表格隔行换色和全选操作
隔行换色的实现：
第一步：引入jquery的类库
第二步：直接写页面加载函数
第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
全选操作：
第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！（attr）
上代码：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
//1.页面加载
$(function(){
//第一种方法实现隔行换色
/*$("tbody tr:even").css("background-color","yellow");
$("tbody tr:odd").css("background-color","pink");*/
//第二种方法利用写好的css实现隔行换色
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
//实现全选
$("#check").click(function(){
$(".checkOne").attr("checked",this.checked);
});
});
</script>
html代码：
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th> <input type="checkbox" id="check" /> </th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td> <input type="checkbox" class="checkOne"/> </td> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td> <input type="checkbox" class="checkOne"/> </td> <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td> <input type="checkbox" class="checkOne"/> </td> <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td> <input type="checkbox" class="checkOne"/> </td> <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td> <input type="checkbox" class="checkOne"/> </td> <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td> <input type="checkbox" class="checkOne"/> </td> <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table>
实现截图：
全选后：
（三）轮播图的设置与广告的定时播放与隐藏
广告的定时播放与隐藏
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
轮播图的设置
第一步：书写轮图片显示的定时操作
第二步：获取图片位置并设置src属性值
代码：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//广告的播放和隐藏
$(function(){
//1.书写广告的定时操作
time = setInterval("changeShow()",3000);
});
function changeShow()
{
//2.获取广告并让其显示
$("#img2").show(1000);
//3.清除显示图片定时操作
clearInterval(time);
//4.设置隐藏图片的定时操作
time = setInterval("hidden()",3000);
}
function hidden()
{
//5.获取图片并隐藏
$("#img2").hide();
//6.清楚隐藏的定时操作
clearInterval(time);
}
function init(){
//1.书写轮图片显示的定时操作
setInterval("changeImg()",2000);
}
//2.书写函数
var i=0
function changeImg(){
i++;
//3.获取图片位置并设置src属性值
document.getElementById("img1").src="img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
对于今天的JQuery的学习做个简要的总结：
首先其功能很强大，还有很多未知的东西值得探索，不过掌握最基本的语法后，再结合相关的操作，就可以按照自己的意图去实现一些东西
继续加油！！！！
