系統學習 jQuery (二) 工具

jQuery 用的最多的功能應該是操作 DOM 和 AJAX 操作了,這讓我們容易忽視它的其他功能,所以在瞭解這兩部分功能之前先來看看 jQuery 提供的豐富的工具函數,在使用 jQuery 的項目中這些函數能提供很多便利。

$.support 獲得瀏覽器是否支持某種

$.browser 根據 navigator.userAgent 來獲得瀏覽器信息

$.each(arr, fn(i, n)) 十分方便,遍歷一個數組或對象,以每一項爲 this 調用 fn,傳遞該項的鍵 i 和該項的值 n

$.grep(arr, fn(n, i)) 過濾一個數組,對數組的每一項調用 fn,傳遞該項的值 n 和該項的鍵 i,fn 返回 true 該項保留,返回 false 該項去除(grep 返回過濾後的數組,原數組不會改變)

$.map(arr, fn(n)) 修改一個數組或對象,對數組或對象的每一項調用 fn,傳遞該項的值 n,fn 的返回值將替換原值(map 返回修改後的數組,原數組不會改變)

$.makeArray(obj) 將對象轉變爲數組

$.inArray(val, arr, [from]) 在數組中查找一個值,from 可指定從哪一項開始查找默認爲 0

$.merge(first, second) 將第二個數組的值添加到第一個數組之後,會修改第一個數組

$.trim(str) 去除字符串前後的空格,很常用的功能

$.fn.jquery 獲得 jQuery 的版本信息

$.noop 空函數,在需要傳遞一個空的回調函數時可以直接用它

$.contains(dom1, dom2) 判斷文檔元素 dom1 是否包含 dom2

$.proxy(fn, context) 創建一個 this 指向特定對象的函數,且在 jQuery 的時間機制下可以通過原函數來取消此函數的事件綁定

$.type(obj) 獲得對象類型

$.when(deferred1, deferred2, ...) 將多個延遲對象合併爲一個延遲對象,在需要等待多個 AJAX 加載完成再執行操作時可以使用次方法 ,若傳遞非 deferred 對象則被當作一個加載完成的 deferred 對象

參考 jQuery API http://jquery.cuishifeng.cn/jQuery.support.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>
    <p id="p1">1
        <div id="div1"></div>
    </p>
    <p>2</p>
    <p>3</p>
    <script>
        $(function() {
            console.log($.support);
            console.log($.browser); // 根據 navigator.userAgent 來獲得瀏覽器信息。由於這些信息並不可靠,在 1.9 以後的版本中被棄用
            var arr = [1, 2, 3];$.each(arr, function(i, n){console.log(this); console.log(i); console.log(n);});
            var obj = {name: 'mcj'}
            $.extend(obj, {age: 100}); console.log(obj);
            $.when({name: 'name1'}, {name: 'name2'}).done(function(a1, a2) {
                console.log(a1); console.log(a2);
            });
            var arr2 = $.grep(arr, function(n, i) {return n < 3}); //過濾數組,返回過濾後的數組,原數組不變
            console.log(arr); console.log(arr2);
            console.log(document.getElementsByTagName('p'));
            console.log($.makeArray(document.getElementsByTagName('p')));
            console.log($.makeArray({name: 'mcj', age: 100}));
            var arr3 = $.map(arr, function(n) { // 不會改變原數組
                if(n == 1) {
                    return [1, 1, 1];
                }else {
                    return null;
                }
            });
            console.log(arr3);
            var arr4 = $.map({name: 'mcj', age: 100}, function(n) {
                return {sex: 1};
            });
            console.log(arr4);
            console.log($.inArray(1, arr));
            var arr5 = $.merge([1, 2, 3], [1, 2, 3]);
            console.log(arr5);
            console.log($.unique(arr5));
            console.log($('#id1', $.parseXML('<xml><node id="id1">hello</node></xml>')));
            $.noop(); // 空函數,當需要一個空的回調函數時可以使用它
            var obj = {
                name: 'mcj',
                age: 100,
                sayHello: function() {
                    console.log('hello i am' + this.name);
                }
            }
            var f = $.proxy(obj.sayHello, obj); f();
            console.log($.contains(document.getElementById('p1'), document.getElementById('div1')));
            console.log($.type(123));
            console.log($.trim('  aaa   '));
            //$.error('test error');
            console.log($.fn.jquery);
            console.log($('#p1'));
        })
    </script>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章