JQuery基礎的簡單學習

JQuery 基礎:

1. 概念: 一個JavaScript框架. 簡化JS開發
	* jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。
	* jQuery設計的宗旨是“write Less，Do   More”，即倡導寫更少的代碼，做更多的事情。
	* 它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax  交互。

	* JavaScript框架:本質就是一些js文件,封裝了js的原生代碼而已
	
2. 快速入門
	1. 步驟:
		1. 下載JQuery
			* 目前jQuery有三個大版本：
				1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，
					 功能不再新增。因此一般項目來說，使用1.x版本就可以了，
					 最終版本：1.12.4 (2016年5月20日)
				2.x：不兼容ie678，很少有人使用，官方只做BUG維護，
					 功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，
					 最終版本：2.2.4 (2016年5月20日)
				3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，
					 一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。
					 目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）

			* jquery-xxx.js 與 jquery-xxx.min.js區別:
				1. jquery-xxx.js: 開發版本, 給程序員看的,有良好的縮進和註釋
				2. jquery-xxx.min.js: 生產版本. 程序中使用, 沒有縮進. 體積小一些.程序加載更快
				
		2. 導入JQuery的js文件: 導入min.js文件
		
		3. 使用
			var div1 = $("#div1");
    		alert(div1.html());


3. JQuery對象和JS對象區別與轉換
	1. JQuery對象在操作時更加方便.
    2. JQuery對象和js對象方法不通用的
    3. 兩者相互轉換
        * jq --> js : jq對象[索引] 或者 jq對象.get(索引)
        * js --> jq : $(js對象)
        

4. 選擇器: 篩選具有相似特性的元素(標籤)

	1. 基本語法學習:
		1. 事件綁定
		2. 入口函數()
		3. 樣式控制




	2. 分類
		1. 基礎選擇器
			1. 標籤選擇器(元素選擇器)
				* 語法: $("html標籤名") 獲取所有匹配標籤名稱的元素

			2. id選擇器
				* 語法: $("#id的屬性值") 獲取與指定id屬性值匹配的元素

			3. 類選擇器
				* 語法: $(".class的屬性值") 獲取與指定的class屬性值匹配的元素

			
			4. 並集選擇器
				* 語法: $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
		
		2. 層級選擇器
			1. 後代選擇器
				* 語法: $("A B")選擇A元素內部的所有B元素

			2. 子選擇器
				* 語法: $("A > B")選擇A元素內部的所有B子元素

		3. 屬性選擇器
			1. 屬性名稱選擇器
				* 語法: $("A[屬性名]") 包含指定屬性的選擇器

			2. 屬性選擇器
				* 語法: $("A[屬性名='值']") 包含指定屬性等於指定值的選擇器

			3. 複合屬性選擇器
				* 語法: $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器

		4. 過濾選擇器
			1. 首元素選擇器
				* 語法: :first 獲取選擇的元素中的第一個元素

			2. 尾元素選擇器
				* 語法: :last 獲取選擇的元素中的最後一個元素

			3. 非元素選擇器
				* 語法: :not(selector) 不包括指定內容的元素

			4. 偶數元素選擇器
				* 語法: :even 偶數, 從0開始計數

			5. 奇數元素選擇器
				* 語法: :odd 寄數, 從0開始計數

			6. 等於索引選擇器
				* 語法: :eq(index) 指定索引元素

			7. 大於索引選擇器
				* 語法: :gt(index) 大於指定索引元素

			8. 小於索引選擇器
				* 語法: :lt(index) 小於指定索引元素

			9. 標題選擇器
				* 語法: :header 獲取標題(h1~h6)元素, 固定寫法

	5. 表單過濾選擇器
		1. 可用元素選擇器
			* 語法: :enabled 獲取可用元素

		2. 不可用元素選擇器
			* 語法: :disabled 獲取不可用元素

		3. 選中選擇器
			* 語法: :checked 獲取單選/複選框選擇的元素

		4. 選中選擇器
			* 語法: :selected 獲取下拉框選中的元素


5. DOM操作
	1. 內容操作
		1. html(): 獲取/設置元素標籤體內容	 <a><font>內容</font></a>  --> <font>內容</font>
		2. text(): 獲取/設置元素標籤體純文本內容  <a><font>內容</font></a> --> 內容
		3. val(): 獲取/設置元素的value屬性值


	2. 屬性操作
		1. 通用屬性操作
			1. attr():			獲取/設置元素的屬性
			2. removeAttr(): 	刪除屬性
			3. prop():			獲取/設置元素的屬性
			4. removeProp(): 	刪除屬性
			
			* attr和prop區別?
				1. 如果操作的是元素的固有屬性, 則建議使用prop
				2. 如果操作的是元素自定義的屬性,則建議使用attr
		2. 對class屬性操作
			1. addClass():		添加class屬性值
			2. removeClass(): 	刪除class屬性值
			3. toggleClass():	切換class屬性值
				* toggleClass("one"): 判斷如果元素對象上存在class="one",則將屬性值one刪除.  如果元素對象上不存在class="one", 則添加
			4. css(): 

	3. CRUD操作
		1. append(): 父元素將子元素追加到末尾
			* 對象1.append(對象2): 將對象2添加到對象1元素內部,並且在末尾
		2. prepend(): 父元素將子元素追加到開頭
			* 對象1.prepend(對象2): 將對象2添加到對象1元素內部,並且在開頭
			
		3. appendTo(): 
			* 對象1.append(對象2): 將對象1添加到對象2內部,並且在末尾
		4. prependTo():
			* 對象1.prepend(對象2): 將對象1添加到對象2元素內部,並且在開頭

		5. after(): 添加元素到元素後邊
			* 對象1.after(對象2): 將對象2添加到對象1後邊. 對象1和對象2是兄弟關係
		6. before():
			* 對象1.before(對象2): 將對象2添加到對象1前邊. 對象1和對象2是兄弟關係

		7. insertAfter()
			* 對象1.insertAfter(對象2): 將對象2添加到對象1後邊. 對象1和對象2是兄弟關係
		8. inserBefore()
			* 對象1.before(對象2): 將對象2添加到對象1前邊. 對象1和對象2是兄弟是兄弟關係

		9. remove(): 移除元素
			* 對象.remove(): 將對象刪除掉

		10. empty(): 清空元素的所有後代元素
			* 對象.empty(): 將對象的後代元素全部清空,但是保留當前對象以及其屬性節點