## JQuery 基礎：
快速入門
1. 步驟：
1. 下載JQuery
2. 導入JQuery的js文件：導入min.js文件
3. 使用
var div1 = ${"#div1"}; //相當於var div1 = document.getElementById("div1");
alert(div1.html()); //相當於alert(div1.innerHTML);
3. JQuery對象和JS對象區別與轉換
1. 區別：
1. 獲取方式不同
exp:
* JQuery對象：var div_j = $("div");
*JS對象：var div = document.getElementByTagName("div");
2. JQuery對象與JS對象方法不通用
exp:
* 改變div顯示的字符
JQuery對象：div_j.html("bbb");
JS對象: div[i].innerHTML = "ccc";
3. JQuery對象在操作時，更加方便
2. 轉換：
* jq --> js : jq對象[索引] 或者 jq對象.索引
* js --> jq : $(js對象)
4. 選擇器：篩選具有相似特徵的元素（標籤）
1. 基本語法學習
1. 事件綁定
//1.獲取b1按鈕
$("#b1").click(function(){
alert("abc");
});
2. 入口函數
$(function () {
});
window.onload 和 $(function) 區別
* window.onload 只能定義一次,如果定義多次，後邊的會將前邊的覆蓋掉
* $(function)可以定義多次的。
3. 樣式控制：css方法
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
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> -->若參數為a標籤--> <font>內容</font>
2. text(): 獲取/設置元素的標籤體純文本內容 <a><font>內容</font></a> -->若參數為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刪除掉。如果不存在，則添加。
4. css():
3. CRUD操作
1. append()：父元素將子元素追加到末尾
* 對象1.append(對象2): 將對象2添加到對象1元素的內部，並且在末尾
2. prepend()：父元素將子元素追加到開頭
* 對象1.prepend(對象2)：將對象2添加到對象1元素內部，並且在開頭
3. appendTo():
* 對象1.appendTo(對象2)：將對象1添加到對象2元素的內部，並且在末尾
4. prependTo():
* 對象1.prependTo(對象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)：將對象1添加到對象2後邊。對象1和對象2是兄弟關係
8. insertBefore()
* 對象1.insertBefore(對象2)：將對象1添加到對象2。對象1和對象2是兄弟關係
9. remove(): 移除元素
* 對象.remove: 將對象刪除掉
10. empty(): 清空元素的所有後代元素
* 對象.empty(): 將對象的後代元素全部清空，但是保留當前對象以及其屬性節點