jQuery之必知的工具函数Word文档下载推荐.docx

jQuery之必知的工具函数Word文档下载推荐.docx

《jQuery之必知的工具函数Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《jQuery之必知的工具函数Word文档下载推荐.docx（17页珍藏版）》请在冰豆网上搜索。

所有这些支持的属性值都通过特性检测来实现，而不是用任何浏览器检测。

以下有一些非常棒的资源用于解释这些特性检测是如何工作的：

http:

//peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting

jQuery.support主要包括以下测试：

boxModel:

如果这个页面和浏览器是以W3CCSS盒式模型来渲染的，则等于true。

通常在IE6和IE7的怪癖模式中这个值是false。

在document准备就绪前，这个值是null。

cssFloat:

如果用cssFloat来访问CSS的float的值，则返回true。

目前在IE中会返回false,他用styleFloat代替。

hrefNormalized:

如果浏览器从getAttribute（"

href"

）返回的是原封不动的结果，则返回true。

在IE中会返回false，因为他的URLs已经常规化了。

htmlSerialize:

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

leadingWhitespace:

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

noCloneEvent:

如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在IE中返回false。

objectAll:

如果在某个元素对象上执行getElementsByTagName（"

*"

）会返回所有子孙元素，则为true，目前在IE7中为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。

讲解:

针对上面众多的浏览器特性属性,本文只讲解两个特性.

1.盒式模型boxModel

下图是W3C标准中的盒式模型图:

假设如下元素:

1.<

style 

type="

text/css"

>

2..boxModel 

3.{ 

4. 

width:

200px;

5. 

height:

50px;

6. 

padding:

10px;

7. 

border:

solid 

5px 

#FF0000;

8. 

background-color:

#acacac;

9.} 

10.<

/style>

11.<

div 

id="

divBox"

class="

boxModel"

显示效果如图:

在CSS中设定元素宽度为200px,下面以此元素为例讲解盒式模式.

W3C盒式模型:

元素的宽度和高度为盒式模型图中的Context部分,不包括padding,border和margin部分.

目前除了IE所有的浏览器都仅支持W3C盒式模型.在W3C盒式模型中,示例中包含红框在内的区域内容宽度为200+2*10+2*5=230px,高度为50+2*10+2*5=80px.

IE盒式模型:

设置的宽度包括padding,border.实际内容宽度contentWidth=width-padding–border

在IE5.5及更早的版本中,使用了此模型.在更高的IE版本上如果由于某些原因让浏览器运行在怪异模式下则也会使用此盒式模式.所以需要在页面上声明正确的DOCTYPE.有关DOCTYPE请参考此文:

下面是两种盒式模式的对比:

我们可以使用jQuery.support.boxModel属性来获取浏览器是否使用了W3C盒式模型.true表示使用W3CboxModel.

2.浮动样式

通过javascript脚本设置元素的float样式时,IE和FireFox存在不同,IE使用style.styleFloat,FireFox使用style.cssFloat:

1.div.style.styleFloat 

= 

left"

;

//IE 

2.div.stlye.cssFloat 

//FF 

jQuery.support.cssFloat属性返回true则表示可以使用cssFloat来设置float样式.IE中返回false;

注意,我们可以通过CSS（）方法设置float样式,jQuery内部会自动帮我们判断是使用styleFloat还是cssFloat:

1.$（"

#divResult"

）.css（"

float"

"

//兼容IE和FF 

四.数组和对象操作

实现UI我们常常操作DOM对象或者jQuery包装集,但是实现算法或者业务逻辑时往往操作的是数组和对象.

下面讲解最常用的数组和对象相关的工具函数.

1.迭代

jQuery.each（object,callback）

Object

通用例遍方法，可用于例遍对象和数组。

不同于例遍jQuery对象的$（）.each（）方法，此方法可用于例遍任何对象。

回调函数拥有两个参数：

第一个为对象的成员或数组的索引，第二个为对应变量或内容。

如果需要退出each循环可使回调函数返回false，其它返回值将被忽略。

对于jQuery包装集我们可以使用each（callback）方法迭代包装集中的每一个元素.callback是一个会函数,接受一个参数表示当前访问对象的索引.

img"

）.each（function（i）{ 

2. 

this.src 

test"

+ 

i 

.jpg"

3. 

}）;

对于数组我们可以使用jQuery.each（object,callback）来遍历,这等同于使用for循环.

注意传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一个对象.第一个参数表示索引,第二个参数表示值,this表示当前遍历的元素,可以通过返回false终止迭代,比如下面的示例遍历到第二个元素后会终止:

1.$.each（["

a"

b"

c"

], 

function（i, 

n） 

2.{ 

alert（"

Item 

#"

:

n）;

//可以获取到i值 

if 

（i 

1） 

{ 

return 

false;

} 

8.}）;

9. 

10. 

11.$（"

#iterateArray"

）.click（function（event） 

12.{ 

13.var 

array 

$.each（["

14.{ 

15. 

n 

//第一个参数i表示索引, 

this表示当前遍历的对象 

16. 

17. 

18. 

19. 

20.}）;

21.}）;

22. 

如果传递的是对象,则遍历对象的每一个属性,即使函数返回false也依然会遍历完所有的属性,第一个参数表示属性key（属性名称,是obejct类型）,第二个参数表示值,,this表示当前属性的值:

#iterateObject"

$.each（{ 

name:

ziqiu.zhang"

sex:

male"

status:

single"

}, 

i.toString（） 

//第一个参数i表示属性的key（object）, 

this表示属性值 

11.}）;

each将是我们最常使用的函数,特别注意each虽然迭代每一个元素或属性,但是在迭代函数中并不会改变当前元素的值,也就是无法改变返回后的对象.如果需要改变数组中的每一个元素并且将结果返回,因使用jQuery.map（array,callback）函数.

2.筛选

jQuery.grep（array,callback,[invert]）

Array

使用过滤函数过滤数组元素。

此函数至少传递两个参数：

待过滤数组和过滤函数。

过滤函数必须返回true以保留元素或false以删除元素。

默认invert为false,即过滤函数返回true为保留元素.如果设置invert为true,则过滤函数返回true为删除元素.

下面的示例演示如何过滤数组中索引小于0的元素:

1.$.grep（ 

[0,1,2], 

function（n,i）{ 

0;

3.}）;

返回的结果是[1,2]

3.转换

jQuery.map（array,callback）

Array

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。

转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

1.3.2版本中此函数和each函数已经几乎相同（以前稍有不同）,现在唯一的区别就是回调函数可以改变当前元素.返回null则删除当前元素.

下面是几个例子:

1.var 

arr 

[ 

d"

e"

] 

2.$（"

div"

）.text（arr.join（"

））;

4.arr 

jQuery.map（arr, 

function（n, 

i）{ 

（n.toUpperCase（） 

i）;

6.}）;

7.$（"

p"

9.arr 

function 

（a） 

{ 

a 

a;

10.$（"

span"

4.合并

合并对象是我们常常编写的功能,通常使用臃肿的for循环来进行.jQuery为我们提供了很多功能的合并函数:

名称

说明

举例

jQuery.extend（[deep],target,object1,[objectN]）

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。

这有助于插件作者为jQuery增加新方法。

如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。

否则的话，副本会与原对象共享结构。

为定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

合并settings和options，修改并返回settings:

varsettings={validate:

false,limit:

5,name:

"

foo"

};

varoptions={validate:

true,name:

bar"

jQuery.extend（settings,options）;

结果:

settings=={validate:

true,limit:

}

jQuery.makeArray（obj）

将类数组对象转换为数组对象。

类数组对象有length属性，其成员索引为0至length-1。

实际中此函数在jQuery中将自动使用而无需特意转换。

将DOM对象集合转换为数组:

vararr=jQuery.makeArray（document.getElementsByTagName（"

jQuery.inArray（value,array）

确定第一个参数在数组中的位置，从0开始计数（如果没有找到则返回-1）。

查看对应元素的位置:

vararr=[4,"

Pete"

8,"

John"

];

jQuery.inArray（"

arr）;

//3

jQuery.inArray（4,arr）;

//0

David"

//-

jQuery.merge（first,second）

合并两个数组

返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。

要去除重复项，请使用$.unique（）

合并两个数组到第一个数组上:

$.merge（[0,1,2],[2,3,4]）

[0,1,2,2,3,4]

jQuery.unique（array）

删除数组中重复元素。

只处理删除DOM元素数组，而不能处理字符串或者数字数组。

删除重复div标签:

$.unique（document.getElementsByTagName（"

[<

div>

<

...]

上面的函数看着有些混乱.看看我们以后会常用的.

首先是jQuery.merge（first,second）,将两个数组合并.下面这个示例说明如何使用此函数:

html 

xmlns="

//www.w3.org/1999/xhtml"

2.<

head>

<

title>

jQuery 

Utilities 

- 

jQuery.merge<

/title>

script 

src="

../scripts/jquery-1.3.2-vsdoc2.js"

text/javascript"

/script>

$（function（） 

$（"

#go"

11. 

12. 

）.html（"

13. 

var 

first 

[1, 

3, 

5];

14. 

）.append（"

span>

first:

["

first.join（"

） 

]<

/span>

br/>

second 

[2, 

4, 

6];

second:

second.join（"

result 

$.merge（first, 

second）;

result:

result.join（"

after 

merged:

20. 

21. 

23. 

24. 

25. 

26. 

27.<

/head>

28.<

body>

29. 

button 

go"

30. 

合并数组<

/button>

31. 

br 

/>

32. 

divResult"

33. 

/div>

34.<

/body>

35.<

/html>

结果如图:

另外不能因为有了jQuery就忘记我们的原始javascript.比merge更常用的其实是join和split函数.

merge函数会改变第一个合并的数组,如果是我设计我就不会这么做.因为返回值已经是合并后的数组了.如此设计让函数产生歧义.

列表中的那么多函数不再一一讲解.先用先查.除了jQuery.extend这个不得不提的函数.下面单提一个小结讲解.

5.jQuery.extend

在开发插件的时候最常用此函数函数来处理options.

下面是fancybox插件获取options的代码:

1.settings 

$.extend（{}, 

$.fn.fancybox.defaults, 

settings）;

上面的代码target是一个空对象,将默认设置defaults作为第一个对象,将用户传入的设置setting合并到default上,setting上有的属性以setting为准.setting没有传入的属性则使用default的默认值.然后将合并的结果复制给target并作为函数返回值返回.

看一个完整的示例:

empty 

{} 

2.var 

defaults 

validate:

false, 

limit:

5, 

};

3.var 

options 

true, 

4.var 

settings 

jQuery.extend（empty, 

defaults, 

options）;

empty=={validate:

target参数要传递一个空对象是因为target的值最后将被改变.比如: