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 交互。
學(xué)習(xí)jQuery本質(zhì)：學(xué)習(xí)調(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();
```

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区