jQuery的應(yīng)用
一暇昂、使用JQ完成首頁的定時(shí)廣告彈出
1.需求分析
在首頁中(logo的上方)顯示一個(gè)廣告圖片(頁面加載后，間隔3秒彈出廣告圖片，再間隔3秒后隱藏廣告圖片)元旬×裥欤【使用jQuery實(shí)現(xiàn)】
2.技術(shù)分析
使用jQuery中的相關(guān)技術(shù)
3.實(shí)現(xiàn)步驟
- 第一步：引入jQuery相關(guān)的文件
- 第二步：書寫頁面加載函數(shù)
- 第三步：在頁面加載函數(shù)中，獲取顯示廣告圖片的元素匀归。
- 第四步：設(shè)置定時(shí)操作(顯示廣告圖片的函數(shù))
- 第五步：在顯示廣告圖片的函數(shù)中坑资，使用jQuery的方法讓廣告圖片顯示(show())
- 第六步：清除顯示廣告圖片的定時(shí)操作
- 第七步：設(shè)置定時(shí)操作(隱藏廣告圖片的函數(shù))
- 第八步：在隱藏廣告圖片的函數(shù)中，使用jQuery的方法讓廣告圖片隱藏(hide())
- 第九步：清除隱藏廣告圖片的定時(shí)操作
4.代碼實(shí)現(xiàn)
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.書寫顯示廣告圖片的定時(shí)操作
time = setInterval("showAd()",3000);
});
//2.書寫顯示廣告圖片的函數(shù)
function showAd(){
//3.獲取廣告圖片穆端，并讓其顯示
//$("#img2").show(1000);
//$("#img2").slideDown(5000);
$("#img2").fadeIn(4000);
//4.清除顯示圖片定時(shí)操作
clearInterval(time);
//5.設(shè)置隱藏圖片的定時(shí)操作
time = setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.獲取廣告圖片袱贮，并讓其隱藏
//$("#img2").hide();
//$("#img2").slideUp(5000);
$("#img2").fadeOut(6000);
//7.清除隱藏圖片的定時(shí)操作
clearInterval(time);
}
</script>
5.補(bǔ)充內(nèi)容
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>
<input type="button" value="顯示/隱藏" id="btn" /><br />|
05.gif)
</div>
</body>
</html>
二、使用JQ完成隔行變色
1.需求分析
在頁面加載的時(shí)候讓顯示用戶的表格進(jìn)行隔行換色顯示体啰，效果如下：使用JQ實(shí)現(xiàn)攒巍！
隔行變色.png
2.技術(shù)分析
需要使用jquery的選擇器(基本選擇器、基本過濾選擇器)
還需要使用jquery的CSS的方法(css(name,value))
如果CSS樣式已經(jīng)由美工寫好荒勇，此時(shí)可以使用jquery的CSS類操作
addClass(class | fn)
3.步驟分析
- 第一步：引入jquery的類庫
- 第二步：直接寫頁面加載函數(shù)
- 第三步：直接使用jquery的選擇器(組合選擇)拿到需要操作的元素(奇數(shù)行和偶數(shù)行)
- 第四步：分別使用CSS的方法(css(name,value))對(duì)奇數(shù)行和偶數(shù)行設(shè)置背景顏色柒莉。
4.代碼實(shí)現(xiàn)
<!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(){
//方式一：使用內(nèi)部樣式
/*//2.獲取tbody下面的偶數(shù)行并設(shè)置背景顏色
$("tbody tr:even").css("background-color","yellow");
//3.獲取tbody下面的奇數(shù)行并設(shè)置背景顏色
$("tbody tr:odd").css("background-color","green");*/
//方式二：使用外部樣式，記得引入外部CSS樣式文件
//2.獲取tbody下面的偶數(shù)行并設(shè)置背景顏色
$("tbody tr:even").addClass("even");
$("tbody tr:even").removeClass("even");
//3.獲取tbody下面的奇數(shù)行并設(shè)置背景顏色
$("tbody tr:odd").addClass("odd");
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>編號(hào)</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.需求分析
在系統(tǒng)后臺(tái)進(jìn)行人員管理時(shí)兢孝，進(jìn)行批量刪除，使用jq完成全選和全不選
全選全不選.png
2.技術(shù)分析
- 需要使用jquery的選擇器(id選擇器仅偎、類選擇器)
- 需要使用jquery的屬性操作方法 prop()
3.步驟分析
- 第一步：引入jquery文件
- 第二步：書寫頁面加載函數(shù)
- 第三步：為上面的復(fù)選框綁定單擊事件
- 第四步：將下面所有的復(fù)選框的選中狀態(tài)設(shè)置成跟上面的一致西潘！
4.代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成復(fù)選框的全選和全不選</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(){
//獲取下面所有的 復(fù)選框并將其選中狀態(tài)設(shè)置跟編號(hào)的前面 復(fù)選框保持一致。
//attr方法與JQ的版本有關(guān)哨颂，在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>編號(hào)</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>
注意：attr在jquery1.11版本不適用，采用prop()來替代(在各個(gè)版本都適用)威恼。
在jquery中如何調(diào)用方法品姓？
元素.方法（）
四、使用JQ完成省市二級(jí)聯(lián)動(dòng)
1.需求分析
省市二級(jí)聯(lián)動(dòng).png
2.技術(shù)分析
2.1數(shù)組的遍歷操作
方式一：each(callback)
$(function(){
// 全選/ 全不選
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用對(duì)象訪問的方式進(jìn)行遍歷箫措，語法：$().each(function(){})
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
});
方式二：$.each(object,[callback])
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
2.2文檔處理操作
追加內(nèi)容
apend: A.append(B) 將B追加到A的內(nèi)容的末尾處
appendTo: A.appendTo(B) 將A加到B內(nèi)容的末尾處
3.步驟分析
- 第一步：確定事件(change事件),在綁定的函數(shù)里面獲取用戶選擇的省份
- 第二步：創(chuàng)建二維數(shù)組來存儲(chǔ)省份和城市
- 第三步：遍歷二維數(shù)組中的省份(與用戶選擇的省份進(jìn)行比較)【使用JQ的遍歷操作】
- 第四步：接著遍歷數(shù)組中的城市
- 第五步：創(chuàng)建一個(gè)城市文本節(jié)點(diǎn)
- 第六步：創(chuàng)建option元素節(jié)點(diǎn)
- 第七步：將文本節(jié)點(diǎn)添加到元素節(jié)點(diǎn)中【使用JQ的文檔操作方法】
- 第八步：獲取第二個(gè)下拉列表并將option元素節(jié)點(diǎn)添加進(jìn)去
- 第九步：清除第二個(gè)下拉列表的option內(nèi)容
4.代碼實(shí)現(xiàn)
JQ代碼：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.創(chuàng)建二維數(shù)組用于存儲(chǔ)省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
cities[1] = new Array("長(zhǎng)沙市","郴州市","株洲市","岳陽市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
$("#province").change(function(){
//10.清除第二個(gè)下拉列表的內(nèi)容
$("#city").empty();
//1.獲取用戶選擇的省份
var val = this.value;
//alert(val);
//3.遍歷二維數(shù)組中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判斷用戶選擇的省份和遍歷的省份
if(val==i){
//5.遍歷該省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.創(chuàng)建城市文本節(jié)點(diǎn)
var textNode = document.createTextNode(m);
//7.創(chuàng)建option元素節(jié)點(diǎn)
var opEle = document.createElement("option");
//8.將城市文本節(jié)點(diǎn)添加到option元素節(jié)點(diǎn)中去
$(opEle).append(textNode);
//9.將option元素節(jié)點(diǎn)追加到第二個(gè)下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
HTML代碼：
<td>
<!--2.確定事件腹备，通過函數(shù)傳參的方式拿到改變后的城市-->
<select id="province">
<option>--請(qǐng)選擇--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>
五、使用JQ完成下拉列表左右選擇
1.需求分析
下拉列表左右選擇.png
2.分析
- 第一步：確定事件(鼠標(biāo)單擊事件click)
- 第二步：獲取左側(cè)下拉列表被選中的option($(“#left option:selected”)) [假設(shè)左側(cè)select定義了一個(gè)id=left]
- 第三步：將獲取到的option添加到右側(cè)的下拉列表中去斤蔓。(append方法的使用)
3.代碼實(shí)現(xiàn)
JQ代碼：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
/*1.選中單擊去右邊*/
$("#selectOneToRight").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="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="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</span>
</td>
六植酥、使用JQ完成表單校驗(yàn)
表單校驗(yàn).PNG
注意：使用validate校驗(yàn)，導(dǎo)入插件
JS代碼：
<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>
<!--引入國(guó)際化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:"密碼必須是整數(shù)!",
minlength:"密碼不得少于6位!"
},
repassword:{
required:"確認(rèn)密碼不能為空!",
equalTo:"兩次輸入密碼不一致!"
},
email:{
required:"郵箱不能為空!",
email:"郵箱格式不正確!"
},
username:{
required:"姓名不能為空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性別必須勾選!"
}
},
errorElement: "label", //用來創(chuàng)建錯(cuò)誤提示信息標(biāo)簽,validate插件默認(rèn)的就是label
success: function(label) { //驗(yàn)證成功后的執(zhí)行的回調(diào)函數(shù)
//label指向上面那個(gè)錯(cuò)誤提示信息標(biāo)簽label
label.text(" ") //清空錯(cuò)誤提示消息
.addClass("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">會(huì)員注冊(cè)</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>
確認(rèn)密碼
</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>
驗(yàn)證碼
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="yanzhengma" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 冊(cè)" height="50px"/>
</td>
</tr>
</table>
</div>
</div>
</form>