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