1. jQuery概述

1.1 JavaScript 庫

即 library，是一個封裝好的特定的集合（方法和函式），從封裝一大堆函式的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函式在里面，比如影片animate、hide、show、獲取元素等，
簡單理解： 就是一個JS 檔案，里面對原生JS代碼進行了封裝，存放到里面，這樣可以快速高效使用這些封裝好的功能了，
jQuery，就是為了快速方便操作DOM，里面基本都是函式（方法），

1.2 jQuery 的概念

jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼， 做更多的事情，
j就是 JavaScript；Query 查詢；意思就是查詢js，把js中的DOM操作做了封裝，可以快速查詢使用里面的功能，

jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM 操作、事件處理、影片設計和 Ajax 互動，
學習jQuery本質：學習呼叫這些函式（方法），

2. jQuery的基本使用

2.1 jQuery 的入口函式

$(function () {
	...  // 此處是頁面DOM加載完成的入口
});

$(document).ready(function(){    
	...  //  此處是頁面DOM加載完成的入口
});

1. 等著 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝，
2. 相當于原生 js 中的DOMContentLoaded，
3. 檔案加載完畢，圖片不加載的時候就可以執行這個函式，
4. 更推薦使用第一種方式，

2.2 jQuery 的頂級物件 $

1. $是jQuery的別稱，在代碼中可以使用jQuery代替$，但一般為了方便，通常都直接使用$，

2. $是jQuery的頂級物件， 相當于原生JavaScript中的window，把元素利用$包裝成jQuery物件，就可以呼叫jQuery的方法，

2.3 jQuery 物件和 DOM 物件

相互轉化：

1. DOM 物件轉換為 jQuery 物件： $(DOM物件)

$('div')

2. jQuery 物件轉換為 DOM 物件（兩種方式）

$('div')[index]        // index 是索引號

$('div').get(index)    // index 是索引號

3. jQuery 選擇器

3.1 基礎選擇器

$(“選擇器”)   //  里面選擇器直接寫 CSS 選擇器即可，但是要加引號

3.2 層級選擇器

jQuery 設定樣式：

$('div').css('屬性', '值')

3.3 隱式迭代（重要）

遍歷內部 DOM 元素（偽陣列形式存盤）的程序就叫做隱式迭代，
簡單理解：給匹配到的所有元素進行回圈遍歷，執行相應的方法，而不用我們再進行回圈，簡化我們的操作，方便我們呼叫，

3.4 篩選選擇器

3.5 jQuery 篩選方法（重點）

3.6 jQuery 里面的排他思想

想要多選一的效果，排他思想：當前元素設定樣式，其余的兄弟元素清除樣式，

當前元素設定樣式，其余的兄弟元素清除樣式，

$(this).css('color','red');
$(this).siblings(). css('color',");

3.7 鏈式編程

$(this).css('color', 'red').siblings().css('color', ");

4. jQuery 樣式操作

4.1 操作 css 方法

（1）引數只寫屬性名，則是回傳屬性值

$(this).css('color');

（2）引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號

$(this).css('color', 'red');

（3）引數可以是物件形式，方便設定多組樣式，屬性名和屬性值用冒號隔開， 屬性可以不用加引號

$(this).css({"color"："white","font-size"："20px"});

4.2 設定類樣式方法

原生 JS 中 className 會覆寫元素原先里面的類名，
jQuery 里面類操作只是對指定類進行操作，不影響原先的類名，

（1）添加類

$("div").addClass("current");

（2）移除類

$("div").removeClass("current");

（3）切換類

$("div").toggleClass("current");

5. jQuery 效果

5.1 顯示隱藏效果

（1）顯示

show([speed,[easing],[fn]]);

1. 引數都可以省略， 無影片直接顯示，
2. speed：三種預定速度之一的字串(slow,normal, or fast)或表示影片時長的毫秒數值(如：1000)，
3. easing：(Optional) 用來指定切換效果，默認是swing，可用引數linear，
4. fn：回呼函式，在影片完成時執行的函式，每個元素執行一次，

（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);

1. over：滑鼠移到元素上要觸發的函式（相當于mouseenter）
2. out：滑鼠移出元素要觸發的函式（相當于mouseleave）
3. 如果只寫一個函式，則滑鼠經過和離開都會觸發它

5.4 影片佇列及其停止排隊方法

（1）影片或效果佇列

影片或者效果一旦觸發就會執行，如果多次觸發，就造成多個影片或者效果排隊執行，

（2）停止排隊

stop();        // 寫到影片或者效果的前面，相當于停止結束上一次的影片

例如：

$(".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）漸進方式調整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]]);          // opacity 透明度必須寫，取值 0~1 之間

5.6 自定義影片 animate

animate(params,[speed],[easing],[fn]);

params： 想要更改的樣式屬性，以物件形式傳遞，必須寫， 屬性名可以不用帶引號， 如果是復合屬性則需要采取駝峰命名法 borderLeft，

例如：

$("button").click(function() {
    $("div").animate({
        left： 500,
        top： 300,
        opacity： .4,
        width： 500,
    }, 500);
});

6. jQuery 屬性操作

6.1 固有屬性值 prop()

（1）獲取屬性

prop("屬性");

（2）設定屬性

prop("屬性", "屬性值");

6.2 自定義屬性值 attr()

用戶自己給元素添加的屬性，我們稱為自定義屬性， 比如給 div 添加index =“1”

（1）獲取屬性

attr("屬性");      // 類似原生 getAttribute()

（2）設定屬性

attr("屬性", "屬性值");   // 類似原生 setAttribute()

該方法也可以獲取 H5 自定義屬性

6.3 資料快取 data()

data()方法可以在指定的元素上存取資料，并不會修改 DOM 元素結構，一旦頁面重繪，之前存放的資料都將被移除，

（1）附加資料

data("name","value");   // 向被選元素附加資料

（2）獲取資料

date("name");             //   向被選元素獲取資料

還可以讀取 H5 自定義屬性data-index，得到的是數字型

7. jQuery 內容文本值

7.1 普通元素內容 html()

相當于原生innerHTML

html();             // 獲取元素的內容

html("內容")      // 設定元素的內容

7.2 普通元素文本內容 text()

相當與原生innerText

text();                     // 獲取元素的文本內容

text("文本內容");        // 設定元素的文本內容

7.3 表單的值 val()

相當于原生value

val();              // 獲取表單的值

val("內容")      // 設定表單的值

8. jQuery 元素操作

8.1 遍歷元素

jQuery 隱式迭代是對同一類元素做了同樣的操作， 如果想要給同一類元素做不同操作，就需要用到遍歷，

$.each(object, function (index, element) { xxx; });

1. $.each()方法可用于遍歷任何物件，主要用于資料處理，比如陣列，物件
2. 里面的函式有2個引數：index是每個元素的索引號；element遍歷內容

8.2 創建元素

$("<li></li>");

8.3 添加元素

（1）內部添加

element.append("內容");              // 把內容放入匹配元素內部最后面

element.prepend("內容");             // 把內容放入匹配元素內部最前面

（2）外部添加

element.after("內容");               // 把內容放入目標元素外部后面 

element.before("內容");              // 把內容放入目標元素外部前面  

8.4 洗掉元素

element.remove();                  //  洗掉匹配的元素（本身）

element.empty();                   //  洗掉匹配的元素集合中所有的子節點

element.html("");                  //  清空匹配的元素內容 

1. remove洗掉元素本身，
2. empt()和html("")作用等價，都可以洗掉元素里面的內容，只不過html("")還可以設定內容，

9. jQuery 尺寸、位置操作

7.1 jQuery 尺寸

7.2 jQuery 位置

（1）offset()設定或獲取元素偏移

1. offset()方法設定或回傳被選元素相對于檔案的偏移坐標，跟父級沒有關系，
2. 該方法有2個屬性 left、top ，offset().top用于獲取距離檔案頂部的距離，offset().left用于獲取距離檔案左側的距離，
3. 可以設定元素的偏移：offset({ top： 10, left： 30 });

（2）position()獲取元素偏移

1. position()方法用于回傳被選元素相對于帶有定位的父級偏移坐標，如果父級都沒有定位，則以檔案為準，
2. 該方法有2個屬性 left、top，position().top用于獲取距離定位父級頂部的距離，position().left用于獲取距離定位父級左側的距離，
3. 該方法只能獲取，

（3）scrollTop() / scrollLeft()設定或獲取元素被卷去的頭部和左側

1. scrollTop()方法設定或回傳被選元素被卷去的頭部，
2. 不跟引數是獲取，引數為不帶單位的數字則是設定被卷去的頭部，

10. jQuery 事件

10.1 jQuery 事件注冊

單個事件注冊

element.事件(function(){});

$("div").click(function(){});

10.2 jQuery 事件處理

（1）事件處理on()系結事件

on()方法在匹配元素上系結一個或多個事件的事件處理函式

element.on(events,[selector],fn);

1. events：一個或多個用空格分隔的事件型別，如click或keydown，
2. selector：元素的子元素選擇器，
3. 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()的區別：

1. trigger會導致瀏覽器同名的默認行為的執行，如：trigger('submit');不但會執行submit()函式的效果，也會執行表單提交的效果；而triggerHandler就不會導致默認行為的執行
2. triggerHandler只會觸發JQ物件集合中第一個元素的事件處理函式，也不會產生事件冒泡，而trigger不同
3. 這個方法的回傳時事件處理函式的回傳值，而不是具有可鏈性的JQ物件，此外，如果最開始的JQ物件集合為空，則回傳undefined

10.3 jQuery 事件物件

事件被觸發，就會有事件物件的產生

element.on(events, [selector], function(event) {});

阻止默認行為：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

11. jQuery 拷貝物件

$.extend([deep], target, object1, [objectN]);

1. deep：如果設為true為深拷貝，默認為false淺拷貝
2. target： 要拷貝的目標物件
3. object1：待拷貝到第1個物件的物件，
4. objectN：待拷貝到第N個物件的物件，
5. 淺拷貝目標物件參考的被拷貝的物件地址，修改目標物件會影響被拷貝物件，
6. 深拷貝，前面加true， 完全克隆，修改目標物件不會影響被拷貝物件，

12. jQuery 多庫共存

問題概述：
jQuery 使用\(作為標示符，隨著 jQuery 的流行,其他 js 庫也會用這\)作為識別符號， 這樣一起使用會引起沖突，

客觀需求：
需要一個解決方案，讓jQuery 和其他的js庫不存在沖突，可以同時存在，這就叫做多庫共存，

jQuery 解決方案：

1. 把里面的 $ 符號 統一改為jQuery， 比如jQuery("div")

2. jQuery 變數規定新的名稱：$.noConflict()

   var xx = $.noConflict();
   

標籤：其他

上一篇：JS正則：密碼強度8位以上，且包含大小寫字母、數字、半角英文符號

下一篇：[HTML] 推薦一個免備案國外虛擬空間購買支持HTML和PHP