Web前端基礎：

Web前端：HTML最強總結附詳細代碼
Web前端：CSS最強總結附詳細代碼
Web前端：JavaScript最強總結附詳細代碼

Web前端工具：

Web前端： JQuery最強總結附詳細代碼
Web前端：Bootstrap最強總結附詳細代碼

JQuery最強總結

概念
- 知識框架
安裝
- 版本問題
- 下載
- jQuery的使用
jQuery語法結構
- 基礎語法
- 檔案就緒事件
jQuery選擇器
- 元素/標簽選擇器
- id 選擇器
- class 選擇器
- 全域選擇器
- 并集選擇器
- 后代選擇器
- 子選擇器
- 相鄰選擇器
- 同輩選擇器
- 屬性選擇器
- 可見性選擇器
- 所有選擇器的案例
jQuery常用函式
jQuery與js物件的轉換
jQuery中的事件
- 常用DOM事件串列
- 常用的 jQuery 事件方法
jQuery操作DOM
- 元素的增加
- 元素的克隆
- 元素的替換
- 元素的洗掉
jQuery效果
- 隱藏和顯示
- 淡入和淡出
基于jQuery實作表單驗證
jQuery案例
- 全選/全不選
- 動態時間
- 動態表格
- 省市級聯系

概念

jQuery是一個JavaScript函式庫，jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫， jQuery庫包含以下功能:

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和影片
HTML DOM 遍歷和修改
A JAX
Utilities

提示: 除此之外，jQuery還提供了大量的插件，
目前網路上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的擴展，

知識框架

在這里插入圖片描述

安裝

版本問題

jQuery版本有很多，分為1.x 2.x 3.x
1.x版本:能夠兼容IE678瀏覽器
2.x版本:不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本， 3.x版本:不兼容IE678，更加的精簡(在國內不流行，因為國內使用jQuery的主要目的就是兼容IE678)
國內多數網站還在使用1.x的版本

該總結中所用版本為1.1的版本

下載

jQuery有兩個版本:

生成環境使用的和開發測驗環境使用的， 
Production version - 用于實際的網站中，已被精簡和壓縮，
Development version - 用于測驗和開發(未壓縮，是可讀的代碼)

以上兩個版本都可以從 jquery.com 中下載，

這里給個國內的下載地址：
JQuery 下載

jQuery的使用

jQuery 庫是一個 JavaScript 檔案，我們可以直接在 HTML頁面中通過script 標簽參考它，跟參考自己的外部JavaScript腳本檔案一樣的語法，

//將第一步中下載好的jQuery資源包進行解壓，然后就可以飲用解壓好的.js檔案
<head>
    <script src="jquery-1.11.1.js"></script>
</head>了，

jQuery語法結構

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作(actions)

基礎語法

$(selector).action()
說明:美元符號定義 jQuery 
	選擇符(selector)"查詢"和"查找" HTML 元素 
	jQuery 的 action() 執行對元素的操作

檔案就緒事件

檔案就緒事件，實際就是檔案加載事件，

這是為了防止檔案在完全加載(就緒)之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作，

如果在檔案沒有完全加載之前就運行函式，操作可能失敗，所以我們盡可能將所有的操作都在檔案加載完畢之后實作，

寫法一：

$(function(){
// 開始寫 jQuery 代碼...
});

寫法二：

$(document).ready(function(){ 
// 開始寫 jQuery 代碼...
});

jQuery的ready方法與JavaScript中的onload相似，但是也有區別 :

區別	window.onload	$(document).ready()
執行次數	只能執行一次，如果執行第二次，第一次的執行會被覆寫	可用執行多次，不會覆寫之前的執行
執行時機	必須等待網易全部加載挖完畢(包括圖片等)，然后再執行包裹的代碼	只需要等待網頁中的DOM結果加載完畢就可以執行包裹的代碼
簡寫方式	無	$(function(){ });

jQuery選擇器

jQuery 選擇器基于元素的 id、類、型別、屬性、屬性值等"查找"(或選擇)HTML 元素，它基于已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器，

jQuery 中所有選擇器都以美元符號開頭:$()，

元素/標簽選擇器

Query 元素選擇器基于元素/標簽名選取元素，
語法:$("標簽名稱")

<div>div1</div>
<div>div2</div>
<div>div3</div>
<script type="text/javascript" src="js/jquery-1.11.1.js" >
<script>
//檔案就緒事件: 
	$(document).ready(function(){
		//撰寫jQuery 
	});

	$(function(){ 
		//1、標簽選擇器:
		//獲取所有的div元素(集合)
		var divList=$("div"); 
		console.log(divList);//jQuery的物件 
		console.log(divList.length); 
		for(var i=0;i<divList.length;i++){
			console.log(divList[i]);//js的物件 
			//將js物件轉換為jQuery的物件 
			console.log($(divList[i]));
		} 
	});
</script>

id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素，

頁面中元素的 id 應該是唯一的，所以在頁面中選取唯一的元素需要通過 #id 選擇器，

通過 id 選取元素語法如下:

$("#p1")

class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素
$(".mydiv")

全域選擇器

匹配所有元素
$("*")

并集選擇器

將每一個選擇器匹配到的元素合并后一起回傳
$("div,ul,li,.mydiv")

后代選擇器

在給定的祖先元素下匹配所有的后代元素
$("form input"

子選擇器

在給定的父元素下匹配所有的子元素
$("form > input")

相鄰選擇器

匹配所有緊接在 prev 元素后的 next 元素
$("label + input")

同輩選擇器

匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")

屬性選擇器

匹配包含給定屬性的元素

$("div[id]");//獲取所有有id屬性的div的元素集合 
$("div[class]");//獲取所有有class屬性的div的元素集合 
$("input[name='userName']");//獲取所有input標簽中name屬性是userName元素的集合 
$("input[name^='user']");//獲取所有input標簽中name屬性是user開頭的元素的集合 
$("input[name$='user']");//獲取所有input標簽中name屬性是user結尾的元素的集合 
$("input[name*='user']");//獲取所有input標簽中name屬性包含了user的元素的集合 
$("input[id][name^='user']");

可見性選擇器

匹配所有的可見或不可見的元素
$("div:visible");
$("input:hidden");

所有選擇器的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>選擇器</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>			
			//1、標簽選擇器：
			function htmlSelector(){				
				//獲取所有的div元素（集合）
				var divList=$("div");
				console.log(divList);//jQuery的物件
				console.log(divList.length);
				for(var i=0;i<divList.length;i++){
					console.log(divList[i]);//js的物件
					//將js物件轉換為jQuery的物件
					console.log($(divList[i]));
				} 
			}
			//2、id選擇器
			function idSelector(){
				//根據id獲取到的元素是惟一的，即使頁面上有重名的id，獲取的是第一個
				var p=$("#p1");
				console.log(p.html());
			}
			//3、.class選擇器
			function classSelector(){
				var list=$(".mydiv");
				console.log(list.length);
			}			
			//4、 全域選擇器
			function allSelector(){
				var list=$("*");//包括了html、head、title.....所有標簽
				console.log(list.length);
				for(var i=0;i<list.length;i++){
					console.log(list[i]);//js的物件					
				}  
			}
			//5、并集選擇器
			function andSelector(){
				var list=$(".mydiv,p,li");
				printList(list); 
			}
			//6、后代選擇器:包括所有的后代，兒子和孫子輩都有
			function subSelector(){
				var list=$("form input");
				printList(list);
			}
			//7、子選擇器：只有子元素
			function sunSelector(){
				var list=$("form>input");
				printList(list);
			}
			//8、相鄰選擇器
			function nextSelector(){
				var list=$("label + input");
				printList(list);
			}
			//9、同輩選擇器
			function sublingsSelector(){
				var list=$("form ~ div");
				printList(list); 
			}
			//10、屬性選擇器
			function attrSelector(){
				var list=$("div[id]");//獲取所有有id屬性的div的元素集合
				list=$("div[class]");//獲取所有有class屬性的div的元素集合
				list=$("input[name='userName']");//獲取所有input標簽中name屬性是userName元素的集合
				list=$("input[name^='user']");//獲取所有input標簽中name屬性是user開頭的元素的集合
				list=$("input[name$='user']");//獲取所有input標簽中name屬性是user結尾的元素的集合
				list=$("input[name*='user']");//獲取所有input標簽中name屬性包含了user的元素的集合
				list=$("input[id][name^='user']");//獲取所有input標簽中既有id屬性又有name屬性以user開頭的元素的集合
				printList(list);
			}
			//11、可見性選擇器
			function seeSelector(){
				//匹配所有的可見div元素
				var list=$("div:visible");
				//匹配所有的不可見div元素
				var list=$("div:hidden");
				//匹配所有的不可見input元素,樣式有display：none的元素和type=hidden的元素
				list=$("input:hidden"); 
				printList(list);
			}
			
			//檔案就緒事件：頁面加載完畢之后執行：
			$(function(){
				seeSelector();
			});
			//列印集合
			function printList(list){
				for(var i=0;i<list.length;i++){
					console.log(list[i]); 
					console.log(list[i].innerHTML);//非表單項元素使用該種方式輸出
					console.log(list[i].value);//只有表單項元素才有value
				}
			} 
		</script>
	</head>
	<body>	
		<form>
			<label>用戶名：</label>
			<input type="hidden" name="userId" value="1001" />
			<input style="display: none;" value="隱藏的input" />
			<input id="userName" name="userName" value="jiaobaoyu" /><br />
			<label>密碼：</label>
			<input name="userPass"  type="password" value="1234567"/><br />
			<fieldset>
				電話：<input id="phone" name="phoneuser" value="13712345789"/><br />
				郵箱：<input name="emailuser" type="email" value="lina@sina.com" />
			</fieldset>
		</form>
		地址：<input name="addressuser1" value="北京" /><br />
		<ul>
			<li>li111111</li>
			<li>li111111</li>
			<li>li111111</li>
		</ul>
		<p id="p1">p111111111111</p>
		<div id="div1" class="mydiv" style="display: none;" >div1</div> 
		<div class="mydiv">div2</div>
		<div id="div3">div3</div>
	</body>
</html>

jQuery常用函式

下列代碼中帶有

與標簽內容相關函式
與標簽屬性相關函式
與標簽樣式相關函式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函式</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<style>
			.redBg{
				background-color: red;
			}
			.fontColor{
				color: gold;
			}
		</style>
		<script>
			//1、與內容相關的函式
			function textFun(){
				var str1=$("div").html();//獲取的是第一個匹配元素的圍堵標簽中的所有內容，包括了嵌套在內部的標簽
				console.log(str1);
				var str2=$("div").text();//獲取的是第一個匹配元素的圍堵標簽中的所有文本，不包含標簽的內容
				console.log(str2);
				var str3=$("div").val();//val()只能用在表單項元素中，div不是表單元素，所以val()獲取不到任何內容
				var str4=$("input").val();//input是表單項元素，val()可以獲取到
				console.log(str3);
				console.log(str4);
			}
			//2、與屬性相關的函式
			function attrFun(){
				var img=$("img");
				//設定屬性
				img.attr("src","img/cat.jpg");
				img.attr("title","不服！");
				//移除屬性
				img.removeAttr("title");
				//獲取屬性
				var src=img.attr("src");
				var title=img.attr("title");
				console.log(src+"===="+title);
				
				//獲取checked屬性使用prop函式，獲取到的值是boolean型別，表示十分被選中
				var list=$("input[type='radio']");
				for(var i=0;i<list.length;i++){
					var flag=$(list[i]).prop("checked");
					console.log("checked="+flag);
				}				
			}
			//3、與css相關的函式
			function cssFun(){
				//給獲取的元素添加、洗掉、切換已有的樣式 PS：樣式一定是在樣式表中提前定義好的
				$("div").addClass("redBg");
				$("div").addClass("redBg fontColor");
				$("div").removeClass("fontColor");
				$("div").removeClass();//沒有引數的時候直接移除所有的樣式
				//$("div").toggleClass("fontColor");//匹配元素如果有當前的樣式就洗掉，如果沒有就添加
				//給所有的元素添加樣式，樣式直接添加，無需提前定義
				$("input").css("border-color","blue");
				$("input").css({"color":"red","border-color":"green"});
			}
			function changeCss(){
				$("div").toggleClass("fontColor");//匹配元素如果有當前的樣式就洗掉，如果沒有就添加
			}
			
			$(function(){
				cssFun();
			});
		</script>
		
	</head>
	<body>
		<button type="button" onclick="changeCss()">切換div樣式</button>
		性別：<input type="radio" value="0" name="gender" checked="checked"/>女
			<input type="radio" value="1" name="gender"/>男
		<img src="img/a.png" title="服不服" />
		<div>div1<button type="button">普通按鈕1</button></div>
		<div>div2<button type="button">普通按鈕2</button></div>
		<input name="userName" value="賈寶玉" />
		<input name="password" value="123456" />
	</body>
</html>

jQuery與js物件的轉換

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery與js物件的轉換</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				//獲取所有的div元素的集合
				var list=$("div");
				//遍歷集合
				for(var i=0;i<list.length;i++){
					//list[i] 是js物件，列印出來是HTMLxxxElement格式的物件都是js物件，
					//操作的時候都要遵循js物件的操作方法,例如獲取元素內容使用innerHTML屬性
					console.log(list[i]);
					//將js物件轉換為jQuery物件，可以使用所有jQuery方法，,例如獲取元素內容使用html()函式
					console.log($(list[i]));
				} 
			});
		</script>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
	</body>
</html>

jQuery中的事件

頁面對不同訪問者的回應叫做事件
事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法

常用DOM事件串列

滑鼠事件	鍵盤事件	事件	檔案/視窗事件
click	keydown	submit	load
dblclick	keyup	change
mouseover		focus
mouseout		blur
hover

常用的 jQuery 事件方法

在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			//頁面加載事件
			$(function(){
				//給所有的button系結單擊事件
				$("button").click(function(){
					//alert(this);//this是當前物件，哪個按鈕觸發的單擊事件this就是那個按鈕，this此時是JS物件
					$(this).css("color","red");//給當前的觸發物件添加一個css
				});				
				//給所有的超鏈接系結滑鼠移上事件
				$("a").mouseover(function(){
					var str=$(this).html();
					$(this).html("滑鼠移上-"+str);
				});
				//給所有的超鏈接系結滑鼠移出事件
				$("a").mouseout(function(){
					var str=$(this).html();
					$(this).html(str.substr(5));
				});
				$("a").hover(function(){
					$(this).css("color","red");
				});
			});
		</script>
	</head>
	<body>
		<a href="#">首頁</a> &nbsp;     
		<a href="#">零食</a> &nbsp;
		<a href="#">鮮花</a> &nbsp;
		<button type="button">普通按鈕1</button>
		<button type="button">普通按鈕2</button>
		<button type="button">普通按鈕3</button>
	</body>
</html>

jQuery操作DOM

元素的增加

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>檔案處理</title>
		<style>
			div{
				background: lavenderblush;
				padding: 20px;
			}
			p{
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				// append() - 在被選元素的結尾插入內容
				$("#btn1").click(function(){
					$("div").append("<br/>新添加的文本<br/>");
					$("div").append("<p>新添加的段落</p>");
				});
				//prepend() - 在被選元素的開頭插入內容
				$("#btn2").click(function(){
					$("div").prepend("<br/>新添加的文本<br/>");
					$("div").prepend("<p>新添加的段落</p>");
				});
				//after() - 在被選元素之后插入內容
				$("#btn3").click(function(){
					$("div").after("<br/>新添加的文本<br/>");
					$("div").after("<p>新添加的段落</p>");
				});
				//before() - 在被選元素之前插入內容
				$("#btn4").click(function(){
					$("div").before("<br/>新添加的文本<br/>");
					$("div").before("<p>新添加的段落</p>");
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">append</button>
		<button id="btn2">prepend</button>
		<button id="btn3">after</button>
		<button id="btn4">before</button>
		
		<div>
			div1
		</div>
		
	</body>
</html>

元素的克隆

clone(boolean)：克隆匹配的DOM元素并且選中這些克隆的副本

語法:$(selector).clone(includeEvents);

引數:可選，布林值，規定是否復制元素的所有事件處理，默認地，副本中不包含事件處理器，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>檔案處理</title>
		<style>
			div{
				background: lavenderblush;
				padding: 20px;
			}
			p{
				border:solid 1px red;
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				$("#btn3").click(function(){
					alert("試試就試試！");
				});
				// clone(true) 
				$("#btn1").click(function(){
					$("p").clone(true).appendTo("div");
				});
				//clone(false) 
				$("#btn2").click(function(){
					$("p").clone(false).appendTo("div");
				});
				
			});
		</script>
	</head>
	<body>
		<button id="btn1">克隆元素-true</button>
		<button id="btn2">克隆元素-false</button>
		<p>
			要被克隆的段落
			<button id="btn3" >點擊我試試</button>	
		</p>
		<div>
			div1			
		</div>
		
	</body>
</html>

元素的替換

replaceWith() -將所有匹配的元素替換成指定的HTML或DOM元素
replaceAll()-用匹配的元素替換掉所有 selector匹配到的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>檔案處理--元素替換</title>
		<style>
			div{
				background: lavenderblush;
				padding: 20px;
			}
			p{
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				//replaceWith() -將所有匹配的元素替換成指定的HTML或DOM元素，
				$("#btn1").click(function(){
					//$("div").replaceWith("<br/>新替換的文本<br/>");
					$("div").replaceWith("<p>新替換的段落</p>");//所有的div被后面的引數替換掉
				});
				//replaceAll()-用匹配的元素替換掉所有 selector匹配到的元素，
				$("#btn2").click(function(){
					$("<div>新的div</div>").replaceAll("p");//用前面的內容替換掉所有的段落p
				});
				
			});
		</script>
	</head>
	<body>
		<button id="btn1">replaceWith</button>
		<button id="btn2">replaceWithAll</button>
		
		<div>
			div1
		</div>
		<br />
		<div>
			div2
		</div>
		<p>p1</p>
		<p>p2</p>
	</body>
</html>

元素的洗掉

remove() - 洗掉被選元素(及其子元素)
empty() - 從被選元素中洗掉子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>檔案處理--元素洗掉</title>
		<style>
			div{
				background: lavenderblush;
				padding: 20px;
			}
			p{
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				//remove() - 洗掉被選元素（及其子元素）
				$("#btn1").click(function(){
					$("div").remove();//所有的div元素及其子元素被洗掉
				});
				//remove(篩選條件) - 洗掉符合篩選條件的元素
				$("#btn2").click(function(){
					$("div").remove(".test");//所有的div元素中參考了class="test"的div被洗掉
				});
				//empty() - 從被選元素中洗掉子元素 
				$("#btn3").click(function(){
					$("div").empty();//洗掉div中的所有子元素
				});
				
			});
		</script>
	</head>
	<body>
		<button id="btn1">remove()</button>
		<button id="btn2">remove(篩選條件)</button>
		<button id="btn3">empty()</button>
		<div>
			div1
			<p>div1中的段落1</p>
			<p>div1中的段落2</p>
			<span style="background: lightblue; padding: 10px;">div1中的span</span>
		</div>
		<br/>
		<div class="test">
			div2			
		</div>
		
		<p>p1</p>
		
	</body>
</html>

jQuery效果

隱藏和顯示

語法:
$(selector).hide([speed,callback]);
$(selector).show([speed,callback]);
$(selector).toggle([speed,callback]);

引數說明:

可選的 speed 引數規定隱藏/顯示的速度，可以取以下值:“slow”、“fast” 或毫秒，
可選的 callback 引數是隱藏或顯示完成后所執行的函式名稱，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>效果-隱藏和顯示</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<style>
			div{
				background: lightblue;
				padding: 20px;
			}
			p{
				background: lavenderblush;
				padding: 20px;
			}
		</style>
		<script>
			$(function(){
				$("#btnHide").click(function(){
					//$("div").hide();
					//$("div").hide(2000);
					$("div").hide(2000,function(){
						alert("隱藏完成！");
					});
				});
				
				$("#btnShow").click(function(){
					//$("div").show();
					//$("div").show(2000);
					$("div").show(2000,function(){
						alert("顯示完成！");
					});
				});
				
				$("#btnToggle").click(function(){
					//$("p").toggle();
					//$("p").toggle(2000);
					$("p").toggle(2000,function(){
						alert("切換完成！");
					});
				});
			});
		</script>
	</head>
	<body>
		<button id="btnHide">隱藏-div</button>
		<button id="btnShow">顯示-div</button>
		<button id="btnToggle">切換顯示和隱藏-p</button>
		
		<div>div1</div>
		<br/>
		<div>div2</div>
		<p style="display: none;">p1</p>
		<p>p2</p>
	</body>
</html>

淡入和淡出

語法:
$(selector).fadeIn([speed,callback]);
$(selector).fadeOut([speed,callback]);
$(selector).fadeToggle([speed,callback]);