第一百七十五节，jQuery，工具函数

2023-01-07 21:09:50

jQuery，工具函数

学习要点：

　　1.字符串操作

　　2.数组和对象操作

　　3.测试操作

　　4.URL 操作

　　5.浏览器检测

　　6.其他操作

工具函数是指直接依附于 jQuery 对象，针对 jQuery 对象本身定义的方法，即全局性的函数。它的作用主要是提供比如字符串、数组、对象等操作方面的遍历。

一．字符串操作

在 jQuery 中，字符串的工具函数只有一个，就是去除字符串左右空格的工具函数：

trim()去掉字符串两边空格

    var str = '          jQuery ';

    alert(str);

    alert($.trim(str));  //trim()去掉字符串两边空格

each()遍历数组和对象，两个参数，参数1是要遍历的对象或者数组，参数2是匿名函数，函数里也有两个形式参数见下列

each()遍历数组，参数1是要遍历的数组，参数2是匿名函数，函数有两个形式参数index, value，分别接收数组的下标和值

    var arr = ['张三', '李四', '王五', '马六'];

    $.each(arr, function (index, value) {

        $('#box').html($('#box').html() + index + '.' + value + '<br />');

    });

each()遍历对象，参数1是要遍历的对象，参数2是匿名函数，函数有两个形式参数name, fn，分别接收对象的键和值

    var ojp = {a:1,b:2,c:3};

    $.each(ojp, function (name, fn) {

        $('#box').html($('#box').html() + name + '：' + fn + '<br /><br />');

    })

注意：$.each()中 index 表示数组元素的编号，默认从 0 开始。

grep()数组数据筛选，返回筛选后的数组，两个参数，参数1要筛选的数组，参数2是匿名函数，函数有两个形式参数element, index，分别接收数组的值和下标

    var arr = [5, 2, 9, 4, 11, 57, 89, 1, 23, 8];

    var arrGrep = $.grep(arr, function (element, index) {

        return element < 6 && index < 5;   //返回值小于6并且下标小于5的

    });

    alert(arrGrep);

注意：$.grep()方法的 index 是从 0 开始计算的。

map()修改数组数据，返回修改后的数组，两个参数，参数1要修改的数组，参数2是匿名函数，函数有两个形式参数element, index，分别接收数组的值和下标

    var arr = [5, 2, 9, 4, 11, 57, 89, 1, 23, 8];

    var arrMap = $.map(arr, function (element, index) {

        if (element < 6 && index < 5) {  //判断值小于6并且下标小于5的

            return element + 1; //值小于6并且下标小于5的加1

        }

    });

    alert(arrMap);

inArray()查找到指定元素的下标，返回下标，两个参数，参数1要查找的指定元素，参数2要查找的数组

    var arr = [5, 2, 9, 4, 11, 57, 89, 1, 23, 8];

    var arrInArray = $.inArray(1, arr);  //查找元素1的下标是多少

    alert(arrInArray);

注意：$.inArray()的下标从 0 开始计算。

merge()合并两个数组，返回一个数组，有两个参数，参数1是数组1，参数2是数组2

    var arr = [5, 2, 9, 4, 11, 57, 89, 1, 23, 8];

    var arr2 = [23, 2, 89, 3, 6, 7];

    alert($.merge(arr, arr2));

unique()删除重复的 DOM 元素，参数是要删除重复的DOM 元素数组

<div></div>

<div></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div></div>

    var divs = $('div').get();  //将所有div转换成原生态数组

    divs = divs.concat($('.box').get());  //将class为box的元素添加到数组

    alert($(divs).size());  //查看数组长度

    $.unique(divs);         //删除重复的div

    alert($(divs).size());  //查看数组长度

toArray()合并多个 DOM 元素组成数组，参数是要组合数组的节点对象集合

alert($('li').toArray());

三．测试操作

在 jQuery 中，数据有着各种类型和状态。有时，我们希望能通过判断数据的类型和状态做相应的操作。jQuery 提供了五组测试用的工具函数。

isArray(obj) 判断是否为数组对象，是返回 true

    //判断是否为数组对象

    var arr = [1, 2, 3];

    alert($.isArray(arr));

isFunction(obj) 判断是否为函数，是返回 true

//判断是否为函数

var fn = function () {};

alert($.isFunction(fn));

isEmptyObject(obj) 判断是否为空对象，是返回 true

//判断是否为空对象

var obj = {};

alert($.isEmptyObject(obj));

isPlainObjet(obj) 判断是否为纯粹对象，是返回 true

//判断是否由{}或 new Object()创造出的对象

var obj = window;

alert($.isPlainObject(obj));

注意：如果使用 new Object('name');传递参数后，返回类型已不是 Object，而是字符串，所以就不是纯粹的原始对象了。

contains(obj) 判断 DOM 节点是否含另一个 DOM 节点，是返回 true

    //contains(obj) 判断 DOM 节点是否含另一个 DOM 节点，是返回 true

    alert($.contains($('#box').get(0), $('#pox').get(0)));

    //判断#pox节点是否在#box里面

type(data) 判断数据类型

//$.type()检测数据类型

alert($.type(window));

isNumeric(data) 判断数据是否为数值

//$.isNumeric 检测数据是否为数值

alert($.isNumeric(5.25));

isWindow(data) 判断数据是否为 window 对象

//$.isWindow 检测数据对象是否为 window 对象

alert($.isWindow(window));

四．URL 操作

URL 地址操作，在之前的 Ajax 章节其实已经讲到过。只有一个方法：$.param()，将对象的键值对转化为 URL 键值对字符串形式。

param()将对象键值对转换为 URL 字符串键值对，参数是要转换的对象

//$.param()将对象键值对转换为 URL 字符串键值对

    var obj = {

        name: 'Lee',

        age: 100

    };

    alert($.param(obj));

五．浏览器检测

由于在早期的浏览器中，分 IE 和 W3C 浏览器。而 IE678 使用的覆盖率还很高，所以，早期的 jQuery 提供了$.browser 工具对象。而现在的 jQuery 已经废弃删除了这个工具对象，如果还想使用这个对象来获取浏览器版本型号的信息，可以使用兼容插件。

browser 对象属性，浏览器检测，已经删除，如果要使用必须引入jquery-migrate-1.2.1.js文件向下兼容

$.browser 对象属性

webkit 判断（谷歌） webkit 浏览器，如果是则为 true
mozilla 判断(火狐) mozilla 浏览器，如果是则为 true
safari 判断 safari 浏览器，如果是则为 true
opera 判断 opera 浏览器，如果是则为 true
msie 判断（IE） IE 浏览器，如果是则为 true
version 获取浏览器版本号

//获取火狐浏览器和版本号

alert($.browser.mozilla + ':' + $.browser.version);

注意：火狐采用的是 mozilla 引擎，一般就是指火狐；而谷歌 Chrome 采用的引擎是 webkit，一般验证 Chrome 就用 webkit。

还有一种浏览器检测，是对浏览器内容的检测。比如：W3C 的透明度为 opacity，而 IE 的透明度为 alpha。这个对象是$.support。

support 对象部分属性，浏览器内容的检测

hrefNormalized
如果浏览器从 getAttribute("href")返回的是原封不动的结果，则返回 true。在 IE 中会返回 false，因为他
的 URLs 已经常规化了

htmlSerialize
如果浏览器通过 innerHTML 插入链接元素的时候会序列化这些链接，则返回 true，目前 IE 中返回 false

leadingWhitespace
如果在使用 innerHTML 的时候浏览器会保持前导空白字符，则返回 true，目前在 IE 6-8 中返回 false

objectAll
如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素，则为true，目前在 IE 7 中为 false

opacity
如果浏览器能适当解释透明度样式属性，则返回 true，目前在 IE 中返回 false，因为他用 alpha 滤镜代替

scriptEval
使用 appendChild/createTextNode 方法插入脚本代码时，浏览器是否执行脚本，目前在 IE 中返回 false，IE使用 .text 方法插入脚本代码以执行

style
如果 getAttribute("style")返回元素的行内样式，则为 true。目前 IE 中为 false，因为他用 cssText 代替

tbody
如果浏览器允许 table 元素不包含 tbody 元素，则返回true。目前在 IE 中会返回 false，他会自动插入缺失的tbody

Ajax
如果浏览器支持 ajax 操作，返回 true

//$.support.ajax 判断是否能创建 ajax

alert($.support.ajax);

//$.support.opacity 设置不同浏览器的透明度

if ($.support.opacity == true) {

　　$('#box').css('opacity', '0.5');

} else {

　　$('#box').css('filter', 'alpha(opacity=50)');

}

注意：由于 jQuery 越来越放弃低端的浏览器，所以检测功能在未来使用频率也越来越低。所以，$.brower 已被废弃删除，而$.support.boxModel 检测 W3C 或 IE 盒子也被删除。并且 http://api.jquery.com/jQuery.support/官网也不提供属性列表和解释，给出一个 Modernizr 第三方小工具来辅组检测。

六．其他操作

jQuery 提供了一个预备绑定函数上下文的工具函数：$.proxy()。这个方法，可以解决诸如外部事件触发调用对象方法时 this 的指向问题。

proxy()调整 this 指向

    var obj = {

        name: 'Lee',

        test: function () {

            alert(this.name);

        }

    };

    $('#box').click(obj.test); //指向的 this 为#box 元素

    $('#box').click($.proxy(obj, 'test')); //指向的 this 为方法属于对象 box

码农公寓

相关文章