一、JQuery
1、JQuery入門
JQuery是一個JavaScript框架。它兼容CSS3，還兼容各種瀏覽器。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>2、JQ頁面加載與JS頁面加載的區別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS與JQ頁面加載區別</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("王五");
});
//簡寫方式
$(function(){
alert("汾九");
});
</script>
</head>
<body>
</body>
</html>3、JQ的獲取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的獲取</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.JS方式獲取
/*document.getElementById("btn").οnclick= function(){
location.href="#.html";
}*/
//2.JQ方式獲取=====>>>$("#btn")
$("#btn").click(function(){
location.href="#.html"
});
});
</script>
</head>
<body>
<input type="button" value="點我有驚喜" id="btn"/>
</body>
</html>4、DOM對象與JQ對象的轉換
<!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>5、使用JQ完成首頁定時彈出廣告圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//1.書寫顯示廣告圖片的定時操作
time = setInterval("showAd()",3000);
});
//2.書寫顯示廣告圖片的函數
function showAd(){
//3.獲取廣告圖片，並讓其顯示
//$("#img2").show(1000);
//$("#img2").slideDown(5000);
$("#img2").fadeIn(4000);
//4.清除顯示圖片定時操作
clearInterval(time);
//5.設置隱藏圖片的定時操作
time = setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.獲取廣告圖片，並讓其隱藏
//$("#img2").hide();
//$("#img2").slideUp(5000);
$("#img2").fadeOut(6000);
//7.清除隱藏圖片的定時操作
clearInterval(time);
}
</script>
</head>
<body onload="init()">
<div id="father">
<!--定時彈出廣告圖片位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
<!--1.logo部分-->
<center><h1>標題部分</h1></center>
</body>
</html>6、JQ選擇器
基本選擇器：
<!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(){
$("#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>層級選擇器：
<!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>基本過濾器：
<!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(){
$("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>屬性選擇器：
<!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(){
$("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>7、使用JQ完成全選和全不選
<!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>
</tbody>
</table>
</body>
</html>8、使用JQ完成省市二級聯動
<!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() {
//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>
</head>
<body>
<!--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>
</body>
</html>9、使用JQ完成註冊頁面表單校驗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate入門案例</title>
<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>
