1.jQuery原型對象解密

jQuery里面的大部分API都是在jQuery的原型對象上定義的。jQuery源碼中對原型對象做了簡寫的處理。也就是說：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函數

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

實例：

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

1.2 獲取元素的個數

兩種方法可以獲取選擇器匹配的元素的個數。

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

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

1.3 其他屬性和方法

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

?2.jQuery構造函數解密

2.1 構造函數的each方法

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

概述

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

參數

object:需要例遍的對象或數組。
callback:每個成員/元素執行的回調函數。

示例

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

2.2 構造函數的map方法

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

返回值： Array新數組

概述

將一個數組中的元素轉換到另一個數組中。作為參數的轉換函數會為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。轉換函數可以返回轉換后的值、null（刪除數組中的項目）或一個包含值的數組，并擴展至原始數組中。

參數

array:待轉換數組。
callback:為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。函數可返回任何值。

示例

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

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

// 原數組中每個元素擴展為一個包含其本身和其值加 1 的數組，并轉換為一個新數組。
$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
});
// 結果:
// [0, 1, 1, 2, 2, 3]

2.3 數組的過濾方法grep

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

概述

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

參數

array:待過濾數組。

callback:此函數將處理數組每個元素。第一個參數為當前元素，第二個參數而元素索引值。

invert:如果 "invert" 為 false 或為設置，則函數返回數組中由過濾函數返回 true 的元素，當"invert" 為 true，則返回過濾函數中返回 false 的元素集。

返回值： 數組Array

示例

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

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

2.4 轉換數組方法jQuery.makeArray

語法：jQuery.makeArray(obj)

概述

將類數組對象轉換為數組對象。類數組對象有 length 屬性，其成員索引為 0 至 length - 1。實際中此函數在 jQuery 中將自動使用而無需特意轉換。

參數： obj:類型Object，類數組對象。

示例

// 過濾數組中小于 0 的元素。
// <div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

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

2.5 數組包含校驗inArray

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

概述

確定第一個參數在數組中的位置，從0開始計數(如果沒有找到則返回 -1 )。

參數

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

fromIndex:用來搜索數組隊列，默認值為0。

示例

// 查看對應元素的位置
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 合并數組方法merge

語法：jQuery.merge(first,second)

概述

合并兩個數組返回的結果會修改第一個數組的內容——第一個數組的元素后面跟著第二個數組的元素。要去除重復項，請使用$.unique()

參數

first:第一個待處理數組，會改變其中的元素。
second:第二個待處理數組，不會改變其中的元素。

示例

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

2.7 數組去重unique

語法：jQuery.unique(array)

概述

刪除數組中重復元素。只處理刪除DOM元素數組，而不能處理字符串或者數字數組。

示例

// 刪除重復 div 標簽。
$.unique(document.getElementsByTagName("div"));
// 結果:
// [<div>, <div>, ...]

2.8 jQuery構造函數的擴展對象方法（繼承）

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

概述

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

參數

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

示例

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

2.9 其他構造函數上的方法和屬性

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

3.鏈式編程和隱式迭代

3.1 鏈式編程

由于大部分jQuery的api方法內部返回值都是jQuery的包裝對象自身。所以我們可以在jQuery的api調用之后繼續調用jQuery的方法，這樣就稱作是鏈式編程。

例如代碼:

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

由于css方法、height、hide方法都返回jQuery包裝對象自身。所以就可以繼續鏈式調用。

有些方法可以破壞鏈式的結構，比如：
nextAll(),prevAll(),sibilings(),find(),children(),parent(),parents()...

如果想回到最近一次破壞鏈式結構之前的代碼可以使用end方法。

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

3.2 隱式迭代

jQuery包裝對象本身就是一個偽數組，匹配的元素有多個的時候，要做設置操作的時候，jQuery內部會隱式的變量所有的匹配元素調用設置操作，所以稱為隱式迭代。

4.jQuery的插件封裝

4.1 給jQuery包裝對象擴展方法屬性

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

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

4.2 給構造函數擴展方法和屬性

通過$.extend()來擴展jQuery構造函數

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //！JavaScript中月分是從0開始的
            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...'); //調用

直接給jQuery構造函數添加屬性和方法

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

5.jQuery常用插件

jQuery UI

jQuery EasyUI

jQuery formvalidate

jQuery 延遲加載插件

.....

---

對應視頻地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請掃碼

微信：Flydragon_malun 或者18911865673

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。