1.jQuery原型對(duì)象解密

jQuery里面的大部分API都是在jQuery的原型對(duì)象上定義的。jQuery源碼中對(duì)原型對(duì)象做了簡(jiǎn)寫(xiě)的處理。也就是說(shuō)：jQuery.fn === jQuery.prototype,參考jQuery源碼：

...
jQuery.fn = jQuery.prototype = {

// The current version of jQuery being used
jquery: version,

constructor: jQuery,

// The default length of a jQuery object is 0
length: 0,

toArray: function() {
  return slice.call( this );
},
...

1.1 each函數(shù)

jQuery的包裝對(duì)象封裝了each(callback)方法，以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)。
意味著，每次執(zhí)行傳遞進(jìn)來(lái)的函數(shù)時(shí)，函數(shù)中的this關(guān)鍵字都指向一個(gè)不同的DOM元素（每次都是一個(gè)不同的匹配元素）。而且，在每次執(zhí)行函數(shù)時(shí)，都會(huì)給函數(shù)傳遞一個(gè)表示作為執(zhí)行環(huán)境的元素在匹配的元素集合中所處位置的數(shù)字值作為參數(shù)（從零開(kāi)始的整型）。 返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。返回 'true' 跳至下一個(gè)循環(huán)(就像在普通的循環(huán)中使用'continue')。

實(shí)例：

// 迭代兩個(gè)圖像，并設(shè)置它們的 src 屬性。注意:此處 this 指代的是 DOM 對(duì)象而非 jQuery 對(duì)象。
// HTML 代碼:
// <img/><img/>
$("img").each(function(i){
  this.src = "test" + i + ".jpg";
  // this 指向當(dāng)前的變量的dom對(duì)象。 i是當(dāng)前dom對(duì)象在選擇器返回?cái)?shù)組中的索引。
 });

1.2 獲取元素的個(gè)數(shù)

兩種方法可以獲取選擇器匹配的元素的個(gè)數(shù)。

第一種方法：$('p').size();
第二種方法：$('p').length

以上兩種方法都可以。推薦使用length屬性

1.3 其他屬性和方法

屬性/方法名	用法	介紹
selector	$('p').selector	返回選擇器的字符串
get()	$('p').get();	返回所有的選擇的dom對(duì)象的集合
get(index)	$('p').get(1);	返回第2個(gè)dom對(duì)象，索引從0開(kāi)始
toArray()	$('p').toArray();	把jQuery集合中所有DOM元素恢復(fù)成一個(gè)數(shù)組。

?2.jQuery構(gòu)造函數(shù)解密

2.1 構(gòu)造函數(shù)的each方法

語(yǔ)法：jQuery.each(object, [callback])

概述

通用例遍方法，可用于例遍對(duì)象和數(shù)組。不同于例遍 jQuery 對(duì)象的 $().each() 方法，此方法可用于例遍任何對(duì)象。回調(diào)函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)為對(duì)象的成員或數(shù)組的索引，第二個(gè)為對(duì)應(yīng)變量或內(nèi)容。如果需要退出 each 循環(huán)可使回調(diào)函數(shù)返回 false，其它返回值將被忽略。

參數(shù)

object:需要例遍的對(duì)象或數(shù)組。
callback:每個(gè)成員/元素執(zhí)行的回調(diào)函數(shù)。

示例

// 例遍數(shù)組，同時(shí)使用元素索引和內(nèi)容。
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});
// 例遍對(duì)象，同時(shí)使用成員名稱和變量?jī)?nèi)容。
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

2.2 構(gòu)造函數(shù)的map方法

語(yǔ)法 ：jQuery.map(arr|obj,callback)

返回值： Array新數(shù)組

概述

將一個(gè)數(shù)組中的元素轉(zhuǎn)換到另一個(gè)數(shù)組中。作為參數(shù)的轉(zhuǎn)換函數(shù)會(huì)為每個(gè)數(shù)組元素調(diào)用，而且會(huì)給這個(gè)轉(zhuǎn)換函數(shù)傳遞一個(gè)表示被轉(zhuǎn)換的元素作為參數(shù)。轉(zhuǎn)換函數(shù)可以返回轉(zhuǎn)換后的值、null（刪除數(shù)組中的項(xiàng)目）或一個(gè)包含值的數(shù)組，并擴(kuò)展至原始數(shù)組中。

參數(shù)

array:待轉(zhuǎn)換數(shù)組。
callback:為每個(gè)數(shù)組元素調(diào)用，而且會(huì)給這個(gè)轉(zhuǎn)換函數(shù)傳遞一個(gè)表示被轉(zhuǎn)換的元素作為參數(shù)。函數(shù)可返回任何值。

示例

// 將原數(shù)組中每個(gè)元素加 4 轉(zhuǎn)換為一個(gè)新數(shù)組。
$.map( [0,1,2], function(n){
  return n + 4;
});
// 結(jié)果:
// [4, 5, 6]

// 原數(shù)組中大于 0 的元素加 1 ，否則刪除。
$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});
// 結(jié)果:
// [2, 3]

// 原數(shù)組中每個(gè)元素?cái)U(kuò)展為一個(gè)包含其本身和其值加 1 的數(shù)組，并轉(zhuǎn)換為一個(gè)新數(shù)組。
$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
});
// 結(jié)果:
// [0, 1, 1, 2, 2, 3]

2.3 數(shù)組的過(guò)濾方法grep

語(yǔ)法jQuery.grep(array, callback, [invert])

概述

使用過(guò)濾函數(shù)過(guò)濾數(shù)組元素。此函數(shù)至少傳遞兩個(gè)參數(shù)：待過(guò)濾數(shù)組和過(guò)濾函數(shù)。過(guò)濾函數(shù)必須返回 true 以保留元素或 false 以刪除元素。

參數(shù)

array:待過(guò)濾數(shù)組。

callback:此函數(shù)將處理數(shù)組每個(gè)元素。第一個(gè)參數(shù)為當(dāng)前元素，第二個(gè)參數(shù)而元素索引值。

invert:如果 "invert" 為 false 或?yàn)樵O(shè)置，則函數(shù)返回?cái)?shù)組中由過(guò)濾函數(shù)返回 true 的元素，當(dāng)"invert" 為 true，則返回過(guò)濾函數(shù)中返回 false 的元素集。

返回值： 數(shù)組Array

示例

// 過(guò)濾數(shù)組中小于 0 的元素。
$.grep( [0,1,2], function(n,i){
  return n > 0;
});
// 結(jié)果:
// [1, 2]

// 排除數(shù)組中大于 0 的元素，使用第三個(gè)參數(shù)進(jìn)行排除。
$.grep( [0,1,2], function(n,i){
  return n > 0;
}, true);
// 結(jié)果:
// [0]

2.4 轉(zhuǎn)換數(shù)組方法jQuery.makeArray

語(yǔ)法：jQuery.makeArray(obj)

概述

將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象。類數(shù)組對(duì)象有 length 屬性，其成員索引為 0 至 length - 1。實(shí)際中此函數(shù)在 jQuery 中將自動(dòng)使用而無(wú)需特意轉(zhuǎn)換。

參數(shù)： obj:類型Object，類數(shù)組對(duì)象。

示例

// 過(guò)濾數(shù)組中小于 0 的元素。
// <div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用數(shù)組翻轉(zhuǎn)函數(shù)
// 結(jié)果:
// Fourth
// Third
// Second
// First

2.5 數(shù)組包含校驗(yàn)inArray

語(yǔ)法：jQuery.inArray(value,array,[fromIndex])

概述

確定第一個(gè)參數(shù)在數(shù)組中的位置，從0開(kāi)始計(jì)數(shù)(如果沒(méi)有找到則返回 -1 )。

參數(shù)

value:用于在數(shù)組中查找是否存在
array:待處理數(shù)組。

fromIndex:用來(lái)搜索數(shù)組隊(duì)列，默認(rèn)值為0。

示例

// 查看對(duì)應(yīng)元素的位置
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);  //3
jQuery.inArray(4, arr);  //0
jQuery.inArray("David", arr);  //-1
jQuery.inArray("Pete", arr, 2);  //-1

2.6 合并數(shù)組方法merge

語(yǔ)法：jQuery.merge(first,second)

概述

合并兩個(gè)數(shù)組返回的結(jié)果會(huì)修改第一個(gè)數(shù)組的內(nèi)容——第一個(gè)數(shù)組的元素后面跟著第二個(gè)數(shù)組的元素。要去除重復(fù)項(xiàng)，請(qǐng)使用$.unique()

參數(shù)

first:第一個(gè)待處理數(shù)組，會(huì)改變其中的元素。
second:第二個(gè)待處理數(shù)組，不會(huì)改變其中的元素。

示例

// 合并兩個(gè)數(shù)組到第一個(gè)數(shù)組上。
$.merge( [0,1,2], [2,3,4] )
// 結(jié)果:
// [0,1,2,2,3,4]

2.7 數(shù)組去重unique

語(yǔ)法：jQuery.unique(array)

概述

刪除數(shù)組中重復(fù)元素。只處理刪除DOM元素?cái)?shù)組，而不能處理字符串或者數(shù)字?jǐn)?shù)組。

示例

// 刪除重復(fù) div 標(biāo)簽。
$.unique(document.getElementsByTagName("div"));
// 結(jié)果:
// [<div>, <div>, ...]

2.8 jQuery構(gòu)造函數(shù)的擴(kuò)展對(duì)象方法（繼承）

語(yǔ)法：jQuery.extend([deep], target, object1, [objectN])

概述

用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象。如果不指定target，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法。 如果第一個(gè)參數(shù)設(shè)置為true，則jQuery返回一個(gè)深層次的副本，遞歸地復(fù)制找到的任何對(duì)象。否則的話，副本會(huì)與原對(duì)象共享結(jié)構(gòu)。 未定義的屬性將不會(huì)被復(fù)制，然而從對(duì)象的原型繼承的屬性將會(huì)被復(fù)制。

參數(shù)

target:一個(gè)對(duì)象，如果附加的對(duì)象被傳遞給這個(gè)方法將那么它將接收新的屬性，如果它是唯一的參數(shù)將擴(kuò)展jQuery的命名空間。
object1:待合并到第一個(gè)對(duì)象的對(duì)象。
objectN:待合并到第一個(gè)對(duì)象的對(duì)象。
deep:如果設(shè)為true，則遞歸合并。

示例

// 合并 settings 和 options，修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
// 結(jié)果:
// settings == { validate: true, limit: 5, name: "bar" }

2.9 其他構(gòu)造函數(shù)上的方法和屬性

屬性名	實(shí)例	說(shuō)明
noop	var f = jQuery.noop;	一個(gè)空函數(shù)
isArray	$.isArray([1,3,4])	測(cè)試對(duì)象是否為數(shù)組。
isFunction	jQuery.isFunction(obj)	測(cè)試對(duì)象是否為函數(shù)。
isNumeric	jQuery.isNumeric(value)	確定它的參數(shù)是否是一個(gè)數(shù)字。
isWindow	jQuery.isWindow(obj)	測(cè)試對(duì)象是否是窗口
error	jQuery.error(message)	接受一個(gè)字符串，并且直接拋出一個(gè)包含這個(gè)字符串的異常
trim	jQuery.trim(str)	去掉字符串起始和結(jié)尾的空格

3.鏈?zhǔn)骄幊毯碗[式迭代

3.1 鏈?zhǔn)骄幊?/h3>

由于大部分jQuery的api方法內(nèi)部返回值都是jQuery的包裝對(duì)象自身。所以我們可以在jQuery的api調(diào)用之后繼續(xù)調(diào)用jQuery的方法，這樣就稱作是鏈?zhǔn)骄幊獭?/p>

例如代碼:

$('#p1').css('color', 'red').height(200).hide('slow');
// 等價(jià)于
$('#p1').css('color', 'red');
$('#p1').height(200);
$('#p1').hide('slow');

由于css方法、height、hide方法都返回jQuery包裝對(duì)象自身。所以就可以繼續(xù)鏈?zhǔn)秸{(diào)用。

有些方法可以破壞鏈?zhǔn)降慕Y(jié)構(gòu)，比如：
nextAll(),prevAll(),sibilings(),find(),children(),parent(),parents()...

如果想回到最近一次破壞鏈?zhǔn)浇Y(jié)構(gòu)之前的代碼可以使用end方法。

$('#p1').nextAll().hide().end().css('color', 'red');

3.2 隱式迭代

jQuery包裝對(duì)象本身就是一個(gè)偽數(shù)組，匹配的元素有多個(gè)的時(shí)候，要做設(shè)置操作的時(shí)候，jQuery內(nèi)部會(huì)隱式的變量所有的匹配元素調(diào)用設(shè)置操作，所以稱為隱式迭代。

4.jQuery的插件封裝

4.1 給jQuery包裝對(duì)象擴(kuò)展方法屬性

直接給$.fn添加方法和屬性

(function(jQuery) {
  jQuery.fn.logText = function() {
    console.log(this.text());
  };
})(jQuery);

4.2 給構(gòu)造函數(shù)擴(kuò)展方法和屬性

通過(guò)$.extend()來(lái)擴(kuò)展jQuery構(gòu)造函數(shù)

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //！JavaScript中月分是從0開(kāi)始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + ' My App: ' + message);
    }
});

$.log('initializing...'); //調(diào)用

直接給jQuery構(gòu)造函數(shù)添加屬性和方法

(function(jQuery) {
  jQuery.appName = 'laoma Extend';
})(jQuery);

5.jQuery常用插件

jQuery UI

jQuery EasyUI

jQuery formvalidate

jQuery 延遲加載插件

.....

---

對(duì)應(yīng)視頻地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請(qǐng)掃碼

微信：Flydragon_malun 或者18911865673

總結(jié)

以上是生活随笔為你收集整理的06-老马jQuery教程-jQuery高级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。