jQuery入门到精通第9章jQuery工具函数Word文档格式.docx

1、jQuery的优秀就在于其跨浏览器的特性, 通常我们不用再针对不同浏览器书写不同的代码. 但是如果是jQuery开发人员或者插件开发人员就要自行处理浏览器差异, 以便为用户提供跨浏览器的特性.jQuery提供了下列属性用于获取浏览器特性:jQuery.support1.3版本新增jQuery.browser已废除jQuery.browser.versionjQuery.boxModel在1.3版本中已经废除了三个属性, 这里不再讲解. 让我们将注意力放在 jQuery.support 函数上.返回值: Object说明:jQuery 1.3 新增。一组用于展示不同浏览器各自特性和bug的属性集

2、合。jQuery提供了一系列属性，你也可以自由增加你自己的属性。其中许多属性是很低级的，所以很难说他们能否在日新月异的发展中一直保持有效，但这这些主要用于插件和内核开发者。 所有这些支持的属性值都通过特性检测来实现，而不是用任何浏览器检测。以下有一些非常棒的资源用于解释这些特性检测是如何工作的： http:/peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting jQuery.support主要包括以下测试：boxModel: 如果这个页面和浏览器是以W3C CSS盒式模型来渲染的，则等于tr

3、ue。通常在IE 6和IE 7的怪癖模式中这个值是false。在document准备就绪前，这个值是null。cssFloat: 如果用cssFloat来访问CSS的float的值，则返回true。目前在IE中会返回false,他用styleFloat代替。hrefNormalized: 如果浏览器从getAttribute（href）返回的是原封不动的结果，则返回true。在IE中会返回false，因为他的URLs已经常规化了。htmlSerialize: 如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接，则返回true，目前IE中返回false。leadingWhites

4、pace: 如果在使用innerHTML的时候浏览器会保持前导空白字符，则返回true，目前在IE 6-8中返回false。noCloneEvent: 如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在IE中返回false。objectAll: 如果在某个元素对象上执行getElementsByTagName（*）会返回所有子孙元素，则为true，目前在IE 7中为false。opacity: 如果浏览器能适当解释透明度样式属性，则返回true，目前在IE中返回false，因为他用alpha滤镜代替。scriptEval: 使用 appendChild/create

5、TextNode 方法插入脚本代码时，浏览器是否执行脚本，目前在IE中返回false，IE使用 .text 方法插入脚本代码以执行。style: 如果getAttribute（style）返回元素的行内样式，则为true。目前IE中为false，因为他用cssText代替。tbody: 如果浏览器允许table元素不包含tbody元素，则返回true。目前在IE中会返回false，他会自动插入缺失的tbody。讲解:针对上面众多的浏览器特性属性, 本文只讲解两个特性. 1.盒式模型 boxModel下图是W3C标准中的盒式模型图:假设如下元素:.boxModel width:200px; he

6、ight:50px; padding:10px; border:solid 5px #FF0000; background-color:#acacac;/stylediv id=divBox class=boxModel显示效果如图:在CSS中设定元素宽度为200px, 下面以此元素为例讲解盒式模式.W3C 盒式模型:元素的宽度和高度为盒式模型图中的Context部分, 不包括padding, border和margin部分.目前除了IE所有的浏览器都仅支持W3C盒式模型. 在W3C盒式模型中, 示例中包含红框在内的区域内容宽度为200+2*10+2*5=230px, 高度为50+2*10+2

7、*5=80px.IE 盒式模型:设置的宽度包括padding,border. 实际内容宽度content Width = width - padding border在IE5.5及更早的版本中, 使用了此模型. 在更高的IE版本上如果由于某些原因让浏览器运行在怪异模式下则也会使用此盒式模式.所以需要在页面上声明正确的DOCTYPE. 有关DOCTYPE请参考此文:下面是两种盒式模式的对比:我们可以使用 jQuery.support.boxModel 属性来获取浏览器是否使用了W3C盒式模型. true表示使用W3C boxModel.2.浮动样式通过javascript脚本设置元素的float

8、样式时, IE和FireFox存在不同, IE使用style.styleFloat, FireFox使用style.cssFloat:div.style.styleFloat = left; /IEdiv.stlye.cssFloat = /FFjQuery.support.cssFloat 属性返回true则表示可以使用cssFloat来设置float样式. IE中返回false;注意, 我们可以通过CSS（）方法设置float样式, jQuery内部会自动帮我们判断是使用styleFloat还是cssFloat:$（#divResult）.css（float, /兼容IE和FF六.数组和对

9、象操作实现UI我们常常操作DOM对象或者jQuery包装集, 但是实现算法或者业务逻辑时往往操作的是数组和对象.下面讲解最常用的数组和对象相关的工具函数.1.迭代jQuery.each（ object, callback ）Object通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $（）.each（） 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。对于jQuery包装集我们可以使用each（callback）方法迭代包装集中的每一

10、个元素. callback是一个会函数, 接受一个参数表示当前访问对象的索引.img）.each（function（i） this.src = test + i + .jpg ）;对于数组我们可以使用 jQuery.each（ object, callback ） 来遍历, 这等同于使用for循环.注意传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一个对象. 第一个参数表示索引,第二个参数表示值, this表示当前遍历的元素, 可以通过返回false终止迭代, 比如下面的示例遍历到第二个元素后会终止: $.each（a, bc, function（i, n） alert（Ite

11、m #: + n）;/可以获取到i值 if （i = 1） return false; $（#iterateArray）.click（function（event） var array = $.each（ + n ）; /第一个参数i表示索引, this表示当前遍历的对象如果传递的是对象, 则遍历对象的每一个属性, 即使函数返回false也依然会遍历完所有的属性, 第一个参数表示属性key（属性名称,是obejct类型）,第二个参数表示值,this表示当前属性的值:#iterateObject $.each（ name:ziqiu.zhang, sex:male, status:single

12、, function（i, n） + i.toString（） + /第一个参数i表示属性的key（object）, this表示属性值each将是我们最常使用的函数, 特别注意each虽然迭代每一个元素或属性, 但是在迭代函数中并不会改变当前元素的值, 也就是无法改变返回后的对象.如果需要改变数组中的每一个元素并且将结果返回, 因使用jQuery.map（ array, callback ）函数.2.筛选jQuery.grep（ array, callback, invert ） Array使用过滤函数过滤数组元素。此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以

13、保留元素或 false 以删除元素。默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.下面的示例演示如何过滤数组中索引小于 0 的元素:$.grep（ 0,1,2, function（n,i） return n 0;）;返回的结果是1,23.转换jQuery.map（ array, callback ）Array将一个数组中的元素转换到另一个数组中。作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值

14、的数组，并扩展至原始数组中。1.3.2版本中此函数和each函数已经几乎相同（以前稍有不同）, 现在唯一的区别就是回调函数可以改变当前元素.返回null则删除当前元素.下面是几个例子: var arr = de div）.text（arr.join（）; arr = jQuery.map（arr, function（n, i） return （n.toUpperCase（） + i）;p arr = jQuery.map（arr, function （a） return a + a;span4.合并合并对象是我们常常编写的功能, 通常使用臃肿的for循环来进行.jQuery为我们提供了很多功能

15、的合并函数:名称说明举例jQuery.extend（ deep, target, object1, objectN ）用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。为定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。合并 settings 和 options，修改并返回 settings:var settings = validate: false

16、, limit: 5, name:foo ;var options = validate: true, name:barjQuery.extend（settings, options）;结果:settings = validate: true, limit: jQuery.makeArray（ obj ）将类数组对象转换为数组对象。类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。将DOM对象集合转换为数组:var arr = jQuery.makeArray（document.getElementsByTa

17、gName（jQuery.inArray（ value, array ）确定第一个参数在数组中的位置，从0开始计数（如果没有找到则返回 -1 ）。查看对应元素的位置:var arr = 4, Pete, 8, John ;jQuery.inArray（, arr）; /3jQuery.inArray（4, arr）; /0David /-1jQuery.merge（ first, second ）合并两个数组返回的结果会修改第一个数组的内容第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique（）合并两个数组到第一个数组上:$.merge（ 0,1,2, 2,3,4 ）

18、 0,1,2,2,3,4jQuery.unique（ array ）删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。删除重复 div 标签:$.unique（document.getElementsByTagName（, jQuery Utilities - jQuery.mergescript src=./scripts/jquery-1.3.2-vsdoc2.js type=text/javascript/scriptscript type= $（function（）#go）.html（ var first = 1, 3, 5;）.append（spanfirs

19、t: + first.join（） + br/ var second = 2, 4, 6;second: + second.join（ var result = $.merge（first, second）;result: + result.join（first after merged:second after merged:/headbodybutton id=go 合并数组br /divResult/div/body/html结果如图:另外不能因为有了jQuery就忘记我们的原始javascript. 比merge更常用的其实是join和split函数.merge函数会改变第一个合并的数

20、组, 如果是我设计我就不会这么做. 因为返回值已经是合并后的数组了.如此设计让函数产生歧义. 列表中的那么多函数不再一一讲解. 先用先查. 除了 jQuery.extend 这个不得不提的函数. 下面单提一个小结讲解.5. jQuery.extend在开发插件的时候最常用此函数函数来处理options.下面是fancybox插件获取options的代码:settings = $.extend（, $.fn.fancybox.defaults, settings）;上面的代码target是一个空对象, 将默认设置defaults作为第一个对象, 将用户传入的设置setting合并到default

21、上, setting上有的属性以setting为准. setting没有传入的属性则使用default的默认值. 然后将合并的结果复制给target并作为函数返回值返回.看一个完整的示例:var empty = var defaults = validate:var settings = jQuery.extend（empty, defaults, options）;empty = validate:target参数要传递一个空对象是因为target的值最后将被改变.比如:var settings = jQuery.extend（defaults, options）;上面的代码将defaults作为target参数, 虽然最后settings的结果一样, 但是defaults的值被改变了! 而插件中的默认值应该都是固定! 所以使用时请注意target参数的用法.下面是我的完整示例和结果:jQuery Utilities - jQuery.extend 0） result += result += i.toString（） + + n.toString（）; counter+; result += return re