從零玩轉jQuery-核心函式和靜態方法

jQuery核心函式

• 從jQuery文件中可以看出,一共3大類4小類

• • 當DOM載入完成後執行傳入的回撥函式

• • 接收一個包含 CSS 選擇器的字串，然後用這個字串去匹配一組元素,幷包裝成jQuery物件

• 原生JS物件和jQuery物件相互轉換

Tips:為了方便開發者之間溝通和閱讀,一般情況下所有jQuery操作相關的變數前面加上$

• • 根據 HTML 標記字串，動態建立DOM 元素

jQuery物件

• jQuery物件的本質是什麼?

  • jQuery物件的本質是一個偽陣列

var $div = $("div");console.log($div);var arr = [1, 3, 5];console.log(arr);

• 什麼是偽陣列?

  • 有0到length-1的屬性

  • 並且有length屬性

var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

jQuery靜態方法

• 什麼是靜態方法?

  • 靜態方法對應的是物件方法,物件方法用例項物件呼叫,而靜態方法用類名呼叫

• • 暫停或者恢復jQuery.ready()事件

  • 傳入true或false

html>
    
    
    

    點選測試彈出解除延遲

• • 遍歷物件或陣列

  • 優點統一遍歷物件和陣列的方式

  • 回撥引數的順序更符合我們的思維模式

• • 遍歷物件或陣列,將回撥函式的返回值組成一個新的陣列返回

        $(function () {            // 4.1遍歷陣列
            var arr = [1, 3, 5, 7, 9];            // 4.1.1透過原生方法遍歷陣列
            // 第一個回撥函式引數是遍歷到的元素
            // 第二個回撥函式引數是當前遍歷的索引
            // 第三個回撥函式引數是當前被遍歷的陣列
            // 返回值: 將回撥函式返回值收集起來組成一個新的陣列
            var res = arr.map(function (ele, idx, arr) {                console.log(idx, ele, arr);                return ele + idx;
            });            console.log(res);            
            // 4.1.2透過jQuery靜態方法遍歷陣列
            // 第一個回撥函式引數是遍歷到的元素
            // 第二個回撥函式引數是當前遍歷的索引
            // 返回值: 將回撥函式返回值收集起來組成一個新的陣列
            var $res2 = $.map(arr, function (ele,idx) {                console.log(idx, ele);                return ele + idx;
            });            console.log($res2);            // 4.2遍歷物件
            var obj = {name: "lnj", age:"33", gender:"male"};            /*
            obj.map(function (ele, idx, obj) {
                // 報錯,原生JS沒有map方法
                console.log(idx, ele, obj);
            });
            */
            var $res = $.map(obj, function (value, key) {                console.log(key, value);                return key + value;
            });            console.log($res);
        });

• • 去掉字串起始和結尾的空格。

• 判斷是否是陣列

• • 判斷是否是函式

• • 判斷是否是window物件

為什麼要講解以上極度簡單的工具方法?
江哥提示: 這是為後面放大招做鋪墊,一定要認真記住以上方法哦

作者：極客江南
連結：