提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery工具函数学习资料

jQuery工具学习 函数 资料
2023-06-13 09:14:18 时间
  • URL
  • 字符串操作
  • 数组和对象操作
  • 测试操作
  • 浏览器

1：URL操作：

$.param(obj)

返回：string；

说明：将jquery对象按照name/value或者key/value序列化为URL参数，用&连接。

示例：

varobj={name:zh,age:20};
alert(jQuery.param(obj));
//alert"name=zh&age=20";
 

2:字符串操作：

jQuery.trim(str)

返回：string；

说明：去掉字符串首尾空格。

示例：

alert($.trim("123"));
//alert"123";

3:数组和对象操作：

(1):

&.each(obj,callback)

说明：

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

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

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

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

示例：

vara=[0,1,2,3,4,5];
$.each(a,function(i,n){document.write(""+i+"and"+n+"<br/>");});

//result:

/*0and0
1and1
2and2
3and3
4and4
5and5I*/

 

(2):

$.extend(obj,default,option)

说明：

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

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

settings=$.extend({},$.fn.fancybox.defaults,settings);

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

看一个完整的示例:

varempty={}
vardefaults={validate:false,limit:5,name:"foo"};
varoptions={validate:true,name:"bar"};
varsettings=jQuery.extend(empty,defaults,options);
/*result：
settings=={validate:true,limit:5,name:"bar"}
empty=={validate:true,limit:5,name:"bar"}*/

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

vardefaults={validate:false,limit:5,name:"foo"};
varoptions={validate:true,name:"bar"};
varsettings=jQuery.extend(defaults,options);

上面的代码将defaults作为target参数, 虽然最后settings的结果一样,但是defaults的值被改变了!而插件中的默认值应该都是固定!所以使用时请注意target参数的用法.


(3):筛选

jQuery.grep(array,callback,[invert])

返回值:Array

说明:

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

此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回true以保留元素或false以删除元素。

讲解:

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

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

$.grep([0,1,2],function(n,i){
returnn>0;
});

//results:[1,2]

 

(4).转换

jQuery.map(array,callback)

返回值:Array

说明:

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

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

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

示例：

vararr=["a","b","c","d","e"]；

$("div").text(arr.join(","));

arr=jQuery.map(arr,function(n,i){return(n.toUpperCase()+i);});

$("p").text(arr.join(","));

arr=jQuery.map(arr,function(a){returna+a;});

alert(arr.join(","));

//alert A0A0,B1B1,C2C2,D3D3,E4E4

(5)

jQuery.makeArray(obj),jQuery.inArray(value,array),jQuery.merge(first,second),

jQuery.unique(array)就不再一一介绍了，

还有JavaScript的join（）和split（）方法也很重要。

4：测试操作:

(1):

$.isFunction(fn)

返回：Boolean；

说明：测试是否为函数；

示例：

varfn=function（）{}；

alert($.isFunction(fn));

//alerttrue;

(2):

$.isArray(obj);

返回：Boolean；

说明：测试是否为数组：

示例：略；

（3）：

JavaScript只带的isNan（）和isFinite（）：非数字和无穷大；

 

5：浏览器对象：

 

jQuery的优秀就在于其跨浏览器的特性,通常我们不用再针对不同浏览器书写不同的代码. 但是如果是jQuery开发人员或者插件开发人员就要自行处理浏览器差异,以便为用户提供跨浏览器的特性.

jQuery提供了下列属性用于获取浏览器特性:

jQuery.support

1.3后版本新增 jQuery.browser 已废除

jQuery.browser.version

已废除 jQuery.boxModel 已废除

$.support:

jQuery1.3新增。一组用于展示不同浏览器各自特性和bug的属性集合。

jQuery提供了一系列属性，你也可以自由增加你自己的属性。其中许多属性是很低级的，所以很难说他们能否在日新月异的发展中一直保持有效，但这这些主要用于插件和内核开发者。

所有这些支持的属性值都通过特性检测来实现，而不是用任何浏览器检测。以下有一些非常棒的资源用于解释这些特性检测是如何工作的：

  • http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
  • http://yura.thinkweb2.com/cft/
  • http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

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。

相关文章