jQuery工具函數

時間 2020-04-18

標籤 jquery 工具函數欄目 JQuery 简体版

原文原文鏈接

工具函數是指直接依附於jQuery對象，針對jQuery對象自己定義的方法，即全局性的函數。它的做用主要是提供好比字符串、數組、對象等操做方面的遍歷。
一．字符串操做
在jQuery中，字符串的工具函數只有一個，就是去除字符串左右空格的工具函數：
$.trim()去掉字符串兩邊空格html

$(function () {
    var str = '                    jQuery                     '; 
    alert(str);
    alert($.trim(str));            //去掉jQuery倆邊的空格
});

二．數組和對象操做
jQuery爲處理數組和對象提供了一些工具函數，這些函數能夠便利的給數組或對象進行遍歷、篩選、搜索等操做。
1.$.each()遍歷數組
html5頁面代碼：html5

<body>
<div id="box"></div>
</body>

按照天然的排序方式把名字排序web

$(function () {
    var arr = ['張三', '李四', '王五', '馬六'];
    $.each(arr,function (index,value) {      //arr傳數組原來的變量,index獲取當前你遍歷的下標，value遍歷遇到的值
        $('#box').html($('#box').html() + (index+1) + '.' + value + '<br />');   //每一次把上一次獲取到在加上
    });
});

注意：$.each()中index 表示數組元素的編號，默認從0開始。
2.$.each()遍歷對象ajax

$(function () {
    $.each($.ajax(), function (name, fn) {
        $('#box').html($('#box').html() + name + '<br /><br />');
    });
});

3.$.grep()數據篩選數組

$(function () {
    var arr = [4,2,6,9,11,25,38,59];
    var arrGrep = $.grep(arr, function (element,index) {   //index選定範圍的，element把選定的值再進行篩選
        return index < 5 && element < 6;      //這裏按道理是布爾值，但總體返回一個數組
    });
    alert(arrGrep);     //4,2
});

注意：$.grep()方法的index
4.$.map()修改數據瀏覽器

$(function () {
    var arr = [4,2,6,9,11,25,38,59];
    var arrMap = $.map(arr, function (element, index) {
        //return index < 5 && element < 6;    //這裏就是按布爾值返回的
         if (index < 5 && element < 6) {
            return element + 1;   //返回值加1
         }
    });
    
    alert(arrMap);   //5,3
});

5.$.inArray()獲取查找到元素的下標函數

$(function () {
    var arr = [4,2,6,9,11,25,38,59];
    alert($.inArray(11,arr));    //數字11的下標是4
});

注意：$.inArray()的下標從0開始計算。
6.$.merge()合併兩個數組工具

$(function () {
    var arr = [4,2,6,9,11,25,38,59];
    var arr2 = [200,300];
    alert($.merge(arr, arr2));   //4,2,6,9,11,25,38,59,200,300
});

7.$.unique()刪除重複的DOM元素測試

$(function () {
    var arr = [5,2,9,4,11,57,89,1,23,8];
    var arr2 = [2,9,4];
    var arr3 = $.merge(arr,arr2);
    alert($.unique(arr3));          //89.4,5,8,23,1,2,57,11,9
});

$(function () {
    var divs = $('div').get();
    divs = divs.concat($('.box').get());
    alert($(divs).size());
    $.unique(divs);
    alert($(divs).size());   //9,6
});

8..toArray()合併多個 DOM 元素組成數組this

$(function () {
    alert($('li').toArray().length);     //3
    alert($($('li').toArray()).size());  //3
});

三．測試操做
在jQuery中，數據有着各類類型和狀態。有時，咱們但願能經過判斷數據的類型和狀態作相應的操做。jQuery提供了五組測試用的工具函數。
測試工具函數:
(1)$.isArray(obj)判斷是否爲數組對象，是返回true

$(function () {
    var arr = [1,2,3];
    alert($.isArray(arr));           //true
});

(2)$.isFunction(obj)判斷是否爲函數，是返回true

$(function () {
    var fn = function () {};
    alert($.isFunction(fn));         //true
});

(3)$.isEmptyObject(obj)判斷是否爲空對象，是返回true

$(function () {
    var obj = {};
    alert($.isEmptyObject(obj));      //true
});

(4)$.isPlainObjet(obj)判斷是否爲純粹對象，是返回true

$(function () {
    var obj = {};
    obj = new Object();
    alert(obj);                  //[object Object]
    obj = window;
    obj = new Object('name');    //已經變成name字符串了
    alert(obj);                  //name
    alert($.isPlainObject(obj)); //false
});

注意：若是使用new Object('name');傳遞參數後，返回類型已不是Object，而是字符串，因此就不是純粹的原始對象了。
(5)$.contains(obj)判斷DOM節點是否含另外一個DOM節點，是返回true

$(function () {
    alert($.contains($('#box').get(0), $('#pox').get(0)));   //true
});

(6)$.type(data)判斷數據類型

$(function () {
    var obj = {};
    alert($.type(obj));   //object
});

(7)$.isNumeric(data)判斷數據是否爲數值

$(function () {
    var num = 1.23;
    alert($.isNumeric(num));          //true
});

(8)$.isWindow(data)判斷數據是否爲window對象

$(function () {
    var win = window;
    alert($.isWindow(window));        //true
});

四．URL 操做
URL地址操做，在以前的Ajax章節其實已經講到過。只有一個方法：$.param()，將對象的鍵值對轉化爲URL鍵值對字符串形式。
$.param()將對象鍵值對轉換爲URL字符串鍵值對

$(function () {
    var obj = {
        name : 'xixi',
        age : 100
    };
    
    alert($.param(obj));   //url的鍵值對:name=xixi&age=100
});

五．瀏覽器檢測
因爲在早期的瀏覽器中，分IE和W3C瀏覽器。而IE678使用的覆蓋率還很高，因此，早期的jQuery提供了$.browser工具對象。而如今的jQuery已經廢棄刪除了這個工具對象，若是還想使用這個對象來獲取瀏覽器版本型號的信息，可使用兼容插件。

//獲取火狐瀏覽器和版本號
alert($.browser.mozilla + ':' + $.browser.version);

注意：火狐採用的 mozilla引擎，通常就是指火狐；而谷歌Chrome採用的引擎是webkit，通常驗證Chrome就用webkit。
還有一種瀏覽器檢測，是對瀏覽器內容的檢測。好比：W3C的透明度爲opacity，而IE的透明度爲alpha。這個對象是$.support。
六．其餘操做
jQuery提供了一個預備綁定函數上下文的工具函數：$.proxy()。這個方法，能夠解決諸如外部事件觸發調用對象方法時this的指向問題。
$.proxy()調整this指向

$(function () {
    var obj = {
        name : 'xixi',
        test : function () {
            alert(this.name);              //xixi
        }
    };
    
    obj.test();
    $('#box').click($.proxy(obj,'test'));   //指向的this爲方法屬於對象box
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。