jQuery的使用
1、使用JQ完成首頁的定時廣告彈出
1.需求分析 在首頁中(logo的上方)顯示一個廣告圖片(頁面加載後，間隔3秒彈出廣告圖片，再間隔3秒後隱藏廣告圖片)。【使用jQuery實現】javascript
2.技術分析css
2.1 jquery相關的知識html
什麼是jqueryjava
Jquery它是javascript的一個輕量級框架，對javascript進行封裝，它提供了不少方便的選擇器。供你快速定位到須要操做的元素上面去。還提供了不少便捷的方法。jquery
怎麼使用jquerygit
Jquery它是一個庫(框架)，要想使用它，必須先引入！數組
jquery-1.8.3.js：通常用於學習階段。app
jquery-1.8.3.min.js：用於項目使用階段框架
Jquery的簡單入門dom
全部的jquery代碼寫在頁面加載函數
$(function(){
Jquery代碼
});
<html>
<head>
<meta charset="UTF-8">
<title>jquery入門</title>
<script src="../../js/jquery-1.8.3.js"></script>
<script>
//整個文檔加載完畢後執行
/*function init(){
alert("張三");
}*/
/*window.onload= function(){
alert("張三");
}
//整個文檔加載完畢後(包括圖片)執行
window.onload= function(){
alert("老王");
}[傳統的JavaScript頁面加載函數是最後一個生效，
它會覆蓋以前的。它的加載順序比jQuery的要慢。
【它是整個文檔加載完畢後纔會執行】]
//dom樹繪製完畢後執行,可能DOM元素關聯的東西並無加載完
jQuery(document).ready(function(){
alert("李四");
});[jQuery的頁面加載函數能夠存在多個(不會發生覆蓋)，
它會按照順序進行執行。(dom數加載完成)]
//jquery的簡寫方法(頁面加載)
$(function(){
alert("王五");
});
*/
function init(){
document.getElementById("a1").onclick= function(){
location.href="";
}
}
$(function(){
document.getElementById("a1").onclick= function(){
location.href="";
}
});
$(function(){
document.getElementById("a2").onclick= function(){
location.href="";
}
});
</script>
</head>
<body onload="init()">
<a href="#" id="a1">ss</a>
<a href="#" id="a2"></a>
</body>
</html>
獲取元素
JS:document.getElementById();
JQ:$(「#id」);
Jquery對象與DOM對象轉換
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function JSWrite(){
//document.getElementById("span1").innerHTML="美美噠！";
var spanEle = document.getElementById("span1");
$(spanEle).html("美美噠！");
}
$(function(){
/*document.getElementById("btn1").onclick = function(){
document.getElementById("span1").innerHTML="帥帥噠！";
}*/
$("#btn1").click(function(){
//JQ對象轉換成DOM對象的第一種方式
//$("#span1")[0].innerHTML="呵呵噠！";
//JQ對象轉換成DOM對象的第二種方式
$("#span1").get(0).innerHTML="呵呵噠！";
});
});
</script>
</head>
<body>
<input type="button" value="JS寫入" onclick="JSWrite()"/>
<input type="button" value="JQ寫入" id="btn1"/><br /><br />
<span id="span1">sssss</span>
</body>
</html>
注意：JQ對象只能操做JQ裏面的屬性和方法
JS對象只能操做JS裏面的屬性和方法。
Jquery的效果
3.實現步驟
第一步：引入jQuery相關的文件
第二步：書寫頁面加載函數
第三步：在頁面加載函數中，獲取顯示廣告圖片的元素。
第四步：設置定時操做(顯示廣告圖片的函數)
第五步：在顯示廣告圖片的函數中，使用jQuery的方法讓廣告圖片顯示(show())
第六步：清除顯示廣告圖片的定時操做
第七步：設置定時操做(隱藏廣告圖片的函數)
第八步：在隱藏廣告圖片的函數中，使用jQuery的方法讓廣告圖片隱藏(hide())
第九步：清除隱藏廣告圖片的定時操做
4.代碼實現
<script type="text/javascript">
var time;
$(function(){
time=setInterval("showAd()",3000);
});
function showAd(){
//$("#img1").show();
//$("#img1").slideDown(3000);
$("#img1").fadeIn(3000);
clearInterval(time);
time = setInterval("hideAd()",5000);
}
function hideAd(){
//$("#img1").hide();
//$("#img1").slideUp(3000);
$("#img1").slideUp(3000);
clearInterval(time);
}
</script>
5.補充內容
Toggle的使用
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#img1").toggle();
});
});
</script>
</head>
<body>
<input type="button" value="顯示/隱藏" id="btn1"/><br />
<img src="../img/registImg.jpg" id="img1" />
</body>
</html>
6.總結
6.1 jquery的選擇器
基本選擇器
id選擇器：$(「#id名稱」);
元素選擇器：$(「元素名稱」);
類選擇器：$(「.類名」);
通配符：*
多個選擇器共用(並集)
案例代碼：
<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(){
$("#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(){
$("#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>
層級選擇器
ancestor descendant: 在給定的祖先元素下匹配全部的後代元素(兒子、孫子、重孫子)
parent > child : 在給定的父元素下匹配全部的子元素(兒子)
prev + next: 匹配全部緊接在 prev 元素後的 next 元素(緊挨着的，同桌)
prev ~ siblings: 匹配 prev 元素以後的全部 siblings 元素(兄弟)
代碼演示：
<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(){
$("body div").css("background-color","pink");
});
$("#btn2").click(function(){
$("body>div").css("background-color","pink");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","pink");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","pink");
});
});
</script>
</head>
<body>
<inpt 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>
基本過濾選擇器
$('li').first() 等價於：$(「li:first」)
代碼案例演示：
<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(){
$("div:first").css("background-color","pink");
});
$("#btn2").click(function(){
$("div:last").css("background-color","pink");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","pink");
});
$("#btn4").click(function(){
$("div:even").css("background-color","pink");
});
});
</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>
屬性選擇器
<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(){
$("div[id]").css("background-color","pink");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","pink");
});
});
</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>
表單選擇器
<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>
$(function(){
$("#btn1").click(function(){
$(":input").css("background-color","pink");
});
$("#btn2").click(function(){
$(":text").css("background-color","pink");
});
});
</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>
2、使用JQ完成表格的隔行換色
1.需求分析
在頁面加載的時候讓顯示用戶的表格進行隔行換色顯示，效果以下：使用JQ實現！
2.技術分析
須要使用jquery的選擇器(基本選擇器、基本過濾選擇器)
還須要使用jquery的CSS的方法(css(name,value))
若是CSS樣式已經由美工寫好，此時可使用jquery的CSS類操做
3.步驟分析
第一步：引入jquery的類庫
第二步：直接寫頁面加載函數
第三步：直接使用jquery的選擇器(組合選擇)拿到須要操做的元素(奇數行和偶數行)
第四步：分別使用CSS的方法(css(name,value))對奇數行和偶數行設置背景顏色。
4.代碼實現
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<script>
$(function(){
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
});
</script>
3、使用JQ完成全選和全不選
1.需求分析
在系統後臺進行人員管理時，進行批量刪除，使用jq完成全選和全不選
2.技術分析
須要使用jquery的選擇器(id選擇器、類選擇器)
須要使用jquery的屬性操做方法 prop()
3.步驟分析
第一步：引入jquery文件
第二步：書寫頁面加載函數
第三步：爲上面的複選框綁定單擊事件
第四步：將下面全部的複選框的選中狀態設置成跟上面的一致！
4.代碼實現
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//找到下面全部的複選框並設置屬性checked()
/*if($("#select")[0].checked==true){
$(".selectOne").attr("checked",true)
}*/
$("#select").click(function(){
$(".selectOne").attr("checked",this.checked);
});
});
</script>
注意：attr在jquery1.11版本不適用，採用prop()來替代(在各個版本都適用)。
在jquery中如何調用方法？
元素[使用jquery選擇器獲取到須要操做元素].方法（）
4、使用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[被遍歷後的內容]){
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.代碼實現
<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(){
//10.清除第二個下拉列表的內容
$("#city").empty();
//1.獲取用戶選擇的省份
var val = this.value;
//alert(val);
//3.遍歷二維數組中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判斷用戶選擇的省份和遍歷的省份
if(val==i){
//5.遍歷該省份下的全部城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.建立城市文本節點
var textNode = document.createTextNode(m);
//7.建立option元素節點
var opEle = document.createElement("option");
//8.將城市文本節點添加到option元素節點中去
$(opEle).append(textNode);
//9.將option元素節點追加到第二個下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
5、使用JQ完成下拉列表左右選擇
1.需求分析
見圖片文字部份內容。
2.分析
第一步：肯定事件(鼠標單擊事件click)
第二步：獲取左側下拉列表被選中的option($(「#left option:selected」)) [假設左側select定義了一個id=left]
第三步：將獲取到的option添加到右側的下拉列表中去。(append方法的使用)
3.代碼實現
<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>
6、使用JQ完成表單校驗
1.需求分析
2.技術分析 這裏使用validation插件完成對錶單數據的校驗
<!-- 1 先引入jquery包 -->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<!-- 2 在引入 validate包 (他是經過name獲取值的)-->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<!-- 3 在引入國際化包 -->
<script type="text/javascript" src="js/messages_zh.min.js"></script>
<script type="text/javascript">
$(function(){
/* 4 使用表單校驗器進行校驗 */
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:5
},
password:{
required:true,
digits:false,
minlength:6
},
repassword:{
required:true,
digits:false,
minlength:6,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用戶名不能爲空",
minlength:"用戶名不能少於6位"
},
password:{
required:"密碼不能爲空",
digits:"密碼不能爲純數字",
minlength:"密碼長度不能少於6位"
},
repassword:{
required:"確認密碼不能爲空",
digits:"密碼不能爲純數字",
minlength:"密碼不能少於6位",
euqalTo:"倆次密碼不一致"
},
email:{
required:"郵箱不能爲空",
email:"郵箱格式不真確"
},
username:{
required:"用戶名必填",
maxlength:"用戶名不能超過5位"
},
sex:{
required:"性別必選"
}
},
errorElement:"label", /* //用來建立錯誤提示信息標籤 (默認就是label) */
success:function(label){ /* //驗證成功後執行的回調函數 */
label.text(" ") /* //清空錯誤提示信息 */
addClass("success"); /* //添加自定義的success類 */
}
});
});
</script>
<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>
</span>
<label for="sex" class="error" style="display:none"></label>
</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="images/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>
相關文章
- 1. jquery 的使用
- 2. jQuery的使用
- 3. jquery的使用
- 4. jQuery plupload 的使用
- 5. jquery $.proxy的使用
- 6. jquery Ajax的使用
- 7. jquery-nicescroll 的使用
- 8. JQuery uploadify 的使用
- 9. jQuery dataTables 的使用
- 10. jQuery的Cookie使用
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jquery 的使用
- 2. jQuery的使用
- 3. jquery的使用
- 4. jQuery plupload 的使用
- 5. jquery $.proxy的使用
- 6. jquery Ajax的使用
- 7. jquery-nicescroll 的使用
- 8. JQuery uploadify 的使用
- 9. jQuery dataTables 的使用
- 10. jQuery的Cookie使用