JQ (jQuery)

一、jQuery概述
1、什么是jQuery
	javaScript Query: JS的框架
	jQuery：是一門輕量的、免費開源的JS函數庫(JS文件)
	jQuery可以極大地簡化JS代碼
	jQuery核心思想: 寫的更少,但做的更多

	輕量的：一個框架或者技術對我們項目的侵入程度是非常低的（反過來說，我們的項目或代碼對該技術的依賴程度是非常低的）

2、jQuery優勢
	1)可以極大地簡化JS代碼
	2)可以像CSS選擇器一樣獲取元素
	3)可以通過修改CSS樣式來控制頁面的效果
		div.style.width = "100px";
		div.style.height = "100px";
		div.style.backgroundColor = "red";
	4)可以兼容常用瀏覽器(谷歌/火狐/蘋果/歐朋)
	
3、如何引入jQuery
	在head或body標簽內部添加script標簽,通過script標簽引入jQuery的函數庫文件
	<!-- 引入jQuery的函數庫文件 -->
	<script src="js/jquery-1.8.3.min.js"></script>
	
	在引入jQuery函數庫文件時，如果文件引入路徑錯誤，則會導致文件引入失敗
	Uncaught ReferenceError: $ is not defined
	上面的錯誤說明jQuery引入失敗了!
	
4、文檔就緒事件函數
	文檔就緒事件函數: 該函數會在瀏覽器加載完所有的html元素后立即執行
	1、JS提供的文檔就緒函數:
	window.onload = function(){
		//這里的代碼會在瀏覽器加載完所有的html元素后立即執行
	}

	2、jQuery提供的文檔就緒函數:
	簡寫形式:
	$(function(){
		//這里的代碼會在瀏覽器加載完所有的html元素后立即執行
	})
	
	完整寫法:
	$(document).ready(function(){
		//這里的代碼會在瀏覽器加載完所有的html元素后立即執行
	});

	3、什么時候該使用文檔就緒事件函數?
	如果要獲取元素,獲取元素的代碼執行時,元素還沒有被瀏覽器加載,肯定是獲取不到的!
	此時,可以將獲取元素的代碼放在文檔就緒事件函數中,因為這個函數是在瀏覽器加載完所有的html元素后立即執行,此時所有元素都已經被加載了,在這個函數中獲取任何元素都可以獲取到!
	
	只要獲取元素的代碼是在元素加載后執行,就可以獲取(不管使用什么方式!)
	
二、jQuery選擇器
1、基本選擇器
	1)元素名選擇器
		$("div") -- 匹配所有的div元素
		$("span") -- 匹配所有的span元素
	2)class選擇器
		$(".mini") -- 匹配所有class值為mini的元素
		$("span.mini") -- 匹配所有class值為mini的span元素
	3)ID選擇器
		$("#one") -- 匹配id值為one的元素
	4)多元素選擇器
		$("div,span,.mini,#one") -- 匹配所有的div,所有的span,以及所有class為mini,以及id值為one的元素
	
2、層級選擇器
1)后代選擇器
	$("div span") -- 匹配所有div內部的span元素
	$("#box1 input") -- 匹配id值為box1元素內部的所有input元素

2)相鄰兄弟選擇器
	相鄰兄弟:如果兩個元素是緊挨着,並且具有相同的父元素,這兩個元素就是相鄰兄弟
	可以通過相鄰兄弟選擇器選中后面緊鄰的兄弟元素
	$("#two+span") -- 匹配id值為two的元素后面緊鄰的span兄弟元素
	$("#two").next("span") -- 匹配id值為two的元素后面緊鄰的span兄弟元素
	$("#two").prev("span") -- 匹配id值為two的元素前面緊鄰的span兄弟元素
	-----------------------
	<span>000</span>
	<div id="#two"></div>
	<span>111</span>
	-----------------------
	$("#two").nextAll() -- 匹配id為two的元素后面所有的兄弟元素
	$("#two").nextAll("div") -- 匹配id為two的元素后面所有的div兄弟元素
	$("#two").prevAll("div") -- 匹配id為two的元素前面所有的div兄弟元素
	$("#two").siblings("div") -- 匹配id為two的元素前、后所有的div兄弟元素
3、基本過濾選擇器
	根據下標匹配元素:
	$("div").eq(n) -- 表示匹配所有div中的第n+1個div元素
	$("div:eq(n)") -- 表示匹配所有div中的第n+1個div元素
	
	$("div:first") -- 匹配所有div中的第一個div元素
	$("div:eq(0)") -- 匹配所有div中的第一個div元素
	
	$("div:last") -- 匹配所有div中的最后一個div元素
	$("div:eq(-1)") -- 匹配所有div中的最后一個div元素

4、表單選擇器
	$(":input") -- 匹配所有的表單項元素(包括input、select、textarea、button)
	$(":text") -- 匹配所有普通文本輸入框
	$(":password") -- 匹配所有密碼輸入框
	$(":radio") -- 匹配所有單選框
	$(":checkbox") -- 匹配所有復選框

	$(":radio:checked") -- 匹配所有被選中的單選框
	$(":checkbox:checked") -- 匹配所有被選中的復選框
	
5、補充:
	1、JS為b1按鈕綁定點擊事件
	document.getElementById("b1").onclick = function(){
		alert("b1按鈕被點擊了...");
	}

三、jQuery案例
	1、創建表格案例
	2、仿QQ好友分組
	3、模擬員工信息管理系統

	調錯步驟:
	1)按f12,看瀏覽器的控制台(Console)窗口中有沒有錯誤提示
		如果有,根據錯誤信息進行排查!
	2)也可以在程序中添加 debugger 斷點!

四、jQuery總結
	
0.each函數
	each函數: 對前面選擇所選中的元素進行遍歷,每次從中獲取一個元素,並調用其中的function
	each中的function函數:每次each函數從選擇器中獲取元素后都會調用該函數,
		可以接收兩個參數: 第一個參數是當前遍歷的元素的下標;
					第二個參數是當前正在遍歷的元素(JS對象);
	示例:
	$("table tr").each(function(i,ele){
		//...
	})

1、html元素操作
	(1)創建html元素
		$("<div></div>") -- 創建一個div元素,返回一個jQuery對象
		$("<div>這是一個div元素</div>") -- 創建一個包含內容的div元素,返回一個jQuery對象
		$("<input type='text'/>") -- 創建文本輸入框,返回一個jQuery對象
	
	(2)添加子元素 -- append()
		$("body").append("<table><tr><td>這是一個td元素</td></tr></table>");
		-- 往body中添加一個表格元素
		
		var $div = $("<div>這是一個div元素</div>");
		$("body").append( $div ) -- 往body中添加一個div元素
		
	(3)刪除元素 -- remove()
		$("div").remove() -- 刪除所有匹配的div元素
	
	(4)替換元素 -- replaceWith()
		$("div").replaceWith("<p>我是來替換div的p元素!!</p>")
		
		
2、html內容 及 值的操作
	<div>div111</div>
	<input type="text"/>
	<select>...</select>
	
	html()函數 -- 獲取元素的所有內容(包裹在開始標簽和結束標簽中的所有內容)
		如果通過選擇器匹配了多個元素,只能獲取第一個元素的內容
		html()函還可以設置元素的內容,如果通過選擇器匹配了多個元素,則會給所有元素設置內容
		-- 在js中對應的是innerHTML屬性
		
	text()函數 -- 獲取元素中的所有文本內容(值獲取文本,不獲取標簽)
		如果通過選擇器匹配了多個元素,可以將所有元素內部的文本都返回
		text()函數還可以為元素的設置文本內容(只能設置文本)
		-- 在js中對應的是innerText屬性(這個屬性在部分瀏覽器中不兼容)
	
	val()函數 -- 獲取表單項元素的value值 或者是 為表單項元素設置value值
		表單項元素: input/select/option/textarea

	
3、html元素屬性 或者 css屬性操作
	prop()函數 -- 獲取元素的某一個屬性值,或者為元素設置屬性值
	attr()函數 -- 可以獲取元素的屬性值,或者為元素設置屬性值
	prop()和attr()的區別:
	(1) prop函數是在jquery1.6版本之后才出現,用於獲取或設置元素的屬性(固有屬性)值,
			比如: input元素的id,class,name,type等屬性都是固有屬性
			比如: 為input指定一個aaa屬性,這個叫做自定義屬性
		attr函數是在jquery1.6版本之前就有的函數,用於獲取或設置元素的屬性(自定義屬性)值
		
	css()函數 -- 可以獲取或設置元素的css樣式
	
4、動畫函數
	show() -- 設置元素為顯示狀態, 等價於 css("display", "block|inline");
	hide() -- 設置元素為隱藏狀態, 等價於 css("display", "none");
	toggle() -- 切換元素的顯示狀態, 如果元素本身是顯示的,則會變成隱藏狀態,如果元素本身是隱藏的,則會變成顯示狀態
	
	slideToggle() -- 切換元素的顯示狀態, 如果元素本身是顯示的,則會變成隱藏狀態,如果元素本身是隱藏的,則會變成顯示狀態

5、parent()/parents()/find()
	parent() -- 獲取當前元素的父元素, 類似於js中的 parentNode屬性
	parents() -- 獲取當前元素的所有的祖先元素
		$(":checked").parent().parent();
		$(":checked").parents("tr")
	
	find() -- 獲取當前元素內部指定的后代元素
	$("div").find("span") -- 獲取所有div元素內部的span元素
	$("div span") -- 獲取所有div元素內部的span元素