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的学习做个简要的总结：
首先其功能很强大，还有很多未知的东西值得探索，不过掌握最基本的语法后，再结合相关的操作，就可以按照自己的意图去实现一些东西
继续加油！！！！