jQuery学习笔记（5）——实用工具函数

来源：互联网发布：诺基亚925下载软件编辑：程序博客网时间：2024/06/05 16:31

jQuery实用工具函数

通常来说，实用工具函数要么操作除DOM元素以外的JavaScript对象，要么执行一些非对象的操作。
实用工具函数是较低级别的操作，通常不如jQuery命令简便，这些函数更适合用于编写命令及其他扩展插件，而不是在页面级别的代码里使用。

利用jQuery标志

定义在$的变量提供了检测当前浏览器的功能。
为公共用途而设立的jQuery标志有：

$.browser
$.boxModel
$.styleFloat

检测用户代理

jQuery命令通常可以让我们免于处理不同浏览器的差异，但是如果自己编写命令或者其他扩展，就需要考虑这个问题了。
要想对不同浏览器区别对待就必须要做浏览器检测。但其实浏览器检测并不容易。现行的浏览器种类繁多，即使是同一浏览器的不同版本，也会存在支持级别的差异。浏览器检测具有下列特征：

不精确——代码在某些浏览器中运行时意外地阻碍某些功能
不可扩展——为了面面俱到导致if-else分支庞大
不准确——由于用户篡改（欺骗）而导致假的用户代理信息

即便如此，我们也不能跳过这个工作，替代浏览器检测的方法就是对象检测，之前说过的事件模型，定义有两种方法——addEventListener()和attachEvent()，通过对这两个方法的检测，同样可以区分IE和非IE的浏览器。

if(element.attachEvent) {    element.attachEvent('onclick',someHandler);} else if {    element.addEventListener('click',someHandler);} else {    throw new Error('event handling not supported');}

即便对象检测可以较为简略的针对不同浏览器做出不同的反应，但这种方法也不是万能的，如果能有通用的跨浏览器方法，就尽可能避免浏览器检测和对象检测。

浏览器标志

$.browser
定义一组标志，用来显示当前的用户代理属于哪一个浏览器家族。
msie，如果用户代理标头是IE浏览器，则设置为true
mozilla，如果是基于Mozilla的浏览器，则设置为true
safari，如果是Safari或基于Safari的浏览器，则设置为true
opera，如果是Opera，则设置为true
version，设置为浏览器的引擎版本号

$(function(){    $('#testButton').click(function(event) {        var select = $('#testSubject')[0];        select.add(new Option('Two and \u00BD','2.5'),        $.browser.msie ? 2 : select.options[2]        );    });});

确定方框模型

$.boxModel
用于确定当前页面使用的是哪一个方框模型
如果使用的是W3C标准的方框模型，则设置为true
如果使用的是IE浏览器的方框模型，则设置为false

浮动样式

在style属性的浮动样式的命名上，不同浏览器之间存在差异。
$.styleFloat标志在IE浏览器里求值为styleFloat，在其他浏览器里为cssFloat。

和其他库一起使用jQuery

$.noConfilct()
归还$名称的控制权给另一个库，因此允许在页面上其他库与jQuery混用。
一旦这个函数被执行，jQuery功能就必须利用jQuery名称进行调用，而不能利用$名称。

var $j = jQuery;

另一个经常采取的方法是创建环境，在那里$名称的作用与被设定为引用jQuery对象。在扩展jQuery时经常使用这个技巧。

(function($){/*function body*/})(jQuery);

操作JavaScript对象和集合

实用工具函数被设计用来操作除DOM元素以外的JavaScript对象。

函数描述 trim(value) 删除前后的空白字符 each(container,callback) 对container内每一项进行迭代，对每一项调用传入的回调函数 grep(array,callback,invert) 对array的每个元素调用回调函数，并根据返回值决定是否把当前元素收集到新数组，invert被省略或设置为false时，返回值为true会收集当前元素 map(array,callback) 为array的每一个元素分别调用回调函数，并把回调函数的返回值收集到新数组 inArray(value,array) 返回已传入的值在数组里第一次出现时的下标 makeArray(object) 将传入的类似数组的对象（比如NodeList）转换为JS数组 unique(array) 传入DOM元素的数组，该函数就返回原始数组中的唯一元素所构成的数组

动态加载脚本

在大部分的时间里（可能几乎总是），当页面加载时都是通过<head>里的<script>标签从脚本文件加载页面所需的外部脚本。但有时候需要在脚本控制下动态地加载一些脚本。

$.getScript(url,callback)
向指定的服务器发起GET请求，获取url参数所指定的脚本。（可选）在成功后调用callback。
返回值是用于获取脚本的XHR（XMLHTTPRequest）实例

0 0