1. jQuery概述
1.1 JavaScript 庫
即 library，是一個封裝好的特定的集合（方法和函數(shù)）。從封裝一大堆函數(shù)的角度理解庫，就是在這個庫中，封裝了很多預(yù)先定義好的函數(shù)在里面，比如動畫animate、hide、show、獲取元素等。
簡單理解： 就是一個JS 文件，里面對原生JS代碼進行了封裝，存放到里面。這樣可以快速高效使用這些封裝好的功能了。
jQuery，就是為了快速方便操作DOM，里面基本都是函數(shù)（方法）。
1.2 jQuery 的概念
jQuery 是一個快速、簡潔的 JavaScript 庫，其設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼， 做更多的事情。
j就是 JavaScript；Query 查詢；意思就是查詢js，把js中的DOM操作做了封裝，可以快速查詢使用里面的功能。
jQuery 封裝了 JavaScript 常用的功能代碼，優(yōu)化了 DOM 操作、事件處理、動畫設(shè)計和 Ajax 交互。
學習jQuery本質(zhì)：學習調(diào)用這些函數(shù)（方法）。
2. jQuery的基本使用
2.1 jQuery 的入口函數(shù)
$(function () {
... // 此處是頁面DOM加載完成的入口
});
$(document).ready(function(){
... // 此處是頁面DOM加載完成的入口
});
- 等著 DOM 結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
- 相當于原生 js 中的
DOMContentLoaded。
- 文檔加載完畢，圖片不加載的時候就可以執(zhí)行這個函數(shù)。
- 更推薦使用第一種方式。
2.2 jQuery 的頂級對象 $
-
$是jQuery的別稱，在代碼中可以使用jQuery代替$，但一般為了方便，通常都直接使用$。
-
$是jQuery的頂級對象， 相當于原生JavaScript中的window。把元素利用$包裝成jQuery對象，就可以調(diào)用jQuery的方法。
2.3 jQuery 對象和 DOM 對象
相互轉(zhuǎn)化：
- DOM 對象轉(zhuǎn)換為 jQuery 對象： $(DOM對象)
$('div')
- jQuery 對象轉(zhuǎn)換為 DOM 對象（兩種方式）
$('div')[index] // index 是索引號
$('div').get(index) // index 是索引號
3. jQuery 選擇器
3.1 基礎(chǔ)選擇器
$(“選擇器”) // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號
3.2 層級選擇器
jQuery 設(shè)置樣式：
$('div').css('屬性', '值')
3.3 隱式迭代（重要）
遍歷內(nèi)部 DOM 元素（偽數(shù)組形式存儲）的過程就叫做隱式迭代。
簡單理解：給匹配到的所有元素進行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不用我們再進行循環(huán)，簡化我們的操作，方便我們調(diào)用。
3.4 篩選選擇器
3.5 jQuery 篩選方法（重點）
3.6 jQuery 里面的排他思想
想要多選一的效果，排他思想：當前元素設(shè)置樣式，其余的兄弟元素清除樣式。
當前元素設(shè)置樣式，其余的兄弟元素清除樣式。
$(this).css('color','red');
$(this).siblings(). css('color',");
3.7 鏈式編程
$(this).css('color', 'red').siblings().css('color', ");
4. jQuery 樣式操作
4.1 操作 css 方法
（1）參數(shù)只寫屬性名，則是返回屬性值
$(this).css('color');
（2）參數(shù)是屬性名，屬性值，逗號分隔，是設(shè)置一組樣式，屬性必須加引號，值如果是數(shù)字可以不用跟單位和引號
$(this).css('color', 'red');
（3）參數(shù)可以是對象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號隔開， 屬性可以不用加引號
$(this).css({"color"："white","font-size"："20px"});
4.2 設(shè)置類樣式方法
原生 JS 中 className 會覆蓋元素原先里面的類名。
jQuery 里面類操作只是對指定類進行操作，不影響原先的類名。
（1）添加類
$("div").addClass("current");
（2）移除類
$("div").removeClass("current");
（3）切換類
$("div").toggleClass("current");
5. jQuery 效果
5.1 顯示隱藏效果
（1）顯示
show([speed,[easing],[fn]]);
- 參數(shù)都可以省略， 無動畫直接顯示。
speed：三種預(yù)定速度之一的字符串(slow,normal, or fast)或表示動畫時長的毫秒數(shù)值(如：1000)。easing：(Optional) 用來指定切換效果，默認是swing，可用參數(shù)linear。fn：回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。
（2）隱藏
hide([speed,[easing],[fn]]);
（3）切換
toggle([speed,[easing],[fn]]);
5.2 滑動效果
（1）下滑
slideDown([speed,[easing],[fn]]);
（2）上滑
slideUp([speed,[easing],[fn]]);
（3）滑動切換
slideToggle([speed,[easing],[fn]]);
5.3 事件切換
hover([over,]out);
over：鼠標移到元素上要觸發(fā)的函數(shù)（相當于mouseenter）out：鼠標移出元素要觸發(fā)的函數(shù)（相當于mouseleave）- 如果只寫一個函數(shù)，則鼠標經(jīng)過和離開都會觸發(fā)它
5.4 動畫隊列及其停止排隊方法
（1）動畫或效果隊列
動畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)，就造成多個動畫或者效果排隊執(zhí)行。
（2）停止排隊
stop(); // 寫到動畫或者效果的前面，相當于停止結(jié)束上一次的動畫
例如：
$(".nav>li").hover(function() {
// stop 方法必須寫到動畫的前面
$(this).children("ul").stop().slideToggle();
});
5.5 淡入淡出效果
（1）淡入
fadeIn([speed,[easing],[fn]]);
（2）淡出
fadeOut([speed,[easing],[fn]]);
（3）淡入淡出切換
fadeToggle([speed,[easing],[fn]]);
（4）漸進方式調(diào)整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]]); // opacity 透明度必須寫，取值 0~1 之間
5.6 自定義動畫 animate
animate(params,[speed],[easing],[fn]);
params： 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名可以不用帶引號， 如果是復(fù)合屬性則需要采取駝峰命名法 borderLeft。
例如：
$("button").click(function() {
$("div").animate({
left： 500,
top： 300,
opacity： .4,
width： 500,
}, 500);
});
6. jQuery 屬性操作
6.1 固有屬性值 prop()
（1）獲取屬性
prop("屬性");
（2）設(shè)置屬性
prop("屬性", "屬性值");
6.2 自定義屬性值 attr()
用戶自己給元素添加的屬性，我們稱為自定義屬性。 比如給 div 添加index =“1”
（1）獲取屬性
attr("屬性"); // 類似原生 getAttribute()
（2）設(shè)置屬性
attr("屬性", "屬性值"); // 類似原生 setAttribute()
該方法也可以獲取 H5 自定義屬性
6.3 數(shù)據(jù)緩存 data()
data()方法可以在指定的元素上存取數(shù)據(jù)，并不會修改 DOM 元素結(jié)構(gòu)。一旦頁面刷新，之前存放的數(shù)據(jù)都將被移除。
（1）附加數(shù)據(jù)
data("name","value"); // 向被選元素附加數(shù)據(jù)
（2）獲取數(shù)據(jù)
date("name"); // 向被選元素獲取數(shù)據(jù)
還可以讀取 H5 自定義屬性data-index，得到的是數(shù)字型
7. jQuery 內(nèi)容文本值
7.1 普通元素內(nèi)容 html()
相當于原生innerHTML
html(); // 獲取元素的內(nèi)容
html("內(nèi)容") // 設(shè)置元素的內(nèi)容
7.2 普通元素文本內(nèi)容 text()
相當與原生innerText
text(); // 獲取元素的文本內(nèi)容
text("文本內(nèi)容"); // 設(shè)置元素的文本內(nèi)容
7.3 表單的值 val()
相當于原生value
val(); // 獲取表單的值
val("內(nèi)容") // 設(shè)置表單的值
8. jQuery 元素操作
8.1 遍歷元素
jQuery 隱式迭代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到遍歷。
$.each(object, function (index, element) { xxx; });
$.each()方法可用于遍歷任何對象。主要用于數(shù)據(jù)處理，比如數(shù)組，對象- 里面的函數(shù)有2個參數(shù)：
index是每個元素的索引號；element遍歷內(nèi)容
8.2 創(chuàng)建元素
$("<li></li>");
8.3 添加元素
（1）內(nèi)部添加
element.append("內(nèi)容"); // 把內(nèi)容放入匹配元素內(nèi)部最后面
element.prepend("內(nèi)容"); // 把內(nèi)容放入匹配元素內(nèi)部最前面
（2）外部添加
element.after("內(nèi)容"); // 把內(nèi)容放入目標元素外部后面
element.before("內(nèi)容"); // 把內(nèi)容放入目標元素外部前面
8.4 刪除元素
element.remove(); // 刪除匹配的元素（本身）
element.empty(); // 刪除匹配的元素集合中所有的子節(jié)點
element.html(""); // 清空匹配的元素內(nèi)容
remove刪除元素本身。empt()和html("")作用等價，都可以刪除元素里面的內(nèi)容，只不過html("")還可以設(shè)置內(nèi)容。
9. jQuery 尺寸、位置操作
7.1 jQuery 尺寸
7.2 jQuery 位置
（1）offset()設(shè)置或獲取元素偏移
offset()方法設(shè)置或返回被選元素相對于文檔的偏移坐標，跟父級沒有關(guān)系。- 該方法有2個屬性 left、top 。
offset().top用于獲取距離文檔頂部的距離，offset().left用于獲取距離文檔左側(cè)的距離。
- 可以設(shè)置元素的偏移：
offset({ top： 10, left： 30 });
（2）position()獲取元素偏移
position()方法用于返回被選元素相對于帶有定位的父級偏移坐標，如果父級都沒有定位，則以文檔為準。- 該方法有2個屬性 left、top。
position().top用于獲取距離定位父級頂部的距離，position().left用于獲取距離定位父級左側(cè)的距離。
- 該方法只能獲取。
（3）scrollTop() / scrollLeft()設(shè)置或獲取元素被卷去的頭部和左側(cè)
scrollTop()方法設(shè)置或返回被選元素被卷去的頭部。- 不跟參數(shù)是獲取，參數(shù)為不帶單位的數(shù)字則是設(shè)置被卷去的頭部。
10. jQuery 事件
10.1 jQuery 事件注冊
單個事件注冊
element.事件(function(){});
$("div").click(function(){});
10.2 jQuery 事件處理
（1）事件處理on()綁定事件
on()方法在匹配元素上綁定一個或多個事件的事件處理函數(shù)
element.on(events,[selector],fn);
events：一個或多個用空格分隔的事件類型，如click或keydown。selector：元素的子元素選擇器。fn：回調(diào)函數(shù) 即綁定在元素身上的偵聽函數(shù)。
// 可以綁定多個事件，多個處理事件處理程序
$("div").on({
mouseover： function() {},
mouseout： function() {},
click： function() {}
});
// 如果事件處理程序相同
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("current");
});
// 可以事件委派操作。事件委派的定義就是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素
$('ul').on('click', 'li', function() {
alert('hello world!');
});
// 動態(tài)創(chuàng)建的元素，click()沒有辦法綁定事件，on()可以給動態(tài)生成的元素綁定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后來創(chuàng)建的</li>");
$("ol").append(li);
（2）事件處理off()解綁事件
$("p").off(); // 解綁p元素所有事件處理程序
$("p").off("click"); // 解綁p元素上面的點擊事件
$("ul").off("click", "li"); // 解綁事件委托
如果有的事件只想觸發(fā)一次， 可以使用one()來綁定事件。
（3）自動觸發(fā)事件trigger()
element.click(); // 第一種簡寫形式
element.trigger("type"); // 第二種自動觸發(fā)模式
$("p").on("click", function() {
alert("hi~");
});
$("p").trigger("click"); // 此時自動觸發(fā)點擊事件，不需要鼠標點擊
element.triggerHandler(type); // 第三種自動觸發(fā)模式
trigger()和triggerHandler()的區(qū)別：
- trigger會導(dǎo)致瀏覽器同名的默認行為的執(zhí)行，如：trigger('submit');不但會執(zhí)行submit()函數(shù)的效果，也會執(zhí)行表單提交的效果；而triggerHandler就不會導(dǎo)致默認行為的執(zhí)行
- triggerHandler只會觸發(fā)JQ對象集合中第一個元素的事件處理函數(shù)，也不會產(chǎn)生事件冒泡。而trigger不同
- 這個方法的返回時事件處理函數(shù)的返回值，而不是具有可鏈性的JQ對象，此外，如果最開始的JQ對象集合為空，則返回undefined
10.3 jQuery 事件對象
事件被觸發(fā)，就會有事件對象的產(chǎn)生
element.on(events, [selector], function(event) {});
阻止默認行為：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()
11. jQuery 拷貝對象
$.extend([deep], target, object1, [objectN]);
deep：如果設(shè)為true為深拷貝，默認為false淺拷貝target： 要拷貝的目標對象object1：待拷貝到第1個對象的對象。objectN：待拷貝到第N個對象的對象。- 淺拷貝目標對象引用的被拷貝的對象地址，修改目標對象會影響被拷貝對象。
- 深拷貝，前面加
true， 完全克隆，修改目標對象不會影響被拷貝對象。
12. jQuery 多庫共存
問題概述：
jQuery 使用\(作為標示符，隨著 jQuery 的流行,其他 js 庫也會用這\)作為標識符， 這樣一起使用會引起沖突。
客觀需求：
需要一個解決方案，讓jQuery 和其他的js庫不存在沖突，可以同時存在，這就叫做多庫共存。
jQuery 解決方案：
-
把里面的 $ 符號 統(tǒng)一改為jQuery。 比如jQuery("div")
-
jQuery 變量規(guī)定新的名稱：$.noConflict()
var xx = $.noConflict();
|
