jQuery學習筆記

時間 2019-11-07

標籤 jquery 學習筆記欄目 JQuery 简体版

原文原文鏈接

jQuery學習筆記

jQuery大部分功能須要根據文檔的DOM模型來工做，首先須要正確地解析到整個文檔的DOM模型結構。使用jQuery須要在整個文檔被瀏覽器徹底加載後纔開始進行。css

$(document).ready(function () {
    alert("Hello World!");
    $("p").click(function (event) {
        alert("Thanks for visiting!");
    })
});

$是在jQuery中使用的變量名，可使用jQuery.noConflict()避免衝突，它的返回值就是jQuery對象。html

jQuery.noConflict();
$j = jQuery.noConflict();

jQuery對象與DOM對象之間的轉換node

使用$()獲得的是一個jQuery對象。它封裝了不少 DOM 對象的操做，可是它和 DOM 對象之間是不一樣的。只有當obj是一個DOM對象時才能使用obj.innerHTML；相應地，若是是jQuery對象應該使用 obj.html() 。git

從 DOM 對象轉到 jQuery 對象： $(obj)
從 jQuery 對象轉到 DOM 對象： obj[0]

比較正規地從 jQuery 對象到 DOM 的轉換，是使用 jQuery 對象的 get() 方法：github

$(function () {
    $("li").get();
    $("li").get(0);
    $("li").get(-1);
});

jQuery選擇器

1. 常規選擇器ajax

$("*") 選擇全部節點
$("#id") ID選擇器，注意其中的一些特殊字符，如.
$(".class") 類選擇器
$("tag") 標籤選擇器
$("子元素")
$("直接子元素")
:focus 獲取焦點元素
:first-child/:last-child 選擇第一個/最後一個元素
:first/:last 截取第一個/最後一個符合條件的元素
("pre+next") 直接兄弟元素
("pre~siblings") 兄弟元素
:nth-child() 索引選擇，索引從1開始json
- :nth-child(odd)
- :nth-child(even)
- :nth-child(4n)

2. 屬性選擇器瀏覽器

[name~="value"] 屬性中包括某單詞
[name="value"] 屬性徹底等於指定值
[name!="value"] 屬性不等於指定值
[name] 包括有指定屬性的元素

3. 控件選擇器緩存

:checked 選擇全部被選中的元素
:selected 被選擇的元素
:disabled/:enabled 選擇被禁用/未禁用的元素
:hidden 隱藏元素，不只是[type="hidden"]，還有displa:none
:visible 可見控件，visibility:hidden和opacity:0一樣被認爲是可見
:input :button :checkbox :file :image :password :radio :reset :submit :text 具體控件，圖像控件是[type="image"]

4. 其餘選擇器服務器

[name="value"] [name2="value2"] 多個AND條件
("selector1, selector2, selectorN") 多個OR條件
:not() 否認選擇
(':contains("text")') 包含有指定內容的元素
:eq() :lt() :gt() :even :odd 列表索引選擇（不支持負數）
(':has(selector)') 符合條件的再次過濾
:header 選擇h1,h2,h3...標題元素
:only-child 僅有一個子元素的元素
:empty 空元素，即無內容也無元素
:parent 非空元素

節點漫遊

1. 調用鏈處理

.add() 向已有的節點序列中添加新的對象
.andSelf() 在調用鏈中，隨時加入原始序列
.eq() 指定索引選取節點，支持負數
.filter() .is() .not() .find() .first() .last() .has() 序列選擇
.end() 節點回溯

$(function () {
    $('ul.first').find('.foo').css('background-color', 'red')
        .end().find('.bar').css('background-color', 'green');
});

2. 子節點

.children() 全部的子節點，可加入過濾條件，.children(selector)

3. 兄弟節點

.siblings() .next() .nextAll() .nextUntil() .prevAll() .prevUntil() .closet() 選擇兄弟節點

4. 父節點

.parent() .parents() .parentUntil() 父節點選擇

元素控制

1. attributes和properties的區別

attributes 是XML結構中的屬性節點
- <div onload="prettyPrint()"></div>
properties 是DOM對象，對象屬性
- $('body').get(0).tagName;

2. 類與屬性控制

.addCLass() .hasClass() .removeClass() 添加一個類，判斷是否有指定類，刪除類

$('body').addClass('test');
$('body').addClass(function (index, current) {
    return current + 'new';
});
$('body').removeClass('test');
$('body').removeClass(function (index, current) {
    return current + ' ' + 'other';
});

.toggleClass() 類的開關式轉換

$('img').toggleClass(); //對全部類的開關
$('img').toggleClass('test'); //對指定類的開關
$('img').toggleClass(isTrue); //根據`isTrue`判斷全部類的開關
$('img').toggleClass('test', isTrue); //根據`isTrue`判斷指定類的開關

//同 `$('img').toggleClass('test');` 只是類名由函數返回
$('img').toggleClass(function (index, className, isTrue) {
    return 'name'
});

// `isTrue`做爲函數的第三個參數傳入
$('img').toggleClass(function (index, className, isTrue) {
    return 'name'
}, isTrue);

.attr() 獲取或設置一個屬性值

// $("#greatphoto").attr('alt'); //獲取屬性`
$("#greatphoto").attr('alt', 'Shenzhen Brush Seller'); //設置屬性`

// 同時設置多個屬性
$('#greatphoto').attr({
    alt: 'Shen Brush Seller',
    title: 'photo by Kelly Clark'
});

//設置屬性爲函數返回值，函數的上下文爲當前元素
$('#greatphoto').attr('title', function (i, val) {
    return val + ' - photo by Kelly Clark';
})

.prop() 用法同.attr()，只是對象變成了properties
.removeAttr() .removeProp() 刪除屬性
.val() 設置或獲取元素的表單值，一般用於表單元素

$('input').val();
$('input').val('other');

.html() 設置或獲取元素的節點html

$('div').html();
$('div').html('<div>測試</div>');
$('div').html(function (index, old) {
    return old + '<span>另外的內容</span>';
});

3. 樣式控制

.css() 獲取或設置指定的CSS樣式

$('body').css('background-color', 'red');
$('body').css('background-color', function (index, value) {
    return value + '1';
});
$('body').css({color: 'green', 'background-color': 'red'});

.width() .height() 獲取或設置元素的寬和高

$('body').width();
$('body').width(50);
$('body').width(function (index, value) {
    return value += 10;
})

.innerWidth() .innerHeight() .outerHeight() .outerWidth() 元素的其餘尺寸值
.scrollLefgt() .scrollTop() 獲取或設置滾動條的位置
.offset() .position() 獲取元素的座標
- offset是相對於document，position是相對於父級元素

結構控制

1. 文本節點

.html() .text() 設置和獲取節點的文本值。設置時.text()會轉義標籤，獲取時.text()會移除全部標籤。

2. 子節點

.append() .prepend()

$('.inner').append('<p>Test</p>');

參數能夠有多種形式：

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');

$('body').append($newdiv1, [newdiv2, existingdiv1]);

3. 兄弟節點

.after() .before()

$('.inner').after('<p>Test</p>');

4. 父節點

.wrap() .wrap() .wrapInner()

$('.inner').wrap('<div class="new"></div>');
$('.inner').wrapAll('<div class="new"></div>');
$('.inner').wrapInner('<div class="new"></div>');

5. 複製/刪除/替換節點

.clone() 複製節點，可選參數表示是否處理已綁定的事件與數據
- .clone(true) 處理當前節點的事件與數據
- .clone(true, true) 處理當前節點及全部子節點的事件與數據
.detach() 暫時移除節點，以後能夠再次恢復指定位置
.remove() 永久移除節點
.empty() 清除一個節點的全部內部內容
.unwrap() 移除節點的父節點

工具函數

.map() 遍歷全部成員

$(':checkbox').map(function () {
    return this.id;
}).get().join(',');

$(':checkbox').map(function (index, node) {
    return node.id;
}).get().join(',');

.slice() 序列切片，支持一個或兩個參數，支持負數

$('li').slice(2).css('background-color', 'red');
$('li').slice(2, 4).css('background-color', 'green');
$('li').slice(-2, -1).css('background-color', 'blue');

通用工具

$.each() $.map() 遍歷列表，$.map()能夠用於對象

$.each([52, 97], function (index, value) {
    console.log((index + ' : ' + value));
});
$.map([0, 1, 2], function (index, n) {
    return n + 4;
});
$.map([0, 1, 2], function (n) {
    return n > 0 ? n + 1 : null;
});
$.map([0, 1, 2], function (n) {
    return [n, n + 1];
});

var dimensions = {width: 10, height: 15, length: 20};
$.map(dimensions, function (value, key) {
    return value * 2;
});

var dimensions = {width: 10, height: 15, length: 20};
$.map(dimensions, function (value, key) {
    return key;
});

$.extend() 合併對象，第一個參數表示是否進行遞歸深刻

var object = $.extend({}, object1, object2);
var object = $.extend(true, {}, object1, object2);

$.merge() 合併列表

$.merge([0, 1, 2], [2, 3, 4]);

.grep() 過濾列表，第三個參數表示是否爲取反

$.grep([0, 1, 2], function (array, index) {
    return n > 0;
});//[1,2]
$.grep([0, 1, 2], function (array, index) {
    return n > 0;
}, true);//[0]

$.inArray() 存在判斷

$.inArray(value, array [, fromIndex])

$.isArray() $.isEmptyObject() $.isFunction() $.iSNumeric() $.isPainObject() $.isWindow $.isXMLDoc() 類型判斷
$.noop() 空函數
$.now() 當前時間戳，值爲(new Date).getTime()
$.parseJson() $.parseXML() 把字符串解析爲對象

var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc),
    $title = $xml.find("title");

$.trim() 去頭去尾 $.trim(str)
$.type() 判斷參數的類型
$.unique() 遍歷後去重。$.unique(arraty)

上下文綁定

$.proxy() 爲函數綁定上下文
- $.proxy(function,context)
- $.proxy(context,name)

var o = {
    x: '123',
    f: function () {
        console.log(this.x)
    },
};
var go = function (f) {
    f()
};

o.f();// 123
go(o.f);// undefined
go($.proxy(o.f, o));//123
$.proxy(o, 'f')(); //123

當一個函數被傳遞以後，它就失去了原先的上下文。

把數據存到節點中

jQuery提供了一種機制，能夠把節點做爲數據存儲的容器。

$.data() 往節點中獲取/設置數據
$.removeData() 刪除數據

在內部實現上，jQuery會在指定節點添加一個內部標識，以此爲key，把數據存在內部閉包的一個結構中。

事實上，jQuery的事件綁定機制也使用了這套數據接口。

$.data($('#data').get(0), 'test', '123');
$('#data').data('test', '456');

事件處理

1. 事件綁定

在 jQuery1.7以後，推薦統一使用on()來進行事件綁定。

.on() 綁定事件 on()的基本使用方式是：.on(event,handler)
.off() 移除事件
.one() 綁定單次事件

$('#btn').on('click', function (eventObj) {
    console.log('Hello');
})

對於handler，它默認的上下文是觸發事件的節點：

$('#btn').on('click', function (eventObj) {
    console.log(this);
})

使用$.proxy()能夠隨意控制上下文：

$('#btn').on('click',
    $.proxy(function (eventObj) {
        console.log(this.a);
    }, {a: 123})); // 123

event參數還支持經過：

- 以`.`分割的子名字
- 以空格分割的多個事件

$('#btn').on('click.my', (function (eventObj) {
            console.log('123');
        }
    )
);
var f = function () {
    $('#btn').off('click.my')
};

多個事件：

$('#btn').on('click.my click.other',
    (function (eventObj) {
            console.log('123');
        }
    )
);
var f = function () {
    $('#btn').off('click.my')
}

on()的另外一種調用形式：

$('#btn').on({
    'click': function (eventObj) {
        console.log('click');
    },
    'mousemove': function (eventObj) {
        console.log('move');
    }
});

off()的使用方式與on()徹底相似：

var f = function (eventObj) {
    console.log('Hello');
};
$('#btn').on('click', f);
$('#btn').off('click');

2. 事件觸發

事件的觸發有兩種方式，一是使用預約的「事件函數」（.click()，.focus()），二是使用trigger()或triggerHandler()。

$('#btn').on('click', function (eventObj) {
    console.log("hello");
});
$('#btn').click();
$('#btn').trigger('click');

trigger()與triggerHandler()不一樣之處在於前面是觸發事件，然後者是執行綁定函數。

$('#btn').on('focus', function (event) {
    console.log("Hello");
});
$('#btn').triggerHandler('focus');

trigger()和triggerHandler()也用於觸發自定義事件。

$('#btn').on('my', function (event) {
    console.log("Hello");
});
$('#btn').triggerHandler('my');

trigger()和triggerHandler()觸發事件時，能夠帶上參數：

$('#btn').on('my', function (event) {
    console.log(obj);
});
$('#btn').trigger('my', {a: 123});

3. 事件類型

行爲事件：

.click() 單擊
.dbclick() 雙擊
.blur() 失去焦點時
.change() 值變化時
.focus() 獲取焦點時
.focusin() jQuery擴展的獲取焦點
.focusout() jQuery擴展的失去焦點
.resize() 調整大小
.scroll() 滾動
.select() 被選擇
.submit() 表單被提交

鍵盤事件：

.keydown() 按下鍵
.keyup() 放開鍵

鼠標事件：

.mousedown() 點下鼠標
.mouseup() 鬆開鼠標
.mouseover() 光標移入
.mouseout() 光標移出
.mousemove() 光標在其上移動
.mouseleave() .mouseenter() 光標移出/移入

頁面事件：

.ready() 準備就緒
.unload() 離開當前頁時，針對window對象
.error() 發生錯誤時
.load() 正在載入

4. 事件對象

event.currentTarget,event,target 事件綁定節點/事件的觸發節點（冒泡行爲）
event.delegateTarget 綁定事件的對象，一般就是event.currentTarget
event.relatedTarget 相關的節點，主要用於一些轉換式的事件。好比鼠標移入，表示它從哪一個節點來的
event.which 標明哪一個按鈕觸發了事件，鼠標和鍵盤的鍵標識統一在這個屬性中
event.preventDefault() event.isDefaultPrevented() 禁止默認行爲
event.stopImmediateProgation() event.isImmediateProgationStopped() 不只禁止冒泡。還終止綁定函數鏈的繼續進行
event.stopPropagation()，event.isPropagationStopped() 禁止冒泡
event.pageX，event.pageY 事件觸發時相對於document的鼠標位置
event.namespace 事件觸發時的名字空間，好比trigger('click.namespace')
event.data 額外傳入的數據
event.result 上一個綁定函數的返回值
event.timeStamp 事件觸發時的時間，其值爲(new Date).getTime()
event.type 事件類型

若是一個綁定函數最後返回了false，則默認是event.preventDefault()和event.stopPropagation()行爲。

AJAX

1. 請求與回調

jQuery的AJAX，核心的請求處理函數只有一個，就是$.ajax()，而後就是一個簡單的上層函數。

$.ajax() 的基本使用形式是：

jQuey.ajax(settings) settings是一個對象，裏面包含了全部的配置項。

url 請求的地址。
type 請求的方法類型，GET，POST。默認是GET。
data 要發送的數據
dataType 服務器返回的數據類型，支持xml，html，script，json，jsonp，text
success 請求成功時調用的處理函數 success(data, textStatus, jqXHR)
context 回調函數執行時的上下文
cache 默認爲true，是否爲請求單獨添加一個隨機參數以防止瀏覽器緩存
error 請求錯誤時的調用函數。
- error(jqXHR, textStatus, errorThrown)
- 第二個參數是表示請求狀態的字符串：timeout，error，abort，parsererror
- 第三個參數是當HTTP錯誤發生時，具體的錯誤描述：Not Found，Internal Server Error等
complete 請求結束（不管成功或失敗）時的一個回調函數。
- complete(jqXHR, textStatus)
- 第二個參數時表示請求狀態的字符串：success，notmodified，error，timeout，abort，parsererror。
jsonp 一個參數名，默認是callback，通常用於指明回調函數名。設置成false可讓請求沒有callback參數。
jsonpCallback callback參數值。默認是自動生成的一個隨機值。

2. 請求的狀態

對於全局的全部AJAX請求而言，能夠在任意節點上綁定到全局任意AJAX請求的每個事件：

$('#loading').ajaxStart(function () {
    $(this).show();
});

.ajaxStart() 請求將要發出時
.ajaxSend() 請求將要發出時（在.ajaxStart()後）
.ajaxSuccess() 請求成功
.ajaxError() 請求錯誤
.ajaxComplete() 請求完成
.ajaxStop() 請求結束（在.ajaxComplete()後）

3. 工具函數

.serialize() 解析表單參數項，返回字符串

$('form').submit(function () {
    alert($(this).serialize());
    return false;
});

.serializeArray() 解析表單參數項，返回一個列表對象。

$('form').submit(function () {
    alert($(this).serializeArray());
    return false;
});

泛化回調

1. Deferred

Deferred對象是在jQuery1.5中引入的回調管理對象。其做用是把一堆函數按順序放入一個調用鏈，而後根據狀態來依次調用這些函數。AJAX的全部操做都是使用它來進行封裝的。

var obj = $.Deferred(function (a) {

});
obj.done(function () {
    console.log("1");
});
obj.done(function () {
    console.log("2");
});
obj.resolve();

總的來講：jQuery的Deferred對象有三個狀態：done，fail，process。

- `process` 只能先於其餘兩個狀態先被激發。
- `done`和`fail`互斥，只能激發一個。
- `process`能夠被重複激發，而`done`和`fail`只能激發一次。

而後，jQuery提供了一些函數用於添加回調，激發狀態等。

deferred.done() 添加一個或多個成功回調
deferred.fail() 添加一個或多個失敗回調
deferred.always() 添加一個函數，同時應用於成功和失敗
deferred.progress() 添加一個函數用於準備回調
deferred.then() 依次接受三個函數，分別用於成功，失敗，準備狀態
deferred.reject() 激發失敗狀態
deferred.resolve() 激發成功狀態
deferred.notify() 激發準備狀態

若是一個Deferred已經被激發，則新添加的對應的函數會被當即執行。

jQuery還提供了一個jQuery.when()的回調管理函數，能夠用於方便地管理多個事件併發的狀況。

var defer = $.ajax({
    url: 'test.html',
    dataType: 'json'
});
defer.done(function (data) {
    console.log(data);
});

done()作的事和使用success()定義是同樣的。

當咱們須要完成，像「請求A和請求B都完成時，執行函數」之類的需求時，使用$.when()就能夠了。

var defer_1 = $.ajax({
    url: 'json.html',
    dataType: 'json'
});
var defer_2 = $.ajax({
    url: 'jsonp.html',
    dataType: 'jsonp'
});
var new_defer = $.when(defer_1, defer_2);
new_defer.done(function () {
    console.log("hello");
});

在$.when()中的Deferred，只要有一個是fail，則總體結果爲fail。

Deferred的回調函數的執行順序與它們的添加順序一致。

這裏特別注意一點，就是done/fail/always與then的返回值的區別。從功能上看，它們均可以添加回調函數，可是，方法的返回值是不一樣的。前組的返回值是原來的那個defer對象，而then返回的是一個新的defer對象。

then返回新的defer這種形式，能夠用於方便地實現異步函數的鏈式調用。

defer.done(function () {
    return $.ajax({
        url: '/json',
        dataType: 'json',
        success: function () {
            console.log("inner");
        }
    })
}).done(function () {
    console.log("hello");
});

等同因而調用了兩次 defer.done , defer.done ，註冊的兩次回調函數依次被執行後，看到的輸出是：hello，inner。

這是兩次 defer.done 的結果，第一個回調函數返回了一個新的 defer 沒任何做用。

若是換成 then 方法：defer.then(function () {...});

它跟兩次 defer.done 是不一樣的。 new_defer 會在 inner 那裏的 defer 被觸發時再被觸發，因此輸出結果是：inner，hello。

更通常地來講 then 的行爲，就是前面的註冊函數的返回值，會做爲後面註冊函數的參數值：

var defer = $.ajax({
    url: '/json',
    dataType: 'json'
});
defer.then(function (res) {
    console.log(res);
    return 1;
}).then(function (res) {
    console.log(res);
    return 2;
}).then(function (res) {
    console.log(res);
});

上面代碼的輸入結果是：ajax response，1，2。

2. Callbacks

事實上，Deferred機制，只是在Callbacks機制的上層進行了一層簡單封裝。Callbacks對象纔是真正的jQuery中定義的原始的回調管理機制。

var obj = $.Callbacks();
obj.add(function () {
    console.log("1");
});
obj.add(function () {
    console.log("2");
});
obj.fire();

Callbacks對象的初始化支持一組控制參數：

$.Callbacks(flags) 初始化一個回調管理對象。flags是空格分割的多個字符串，以定義此回調對象的行爲：
- once 回調鏈只能被激發一次
- memory 回調鏈被激發後，新添加的函數被當即執行
- unique 相同的回調函數只能被添加一次
- stopOnFalse 當有回調函數返回false時終止調用鏈的執行