jQuery學習筆記（二）

jQueryt靜態方法詳解 ==> each

　　　　　　　　　  ==> map

　　　　　　　　　 ==> trim

　　　　　　　　　 ==> isArray

                                 ==> isFunction

　　　　　　　　　==> isWindow 

　　　　　　　　　==> holdReady

一，each方法

　　註：為了更好的展示，首先創建一個數組和一個對象 (let 與 arr 區別詳解見 JavaScript筆記 （一）)

1 let arr = [1, 3, 5 ,7, 9];
2 
3 let obj = {
4       0:1,
5       2:3,
6       3:5,
7       4:7,
8       length:4,    
9 };

　　對於原生JS，each方法只適合遍曆數組，而不適合遍歷偽數組（偽數組詳解見筆記（1））

　　代碼示例

1 arr.forEach(function (value, index){
2            console.log(index, value)     
3 })
4 
5 obj.forEach(function (value, index){
6            console.log(index, value)     
7 })

　　結果：

　　說明

　　　forEach方法的第一個參數為遍歷到的元素，第二個參數為當前遍歷的索引

　　　原生JS的forEach方法只能遍曆數組，而不能遍歷偽數組

 　　對於jQuery，each方法既適合遍曆數組，也適合遍歷偽數組

　　代碼示例

$.each(arr, function (index, value){
           console.log(index, value);
})

$.each(obj, function (index, value){
           console.log(index, value);
})

　　結果

　　說明

　　　jQuery的 each 方法 第一個參數為 正在遍歷元素的索引，第二個參數為遍歷到的元素

　　　jQuery的 each方法既適合遍曆數組，也適合遍歷偽數組

 二，map靜態方法

　　簡而言之，map靜態方法 和 each靜態方法大體上相似，都是 JS的 map靜態方法只能遍曆數組，不能遍歷偽數組，而jQuery卻都能

　　兩者之間還有的區別就是

　　　each 靜態方法的返回值就是 遍歷誰就返回誰

　　　map 靜態方法的返回值 就是一個空數組

　　　因此，each靜方法不支持在回調函數中對遍歷的數組進行改造

　　　　　　map靜態方法可以在回調函數中通過 return 對遍歷的數組進行處理，然後生成一個新的數組返回

1 arr.map(function(value, index, array) {
2           
3 })
4 # 基本語法格式，參數見文生意
5 $.map(arr, function(value, index) {
6 
7 })

 三，trim 靜態方法

　　直白點說，這就是一個將字元串兩端空格去掉，並且返回一個去掉空格的新的字元串的靜態方法

$.trim(str)

四，isArray、isFunction、isWindow 靜態方法

　　這三個靜態方法都是用來判斷的，返回值均為 True/False

　　其中 isArray()靜態方法用來判斷是否為 真數組

 　　isFunction()靜態方法用來判斷是否是 函數

　　isWindow 靜態方法用來判斷是否為 window對象

　　補充：對於 $.isFunction(jQuery) 的判斷，其結果為 True

　　　原因：本質上 jQuery 框架 也是一個函數，其大體構造為

1  (function (window, undefined) {
2 
3 })(window);  // 立即執行函數

　　　且，從此可以得到一個立即執行函數的寫法

1 function test() {
2 
3  }
4 test()
5 
6 // ==>
7 (function test() {
8 
9 })(window);

四，holdReady 靜態方法

　作用：暫停 入口函數的執行

　參數：true/ false

 1 $.holdReady(true)  // 使得下麵的入口函數不執行
 2 
 3 $(document).ready(function(){
 4       alert("ready"); 
 5 })
 6 
 7 
 8 let btn = document.queryselector("button");
 9 btn.onclick = function() {
10         $.holdReady(false);  // 點擊按鈕，使得上面的入口函數得以再次執行
11 }