jQuery之工具函数

简介:

jquery为我们提供了操作数组和对象的工具函数,方便和简化了我们对它们的操作。今天我们就进入jQuery的工具函数的复习。

  jQuery给我们提供了主要有5类工具函数:

$.param(obj)

返回 :string;

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

示例:

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

2:字符串操作:

jQuery.trim(str)

返回:string;

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

示例: 

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

3:数组和对象操作:

(1)

 
  1. &.each(obj,callback) 

说明:

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

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

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

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

示例:

 (2)

 
 
  1. var a =[0,1,2,3,4,5];   
  2. $.each(a,function(i,n){document.write(""+i+" and " +n +"<br/>");});  
  3.  
  4. //result:  
  5.  
  6. /*0 and 0   
  7. and 1   
  8. and 2   
  9. and 3   
  10. and 4   
  11. and 5I*/  
$.extend(obj,default,option)

说明:

在开发插件的时候最常用此函数函数来处理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: truename"bar" };  
  4. var settings = jQuery.extend(empty, defaults, options);/*result:settings == { validate: true, limit: 5, name"bar" }  
  5. empty == { validate: true, limit: 5, name"bar" }*/ 

 

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

 
 
  1. var defaults = { validate: false, limit: 5, name"foo" };  
  2. var options = { validate: truename"bar" };  
  3. var settings = 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 的元素:

 
  1. $.grep( [0,1,2], function(n,i){  
  2. return n > 0;  
  3. });   
  4. //results:[1,2]  
(4).转换
jQuery.map( array, callback )

返回值:Array

说明:

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

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

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

示例:

 
 
  1. var arr = [ "a""b""c""d""e" ] ;  
  2.  
  3. $("div").text(arr.join(", "));  
  4.  
  5. arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); });  
  6.  
  7. $("p").text(arr.join(", "));  
  8.  
  9. arr = jQuery.map(arr, function (a) { return a + a; });  
  10.  
  11. alert(arr.join(", "));  
  12.  
  13. //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;

说明:测试是否为函数;

示例:

 
 
  1. var fn =function(){};  
  2.  
  3. alert($.isFunction(fn));  
  4.  
  5. //alert true;  

(2):

$.isArray(obj);

返回:Boolean;

说明:测试是否为数组:

示例:略;

(3):

JavaScript只带的 isNan()和isFinite():非数字和无穷大;

5:浏览器对象:

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

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

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除
用于获取浏览器特性:

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除

jQuery.support

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

jQuery.browser.version

已废除
jQuery.boxModel 已废除

$.support:

jQuery 1.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: 如果这个页面和浏览器是以W3C CSS盒式模型来渲染的,则等于true。通常在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。

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

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

objectAll: 如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素,则为true,目前在IE 7中为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。

本博客中同类文章还有,请见:我jQuery系列之目录汇总







 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/834192,如需转载请自行联系原作者


相关文章
|
12月前
|
JSON JavaScript 前端开发
jQuery$工具方法和CSS的属性经及方法
jQuery$工具方法和CSS的属性经及方法
64 0
|
4月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
15天前
|
XML JSON JavaScript
jQuery 实用工具
jQuery 实用工具
21 2
|
2月前
|
JavaScript 前端开发
jQuery的作用及入口函数
jQuery的作用及入口函数
15 1
|
4月前
|
JavaScript 前端开发
jQuery 常用函数解析
jQuery 常用函数解析
|
4月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
|
5月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
5月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
5月前
|
JavaScript 索引
|
5月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
37 0