jQuery tool function learning materials

URL
字符串操作
数组和对象操作
测试操作
浏览器

1：URL操作：

$.param(obj)

返回：string；

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

示例：

var obj ={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，其它返回值将被忽略。

示例：

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

//result:

/*0 and 0
1 and 1
2 and 2
3 and 3
4 and 4
5 and 5I*/

(2):

$.extend(obj,default,option)

说明：

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

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

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

Copy after login

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

看一个完整的示例:

var empty = {} 
var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(empty, defaults, options);

Copy after login

/*result：

Copy after login

settings == { validate: true, limit: 5, name: "bar" } 
empty == { validate: true, limit: 5, name: "bar" }*/

Copy after login

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

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

Copy after login

上面的代码将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){ 
return n > 0; 
});

Copy after login

//results:[1,2]

(4).转换

jQuery.map( array, callback )

返回值:Array

说明:

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

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

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

示例：

var arr = [ "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) { return a + 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；

说明：测试是否为函数；

示例：

var fn =function（）{}；

alert($.isFunction(fn));

//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	已废除

$.support:

New in jQuery 1.3. A set of properties used to display the features and bugs of different browsers.

jQuery provides a series of attributes, and you can also add your own attributes freely. Many of these properties are very low-level, so it's hard to say whether they will remain effective over time, but these are mainly intended for plugin and kernel developers.

All of these supported attribute values are implemented via feature detection, rather than any browser detection. Here are some great resources explaining how these feature detections work:

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 mainly includes the following tests:

boxModel: equals true if this page and browser are rendered using the W3C CSS box model. Normally this value is false in quirks mode of IE 6 and IE 7. This value is null until the document is ready.

cssFloat: Returns true if cssFloat is used to access the CSS float value. Currently, false is returned in IE, and styleFloat is used instead.

hrefNormalized: Returns true if the browser returns the intact result from getAttribute("href"). In IE it will return false because its URLs have been normalized.

htmlSerialize: If the browser will serialize these links when inserting link elements through innerHTML, it will return true. Currently, IE returns false.

leadingWhitespace: Returns true if the browser will keep leading whitespace characters when using innerHTML, currently returns false in IE 6-8.

noCloneEvent: Returns true if the browser will not copy the event handler when cloning the element. Currently, it returns false in IE.

objectAll: true if executing getElementsByTagName("*") on an element object will return all descendant elements, currently false in IE 7.

opacity: Returns true if the browser can properly interpret the transparency style attribute, currently returns false in IE because it uses an alpha filter instead.

scriptEval: When using the appendChild/createTextNode method to insert script code, whether the browser executes the script, currently returns false in IE, and IE uses the .text method to insert script code for execution.

style: true if getAttribute("style") returns the element's inline style. Currently it is false in IE because it uses cssText instead.

tbody: Returns true if the browser allows table elements not to contain tbody elements. Currently, false is returned in IE, and it will automatically insert the missing tbody.

jQuery tool function learning materials_jquery

$.extend(obj,default,option)

(4).转换