jQuery工具函数

悠悠 2022-08-18 15:12 9阅读 0赞

学习要点：

1.字符串操作

2.数组和对象操作

3.测试操作

4.URL 操作

5.浏览器检测

6.其他操作

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

一．字符串操作

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

$.trim()。

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

var str = '                                              jQuery                                                ';

alert(str);

alert($.trim(str));

二．数组和对象操作

jQuery 为处理数组和对象提供了一些工具函数，这些函数可以便利的给数组或对象进行 遍历、筛选、搜索等操作。

//$.each()遍历数组

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

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

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

\});

//$.each()遍历对象

$.each($.ajax(), function (name, fn) \{

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

\})

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

//$.grep()数据筛选

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

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

return element < 6 && index < 5;

\});

alert(arrGrep);

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

//$.map()修改数据

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

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

if (element < 6 && index < 5) \{

return element + 1;

\});

alert(arrMap);

//$.inArray()获取查找到元素的下标

var arr = \[5,2,9,4,11,57,89,1,23,8\]; var arrInArray =$.inArray(1, arr); alert(arrInArray);

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

//$.merge()合并两个数组

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 元素

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

var divs = $('div').get();

divs = divs.concat($('.box').get());

alert($(divs).size());

$.unique(divs);

alert($(divs).size());

//.toArray()合并多个 DOM 元素组成数组

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

三．测试操作

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

测试工具函数

<table> 
 <tbody> 
 <tr> 
 <td> 函数名 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> $.isArray(obj) </td> 
 <td> 判断是否为数组对象，是返回&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> $.isFunction(obj) </td> 
 <td> 判断是否为函数，是返回&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> $.isEmptyObject(obj) </td> 
 <td> 判断是否为空对象，是返回&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> $.isPlainObjet(obj) </td> 
 <td> 判断是否为纯粹对象，是返回&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> $.contains(obj) </td> 
 <td> 判断&nbsp;DOM&nbsp;节点是否含另一个&nbsp;DOM&nbsp;节点，是返回&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> $.type(data) </td> 
 <td> 判断数据类型 </td> 
 </tr> 
 <tr> 
 <td> $.isNumeric(data) </td> 
 <td> 判断数据是否为数值 </td> 
 </tr> 
 <tr> 
 <td> $.isWindow(data) </td> 
 <td> 判断数据是否为&nbsp;window&nbsp;对象 </td> 
 </tr> 
 </tbody> 
</table>

//判断是否为数组对象

var arr = \[1,2,3\];

alert($.isArray(arr));

//判断是否为函数

var fn = function () \{\};

alert($.isFunction(fn));

//判断是否为空对象 var obj = \{\}alert($.isEmptyObject(obj));

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

var obj = window;

alert($.isPlainObject(obj));

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

//判断第一个 DOM 节点是否含有第二个 DOM 节点

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

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

alert($.type(window));

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

alert($.isNumeric(5.25));

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

alert($.isWindow(window));

四．**URL **操作

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

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

var obj = \{

name : 'Lee', age : 100

\};

alert($.param(obj));

五．浏览器检测

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

$.browser 对象属性

<table> 
 <tbody> 
 <tr> 
 <td> 属性 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> webkit </td> 
 <td> 判断&nbsp;webkit&nbsp;浏览器，如果是则为&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> mozilla </td> 
 <td> 判断&nbsp;mozilla&nbsp;浏览器，如果是则为&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> safari </td> 
 <td> 判断&nbsp;safari&nbsp;浏览器，如果是则为&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> opera </td> 
 <td> 判断&nbsp;opera&nbsp;浏览器，如果是则为&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> msie </td> 
 <td> 判断&nbsp;IE&nbsp;浏览器，如果是则为&nbsp;true </td> 
 </tr> 
 <tr> 
 <td> version </td> 
 <td> 获取浏览器版本号 </td> 
 </tr> 
 </tbody> 
</table>

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

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

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

webkit，一般验证 Chrome 就用 webkit。

还有一种浏览器检测，是对浏览器内容的检测。比如：W3C 的透明度为 opacity，而 IE

的透明度为 alpha。这个对象是$.support。

$.support 对象部分属性

<table> 
 <tbody> 
 <tr> 
 <td> 属性名 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; hrefNormalized </td> 
 <td> 如果浏览器从&nbsp;getAttribute("href")返回的是原封不 动的结果，则返回&nbsp;true。在&nbsp;IE&nbsp;中会返回&nbsp;false，因为他 </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp; </td> 
 <td> 的&nbsp;URLs&nbsp;已经常规化了 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; htmlSerialize </td> 
 <td> 如果浏览器通过&nbsp;innerHTML&nbsp;插入链接元素的时候会序列 化这些链接，则返回&nbsp;true，目前&nbsp;IE&nbsp;中返回&nbsp;false </td> 
 </tr> 
 <tr> 
 <td> &nbsp; leadingWhitespace </td> 
 <td> 如果在使用&nbsp;innerHTML&nbsp;的时候浏览器会保持前导空白字 符，则返回&nbsp;true，目前在&nbsp;IE&nbsp;6-8&nbsp;中返回&nbsp;false </td> 
 </tr> 
 <tr> 
 <td> &nbsp; objectAll </td> 
 <td> 如&nbsp;&nbsp;果&nbsp;&nbsp;在&nbsp;&nbsp;某&nbsp;&nbsp;个&nbsp;&nbsp;元&nbsp;&nbsp;素&nbsp;&nbsp;对&nbsp;&nbsp;象&nbsp;上&nbsp;&nbsp;执&nbsp;&nbsp;行 getElementsByTagName("*")会返回所有子孙元素，则为 true，目前在&nbsp;IE&nbsp;7&nbsp;中为&nbsp;false </td> 
 </tr> 
 <tr> 
 <td> &nbsp; opacity </td> 
 <td> 如果浏览器能适当解释透明度样式属性，则返回true， 目前在&nbsp;IE&nbsp;中返回&nbsp;false，因为他用&nbsp;alpha&nbsp;滤镜代替 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; scriptEval </td> 
 <td> 使用&nbsp;appendChild/createTextNode&nbsp;方法插入脚本代码 时，浏览器是否执行脚本，目前在&nbsp;IE&nbsp;中返回false，IE&nbsp;使用&nbsp;.text&nbsp;方法插入脚本代码以执行 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; style </td> 
 <td> 如果&nbsp;getAttribute("style")返回元素的行内样式，则 为&nbsp;true。目前&nbsp;IE&nbsp;中为&nbsp;false，因为他用&nbsp;cssText&nbsp;代替 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; tbody </td> 
 <td> 如果浏览器允许&nbsp;table&nbsp;元素不包含&nbsp;tbody&nbsp;元素，则返回 true。目前在&nbsp;IE&nbsp;中会返回&nbsp;false，他会自动插入缺失的 tbody </td> 
 </tr> 
 <tr> 
 <td> Ajax </td> 
 <td> 如果浏览器支持&nbsp;ajax&nbsp;操作，返回&nbsp;true </td> 
 </tr> 
 </tbody> 
</table>

//$.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/][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

[http_api.jquery.com_jQuery.support]: http://api.jquery.com/jQuery.support/