Web | jQuery學習筆記
jQuery 是一個 JavaScript 函數庫，將 JS 的一些功能實現封裝成了函數，極大地簡化了 JavaScript 編程。
jQuery是 John Resig 於2006年創建的一個開源項目，jQuery集成了 JavaScript、CSS、 DOM 和 Ajax 於一體的強大功能。它可以用最少的代碼， 完成更多復雜而困難的功能。
1. 引入jQuery
1.1 jQuery版本
jQuery版本：
- jQuery-1.x.x：兼容IE6/7/8低級瀏覽器。
- jQuery-2.x.x：不兼容IE6/7/8。
- jQuery-3.x.x：全面支持HTML5和CSS3。
jQuery版本分類：
- Development version：[jquery.js] 開發版，未壓縮，用於測試和開發。
- Production version：[jquery.min.js] 精簡版，已被壓縮。
1.2 引入jQuery
<head>
<script type="text/javascript" src="js//jquery-1.12.4.js"></script>
</head>2. jQuery入門
2.1 jQuery對象與DOM對象
jQuery簡化了JS編程，多數JS功能實現都被封裝成了函數，而調用這些jQuery函數必須使用jQuery對象。
jQuery對象本質是一個DOM對象數組。
// DOM對象轉jQuery對象 var $jQueryObj = $(DOMObj); // jQuery對象轉DOM對象 var DOMObj = $jQueryObj[0]; var DOMObj = $jQueryObj.get(0);
jQuery對象命名一般以$為前綴
2.2 jQuery入口函數
第一種寫法：
$(document).ready(function(){
jQuery代碼
});第二種寫法：
$(function(){
jQuery代碼
});jQuery入口函數與JS入口函數的區別：
①jQuery的入口函數只等待DOM樹加載完即執行；
②JS入口函數需要等待所有資源加載完成再執行；
2.3 jQuery基礎語法
$("選擇器").操作函數()$()：即jQuery()，本質是一個函數。
3. jQuery選擇器
jQuery選擇器：獲取元素
3.1 元素選擇器
| 元素選擇器 | 描述 |
|---|---|
* |
通配符選擇器 |
#id |
id選擇器 |
.class |
類選擇器 |
element |
元素選擇器 |
s1s2 |
交集選擇器 |
s1,s2 |
並集選擇器 |
s1 s2 |
後代選擇器 |
s1 > s2 |
子元素選擇器 |
3.2 屬性選擇器
| 屬性選擇器 | 描述 |
|---|---|
[attr] |
屬性選擇器 |
[attr=value] |
屬性=值的元素 |
[attr!=value] |
屬性!=值的元素 |
[attr$=value] |
屬性值以value結尾的元素 |
3.3 過濾選擇器
| 位置 | 描述 |
|---|---|
:first |
第一個元素 |
:last |
第二個元素 |
:odd |
所有奇數元素 |
:even |
所有偶數元素 |
| 索引位置 | 描述 |
|---|---|
:eq(index) |
指定索引的元素 （index從0開始） |
:gt(num) |
所有索引>num的元素 |
:lt(num) |
所有索引<num的元素 |
| 標簽類型 | 描述 |
|---|---|
:header |
所有標題元素 |
:animated |
所有動畫元素 |
| 元素狀態 | 描述 |
|---|---|
:contains(text) |
包含指定文本的元素 |
:empty |
無子節點的元素 |
:hidden |
所有隱藏的元素 |
:visible |
所有可見的元素 |
3.4 表單選擇器
| 表單元素 | 描述 |
|---|---|
:input |
所有<input>元素 |
:text |
所有type="text"的 <input> 元素 |
:password |
所有type="password"的<input>元素 |
:radio |
所有type="radio"的<input>元素 |
:checkbox |
所有type="checkbox"的<input>元素 |
:submit |
所有type="submit"的<input>元素 |
:reset |
所有type="reset"的<input>元素 |
:button |
所有type="button"的<input>元素 |
:image |
所有type="image"的<input>元素 |
:file |
所有type="file"的<input>元素 |
:enable |
所有激活的<input>元素 |
:disabled |
所有禁用的<input>元素 |
:selected |
所有被選取的<input>元素 |
:checked |
所有被選中的<input>元素 |
4. jQueryDOM★
4.1 DOM 操作★
4.1.1 DOM HTML內容
1.text()：設置/獲取所選元素的文本內容
$("selector").text(); // 獲取文本內容
$("selector").text("文本內容"); // 設置文本內容2.html()：設置/獲取所選元素的內容
$("selector").html(); // 獲取HTML內容
$("selector").html("HTML代碼"); //設置 HTML內容3.val()：設置/獲取表單字段的值
$("selector").val(); // 獲取表單字段的值
$("selector").val("表單字段值"); // 設置表單字段的值4.1.2 DOM HTML屬性
1.attr()：HTML屬性，只能返回string的結果
$("selector").attr("屬性名"); // 獲取HTML屬性
$("selector").attr("屬性名", "值"); // 設置HTML屬性
$("selector").attr({"屬性名":"值", "屬性名":"值"}); // 設置多個HTML屬性2.prop()：DOM屬性，如selected，disabled，checked等屬性。
$("selector").prop("屬性名"); // 獲取屬性
$("selector").prop("屬性名", "值"); // 設置屬性
$("selector").prop({"屬性名":"值", "屬性名":"值"}); // 設置多個屬性4.1.3 DOM 插入元素
1.append()：在被選元素的結尾追加內容
$("selector").append("插入內容");2.prepend()：在被選元素的開頭插入內容
$("selector").prepend("插入內容");3.before()：在被選元素之前插入內容
$("selector").before("插入內容");4.after()：在被選元素之後插入內容
$("selector").after("插入內容");4.1.4 DOM 刪除元素
1.remove()：刪除被選元素及其子元素
$("selector").remove();2.empty()：刪除被選元素的所有子元素
$("selector").empty();4.1.5 DOM CSS類
1.addClass()：向被選元素添加一個或多個樣式類
$("selector").addClass("類名");2.removeClass()：從被選元素移除一個或多個類
$("selector").removeClass("類名");3.toggleClass()：對被選元素進行類切換（本質是類的添加/刪除）
$("selector").toggleClass("類名");4.hasClass()：判斷被選元素是否存在類
$("selector").hasClass("類名");4.1.6 DOM CSS屬性
1.css()：設置或返回樣式屬性
$("selector").css("樣式屬性"); // 獲取樣式屬性值
$("selector").css("樣式屬性","值"); // 設置樣式屬性
$("selector").css({"樣式屬性":"值","樣式屬性":"值",...}); // 設置多個樣式屬性4.1.7 DOM 元素尺寸
1.width()：設置或返回元素的寬度（不包括內邊距、邊框、外邊距）
$("selector").width();2.height()：設置或返回元素的高度（不包括內邊距、邊框、外邊距）
$("selector").height();3.innerWidth()：返回元素的寬度（包括內邊距）
$("selector").innerWidth(); 4.innerHeight()：返回元素的高度（包括內邊距）
$("selector").innerHeight();5.outerWidth()：返回元素的寬度（包括內邊距、邊框）
$("selector").outerWidth();6.outerHeight()：返回元素的高度（包括內邊距、邊框）
$("selector").outerHeight();7.outerWidth(true)：返回元素的寬度（包括內邊距、邊框和外邊距）
$("selector").outerWidth(true);8.outerHeight(true)：返回元素的高度（包括內邊距、邊框和外邊距）
$("selector").outerHeight(true);4.1.8 DOM 位置
1.scrollTop()：滾動條頂部偏移量
$("selector").scrollTop();2.scrollLeft()：滾動條左邊偏移量
$("selector").scrollLeft();4.2 DOM 遍歷★
4.2.1 向上遍歷-祖先
1.parent()：返回被選元素的直接父元素
$("selector").parent("篩選選擇器"); // 直接父元素，可篩選2.parents()：返回被選元素的所有祖先元素，向上遍歷直到根<html>
$("selector").parents("篩選選擇器"); // 所有祖先元素，可篩選3.parentsUntil()：返回介於兩個給定元素之間的所有祖先元素
$("selector1").parentsUntil("selector2"); 4.2.2 向下遍歷-後代
1.children()：返回被選元素的所有直接子元素
$("selector").children("篩選選擇器"); // 返回直接子元素，可篩選2.find()：返回被選元素的所有後代元素
$("selector").find("篩選選擇器"); // 返回後代元素，可篩選4.2.3 水平遍歷-兄弟
1.siblings()：返回被選元素的所有兄弟元素
$("selector").siblings("篩選選擇器"); // 返回所有兄弟元素，可篩選2.next()：返回被選元素的下一個兄弟元素
$("selector").next("篩選選擇器"); // 返回下一個兄弟元素，可篩選3.nextAll()：返回被選元素之後的兄弟元素
$("selector").nextAll("篩選選擇器"); // 返回元素之後的兄弟元素，可篩選4.nextUntil()：返回介於兩個給定元素之間的所有兄弟元素
$("selector1").nextUntil("selector2"); // 從selector1水平向後遍歷直到selector25.prev()：返回被選元素的上一個兄弟元素
$("selector").prev("篩選選擇器"); // 返回上一個兄弟元素，可篩選6.prevAll()：返回被選元素之前的同胞元素
$("selector").prevAll("篩選選擇器"); // 返回元素之前的兄弟元素，可篩選7.prevUntil()：返回介於兩個給定元素之間的所有同胞元素
$("selector1").prevUntil("selector2"); // 從selector1水平向前遍歷直到selector24.2.3 元素篩選
1.eq()：返回被選元素中帶有指定索引的元素
$("selector").eq(index); // 返回指定索引的元素2.filter()：返回匹配篩選標準的元素
$("selector").filter("篩選選擇器"); // 返回匹配篩選選擇器的元素3.not()：返回不匹配篩選標準的元素
$("selector").not("篩選選擇器"); // 返回不匹配篩選選擇器的元素4.first()：獲取第一個元素
$("selector").first();5.last()：獲取最後一個元素
$("selector").last();5. jQuery效果
5.1 隱藏/顯示
1.show()：顯示
$("selector").show(speed,callback);2.hide()：隱藏
$("selector").hide(speed,callback);3.toggle()：切換hide()/show()
$("selector").toggle(speed,callback)speed：速度(ms)，[可選參數]
callback：當前動畫 100% 完成之後執行的函數，[可選參數]
5.2 淡入/淡出-fade
1.fadeIn()：淡入已隱藏的元素
$("selector").fadeIn(speed,callback);2.fadeOut()：淡出已顯示的元素
$("selector").fadeIn(speed,callback);3.fadeToggle()：切換fadeIn()和fadeOut()
$("selector").fadeToggle(speed,callback);4.fadeTo()：允許漸變為給定的不透明度
$("selector").fadeTo(speed,opacity,callback);speed：速度(ms)，[可選參數]
opacity：不透明度(0~1)，[可選參數]
callback：當前動畫 100% 完成之後執行的函數，[可選參數]
5.3 滑動-slide
1.slideDown()：向下滑動元素
$("selector").slideDown(speed,callback);2.slideUp()：向上滑動元素
$("selector").slideUp(speed,callback);3.slideToggle()：切換slideDown()和slideUp()
$("selector").slideToggle(speed,callback);5.4 自定義動畫-animate
animate()：自定義動畫
$("selector").animate({params},speed,callback);params：定義形成動畫的CSS屬性，[必要參數]
speed：速度(ms)，[可選參數]
callback：當前動畫 100% 完成之後執行的函數，[可選參數]
5.5 停止效果-stop
stop()：在動畫或效果完成前對它們進行停止
$("selector").stop(stopAll,goToEnd);stopAll：是否清除動畫隊列；默認false-僅停止活動的動畫，允許隊列中後面的動畫執行。
goToEnd：是否立即完成當前動畫 ；默認false。
6. jQuery事件機制
6.1 事件類型
| 事件句柄 | 描述 |
|---|---|
| ready | DOM載入 |
| click | 鼠標單擊 |
| focus | 元素獲得焦點 |
| blur | 元素失去焦點 |
| mouseover | 鼠標覆蓋 |
| mouseout | 鼠標移開 |
| mouseup | 鼠標點擊 |
| mousedown | 鼠標松開 |
| scroll | 窗口滾動 |
| change | 發生改變 |
| unload | 退出頁面 |
| submit | 點擊提交 |
| keydown | 某個鍵盤的鍵被按下 |
| keypress | 某個鍵盤的鍵被按下或按住 |
| keyup | 某個鍵盤的鍵被松開 |
6.2 事件綁定方式
1.簡單事件綁定：
$("selector").事件(handler);一次只能綁定一個事件
2.bind()：事件綁定
$("selector").bind("events"[,data],handler);bind()不支持動態綁定。
3.delegate()：事件委托
$("selector").delegate("childSelector","events"[,data],handler);通過委托父元素可以動態為當前或未來子元素綁定事件；
4.on()：統一事件綁定方式，推薦使用
$("selector").on("events"[,"childSelector"][,data],handler)events：事件，多個事件以空格分隔
childSelector：後代元素，[可選]
data：傳遞給handler的數據，事件觸發後通過event.data調用，[可選]
handler：事件處理函數
6.3 事件移除方式
1.unbind()：移除被選元素的事件
$("selector").unbind("events",handler);2.undelegate()：移除由delegate()添加的事件
$("selector").undelegate("selector","events",handler); events：規定需要刪除處理函數的一個或多個事件類型 ，[可選]
selector：規定需要刪除事件的選擇器 ，[可選]
handler：規定要刪除的具體事件處理函數 ，[可選]
3.off()：解除事件綁定，推薦使用
$("selector").off("events"[,"selector"][,handler],map);events：規定需要刪除處理函數的一個或多個事件類型 ，[可選]
selector：規定需要刪除事件的選擇器 ，[可選]
handler：規定要刪除的具體事件處理函數 ，[可選]
map：規定事件映射 ({event:function, event:function, ...}) ，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。
7. jQuery雜項（難點）
7.1 鏈式編程
鏈式編程：使用一個jQuery對象不斷地調用(點調用)函數。栗子如下：
$("div").addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();非篩選函數：函數返回當前jQuery對象，jQuery對象不發生改變，如addClass()，hide()...
篩選函數：函數返回新的jQuery對象，如find()，parent()...
鏈式編程原理：jQuery的非篩選函數都返回其本身
return thisend()：結束當前鏈條中的最近的篩選操作，並將匹配元素集還原為之前的狀態
jQueryObj.end()鏈式編程本質★：
jQuery對象(即包裝後的DOM對象)
①調用篩選/遍歷函數後返回新的jQuery對象，將新的jQuery對象壓入棧內；
②調用非篩選/遍歷函數後返回本身(return this)。
③調用end()將棧頂元素 (當前jQuery對象) 彈出棧，指向新的棧頂元素 (最近上一次的jQuery對象)。
7.2 隱式叠代
隱式叠代：jQuery對象本質是DOM對象數組，即$("selector")返回一個對象數組。jQuery會自動對匹配到的DOM數組進行循環遍歷，執行所調用的函數。
設置操作：隱式叠代，循環遍歷DOM對象數組執行設置函數。
獲取操作：大部分情況下返回第一個元素的值。
7.3 each方法
each()：為每個匹配元素規定運行的函數
$("selector").each(function(index,element));function()：為每個匹配元素規定運行的函數，[必要參數]
index：選擇器的index位置
element：當前的元素
7.4 多庫共存
jQuery使用$標識符作為jQuery的簡寫符號 ，如果頁面上同時存在其他JS庫正在使用相同的簡寫符號$怎麽辦呢？
noConflict()：釋放$標識符的控制
var a = $.noConflict(); // 釋放$的控制權，將$的能力賦予a。Web | jQuery學習筆記