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
});