JS框架 - JQuery基礎
阿新 • • 發佈:2020-07-14
本文內容
1. JQuery 基礎:
1. 概念
2. 快速入門
3. JQuery物件和JS物件區別與轉換
4. 選擇器
5. DOM操作
6. 案例
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. 事件繫結 //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> --> <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.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):將物件2新增到物件1後邊。物件1和物件2是兄弟關係 8. insertBefore() * 物件1.insertBefore(物件2): 將物件2新增到物件1前邊。物件1和物件2是兄弟關係 9. remove():移除元素 * 物件.remove():將物件刪除掉 10. empty():清空元素的所有後代元素。 * 物件.empty():將物件的後代元素全部清空,但是保留當前物件以及其屬性節點 6. 案例