jQuery之必知的工具函数.docx
- 文档编号:8050360
- 上传时间:2023-01-28
- 格式:DOCX
- 页数:17
- 大小:130.71KB
jQuery之必知的工具函数.docx
《jQuery之必知的工具函数.docx》由会员分享,可在线阅读,更多相关《jQuery之必知的工具函数.docx(17页珍藏版)》请在冰豆网上搜索。
jQuery之必知的工具函数
本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案,即使你会使用jQuery也能在阅读中发现些许秘籍.我们经常要使用脚本处理各种业务逻辑,最常见的就是数组和对象的操作.jQuery工具函数为我们操作对象和数组提供了便利条件。
大部分人仅仅使用jQuery的选择器选择对象,或者实现页面动画效果.在处理业务逻辑时常常自己编写很多算法.本文提醒各位jQuery也能提高我们操作对象和数组的效率.并且可以将一些常用算法扩充到jQuery工具函数中,实现脚本函数的复用.
51CTO推荐专题:
jQuery从入门到精通
一.什么是工具函数
工具函数是指在jQuery对象(即变量"$")上定义的函数.这些函数都是工具类函数.比如C#中最常用的trim()函数:
1.$.trim(" text ");
在原始javascript中并没有提供同时去除前后空格的trim函数.所以这一类常用的工具函数统称为"Utilities"函数.对应jQuery官方文档:
"$"其实是"window"对象的属性,所以下面几句话是等价的:
二.工具函数分类
工具函数主要分为下面几类:
◆浏览器及特性检测
◆数组和对象操作
◆测试操作
◆字符串操作
◆Url操作
区别于前几章的讲解方式,本文不在列举函数列表.大家在应用中,比如遇到想操作一个字符串,可以首先从在"API文档/Utilities/字符串操作"中查找是否已经提供了快捷的工具函数.如果没有再考虑自己开发.
下面使用实例具体的每个分类下常用的工具函数.
三.浏览器及特性检测
jQuery的优秀就在于其跨浏览器的特性,通常我们不用再针对不同浏览器书写不同的代码.但是如果是jQuery开发人员或者插件开发人员就要自行处理浏览器差异,以便为用户提供跨浏览器的特性.
jQuery提供了下列属性用于获取浏览器特性:
jQuery.support
1.3版本新增
jQuery.browser
已废除
jQuery.browser
已废除
jQuery.browser
已废除
在1.3版本中已经废除了三个属性,这里不再讲解.让我们将注意力放在jQuery.support函数上.
jQuery.support
返回值:
Object
说明:
jQuery1.3新增。
一组用于展示不同浏览器各自特性和bug的属性集合。
jQuery提供了一系列属性,你也可以自由增加你自己的属性。
其中许多属性是很低级的,所以很难说他们能否在日新月异的发展中一直保持有效,但这这些主要用于插件和内核开发者。
所有这些支持的属性值都通过特性检测来实现,而不是用任何浏览器检测。
以下有一些非常棒的资源用于解释这些特性检测是如何工作的:
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.
11.
显示效果如图:
在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 = "left"; //FF
jQuery.support.cssFloat属性返回true则表示可以使用cssFloat来设置float样式.IE中返回false;
注意,我们可以通过CSS()方法设置float样式,jQuery内部会自动帮我们判断是使用styleFloat还是cssFloat:
1.$("#divResult").css("float","left"); //兼容IE和FF
四.数组和对象操作
实现UI我们常常操作DOM对象或者jQuery包装集,但是实现算法或者业务逻辑时往往操作的是数组和对象.
下面讲解最常用的数组和对象相关的工具函数.
1.迭代
jQuery.each(object,callback)
返回值:
Object
说明:
通用例遍方法,可用于例遍对象和数组。
不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象。
回调函数拥有两个参数:
第一个为对象的成员或数组的索引,第二个为对应变量或内容。
如果需要退出each循环可使回调函数返回false,其它返回值将被忽略。
讲解:
对于jQuery包装集我们可以使用each(callback)方法迭代包装集中的每一个元素.callback是一个会函数,接受一个参数表示当前访问对象的索引.
1.$("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.{
3. alert("Item #" + i + ":
" + n);//可以获取到i值
4. if (i >= 1)
5. {
6. return false;
7. }
8.});
9.
10.
11.$("#iterateArray").click(function(event)
12.{
13.var array = $.each(["a", "b", "c"], function(i, n)
14.{
15. alert("Item #" + i + ":
" + n ); //第一个参数i表示索引, this表示当前遍历的对象
16. if (i >= 1)
17. {
18. return false;
19. }
20.});
21.});
22.
如果传递的是对象,则遍历对象的每一个属性,即使函数返回false也依然会遍历完所有的属性,第一个参数表示属性key(属性名称,是obejct类型),第二个参数表示值,,this表示当前属性的值:
1.$("#iterateObject").click(function(event)
2.{
3. $.each({ name:
"ziqiu.zhang", sex:
"male", status:
"single" }, function(i, n)
4. {
5. alert("Item #" + i.toString() + ":
" + n ); //第一个参数i表示属性的key(object), this表示属性值
6. if (i >= 1)
7. {
8. return false;
9. }
10. });
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){
2. return n > 0;
3.});
返回的结果是[1,2]
3.转换
jQuery.map(array,callback)
返回值:
Array
说明:
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。
转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。
讲解:
1.3.2版本中此函数和each函数已经几乎相同(以前稍有不同),现在唯一的区别就是回调函数可以改变当前元素.返回null则删除当前元素.
下面是几个例子:
1.var arr = [ "a", "b", "c", "d", "e" ]
2.$("div").text(arr.join(", "));
3.
4.arr = jQuery.map(arr, function(n, i){
5. return (n.toUpperCase() + i);
6.});
7.$("p").text(arr.join(", "));
8.
9.arr = jQuery.map(arr, function (a) { return a + a; });
10.$("span").text(arr.join(", "));
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:
5,name:
"bar"}
jQuery.makeArray(obj)
将类数组对象转换为数组对象。
类数组对象有length属性,其成员索引为0至length-1。
实际中此函数在jQuery中将自动使用而无需特意转换。
将DOM对象集合转换为数组:
vararr=jQuery.makeArray(document.getElementsByTagName("div"));
jQuery.inArray(value,array)
确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回-1)。
查看对应元素的位置:
vararr=[4,"Pete",8,"John"];
jQuery.inArray("John",arr);//3
jQuery.inArray(4,arr);//0
jQuery.inArray("David",arr);//-
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),将两个数组合并.下面这个示例说明如何使用此函数:
1.
//www.w3.org/1999/xhtml">
2.
3.
4.
5.
6.
7.
26.
27.
28.
29.
30. 合并数组
31.
32.
33.
34.
35.
结果如图:
另外不能因为有了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并作为函数返回值返回.
看一个完整的示例:
1.var empty = {}
2.var defaults = { validate:
false, limit:
5, name:
"foo" };
3.var options = { validate:
true, name:
"bar" };
4.var settings = jQuery.extend(empty, defaults, options);
结果:
settings=={validate:
true,limit:
5,name:
"bar"}
empty=={validate:
true,limit:
5,name:
"bar"}
target参数要传递一个空对象是因为target的值最后将被改变.比如:
1.var defaults = { validate:
false, limit:
5, name:
"foo" };
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 工具 函数
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1