jQuery 学习十四(工具函数)

●  jQuery.boxModel  

Javascript代码  

1. /** 
2.  * 当前页面中浏览器是否使用标准盒模型渲染页面。 
3.  *  
4.  * @return Boolean 标准盒模型为 true，否则为 false 
5.  * @owner jQuery Namaspace 
6.  */  
7.   
8. // 例子：在 Internet Explorer 怪癖模式(QuirksMode)中返回 false  
9. $.boxModel  

    ●  jQuery.browser  

Javascript代码  

1. /** 
2.  * 浏览器内核标识。依据 navigator.userAgent 判断。 
3.  * 可用值：safari, opera, msie, mozilla 
4.  * 
5.  * 此属性在 DOM 树加载完成前即有效，可用于为特定浏览器设置 ready 事件。 
6.  * 浏览器对象检测技术与此属性共同使用可提供可靠的浏览器检测支持。 
7.  *  
8.  * @return Map 
9.  * @owner jQuery Namaspace 
10.  */  
11.   
12. // 例子一：在 Microsoft's Internet Explorer 浏览器中返回 true。  
13. $.browser.msie  
14.   
15. // 例子二：仅在 Safari 中提示 "this is safari!" 。  
16. if ($.browser.safari) {  
17.    alert("this is safari!");  
18. }  

    ●  jQuery.browser.version  

Javascript代码  

1. /** 
2.  * 浏览器渲染引擎版本号。 
3.  *  
4.  * 典型结果:  
5.  * Internet Explorer: 6.0, 7.0 
6.  * Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3 
7.  * Opera: 9.20 
8.  * Safari/Webkit: 312.8, 418.9 
9.  *  
10.  * @return String 
11.  * @owner jQuery Namaspace 
12.  */  
13.   
14. // 例子：显示当前 IE 浏览器版本号。  
15. if ( $.browser.msie ) {  
16.   alert( $.browser.version );   
17. }  

    ●  jQuery.each(obj, callback)  

Javascript代码  

1. /** 
2.  * 通用遍历方法，可用于遍历对象和数组。不同于遍历 jQuery 对象的 $().each() 方法，此方法可用于遍历 
3.  * 任何对象。 
4.  * 
5.  * 回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。 
6.  * 如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。 
7.  *  
8.  * @obj(Object) 需要遍历的对象或数组 
9.  * @callback(Function) (可选) 每个成员/元素执行的回调函数  
10.  * @return Object 
11.  * @owner jQuery Namaspace 
12.  */  
13. jQuery.each(obj, callback);  
14.   
15. // 例子一：遍历数组，同时使用元素索引和内容。  
16. $.each( [0,1,2], function(i, n) {  
17.   alert( "Item #" + i + ": " + n );  
18. });  
19.   
20. // 例子二：遍历对象，同时使用成员名称和变量内容  
21. $.each( { name: "John", lang: "JS" }, function(i, n) {  
22.   alert( "Name: " + i + ", Value: " + n );  
23. });  

    ●  jQuery.extend(target, obj1, [objN])  

Javascript代码  

1. /** 
2.  * 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。用于简化继承。此方法也可以用来 
3.  * 扩展 jQuery 的系统函数。 
4.  *  
5.  * @target(Object) 待修改对象 
6.  * @obj1(Object) 待合并到第一个对象的对象 
7.  * @objN(Object) (可选) 待合并到第一个对象的对象 
8.  * @return Object 
9.  * @owner jQuery Namaspace 
10.  */  
11. jQuery.extend(target, obj1, [objN]);  
12.   
13. // 例子一：合并 settings 和 options，修改并返回 settings。  
14. var settings = { validate: false, limit: 5, name: "foo" };  
15. var options = { validate: true, name: "bar" };  
16. jQuery.extend(settings, options);  
17.   
18. result: settings == { validate: true, limit: 5, name: "bar" }  
19.   
20. // 例子二：合并 defaults 和 options, 不修改 defaults。  
21. var empty = {}  
22. var defaults = { validate: false, limit: 5, name: "foo" };  
23. var options = { validate: true, name: "bar" };  
24. var settings = jQuery.extend(empty, defaults, options);  
25.   
26. result: settings == { validate: true, limit: 5, name: "bar" }  
27.         empty    == { validate: true, limit: 5, name: "bar" }  
28.           
29. // 例子三：扩展 jQuery 的系统函数，添加一名为 "hello" 的系统函数。  
30. $.extend({  
31.     hello: function(str) {  
32.         return str + " hello"  
33.     }  
34. });  
35.   
36. 使用：$.hello("china") -> china hello  

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

Javascript代码  

1. /** 
2.  * 使用过滤函数过滤数组元素。 
3.  * 
4.  * 此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素 
5.  *  
6.  * @array(Array) 待过滤数组 
7.  * @callback(Function) 此函数将处理数组每个元素。第一个参数为当前元素，第二个参数为元素索引值。此函数 
8.  *                     应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为 
9.  *                     "lambda-form"(缩写形式 ?)，其中 a 代表数组元素，i 代表元素索引值。 
10.  *                     如 "a > 0" 代表 "function(a) { return a > 0; }"。 
11.  * @invert(Boolean) (可选) 如果 "invert" 为 false 或未设置，则函数返回数组中由过滤函数返回 
12.  *                  true 的 元素，当 "invert" 为 true，则返回过滤函数中返回 false 的元素集。 
13.  * @return Array 
14.  * @owner jQuery Namaspace 
15.  */  
16. jQuery.grep(array, callback, [invert]);  
17.   
18. // 例子一：过滤数组中小于 0 的元素。  
19. $.grep( [0, 1, 2], function(n, i) {  
20.   return n > 0;  
21. }); -> [1, 2]  
22.   
23. // 例子二：排除数组中大于 0 的元素，使用第三个参数进行反向选择。  
24. $.grep( [0, 1, 2], function(n, i) {  
25.   return n > 0;  
26. }, true); -> [0]  

    ●  jQuery.inArray(value, array)  

Javascript代码  

1. /** 
2.  * 确定第一个参数在数组中的位置(如果没有找到则返回 -1)。 
3.  *  
4.  * @value(Any) 用于在数组中查找是否存在的对象 
5.  * @array(Array) 待处理数组 
6.  * @return Integer 
7.  * @owner jQuery Namaspace 
8.  */  
9. jQuery.inArray(value, array);  
10.   
11. // 例子：删除重复 div 标签。  
12. var arr = [ 4, "Pete", 8, "John" ];  
13. jQuery.inArray("John", arr);  // 3  
14. jQuery.inArray(4, arr);  // 0  
15. jQuery.inArray("David", arr);  // -1  

    ●  jQuery.makeArray(obj)  

Javascript代码  

1. /** 
2.  * 将类数组对象转换为数组对象。 
3.  * 
4.  * 类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用 
5.  * 而无需特意转换。 
6.  *  
7.  * @obj(Object) 类数组对象 
8.  * @return Array 
9.  * @owner jQuery Namaspace 
10.  */  
11. jQuery.makeArray(obj);  
12.   
13. // 例子：  
14. <div>First</div>  
15. <div>Second</div>  
16. <div>Third</div>  
17. <div>Fourth</div>   
18.   
19. var arr = jQuery.makeArray(document.getElementsByTagName("div"));  
20. arr.reverse(); // 使用数组翻转函数  
21.   
22. Fourth  
23. Third  
24. Second  
25. First  

    ●  jQuery.map(array, callback)  

Javascript代码  

1. /** 
2.  * 将一个数组中的元素转换到另一个数组中。 
3.  * 
4.  * 作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。 
5.  * 转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组，并扩展至原始数组中。 
6.  * 
7.  * @array(Array) 待转换数组 
8.  * @callback(Function) 为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。 
9.  *                     函数可返回任何值。另外，此函数可设置为一个字符串，当设置为字符串时，将视 
10.  *                     为 "lambda-form"(缩写形式 ?)，其中 a 代表数组元素。如 "a * a" 代表 
11.  *                     function(a) { return a * a; }"。 
12.  * @return Array 
13.  * @owner jQuery Namaspace 
14.  */  
15. jQuery.map(array, callback);  
16.   
17. // 例子一：将原数组中每个元素加 4 转换为一个新数组。  
18. $.map( [0, 1, 2], function(n) {  
19.   return n + 4;  
20. }); -> [4, 5, 6]  
21.   
22. // 例子二：原数组中大于 0 的元素加 1，否则删除。  
23. $.map( [0, 1, 2], function(n) {  
24.   return n > 0 ? n + 1 : null;  
25. }); -> [2, 3]  
26.   
27. // 例子三：原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。   
28. $.map( [0, 1, 2], function(n) {  
29.   return [ n, n + 1 ];  
30. }); -> [0, 1, 1, 2, 2, 3]  

    ●  jQuery.unique(array)  

Javascript代码  

1. /** 
2.  * 删除数组中重复元素。 
3.  * 
4.  * @array(Array) 待转换数组 
5.  * @return jQuery Object 
6.  * @owner jQuery Namaspace 
7.  */  
8. jQuery.unique(array);  
9.   
10. // 例子：删除重复 div 标签。  
11. $.unique(document.getElementsByTagName("div")) -> [<div>, <div>, ...]  

    ●  jQuery.isFunction(obj)  

Javascript代码  

1. /** 
2.  * 测试对象是否为函数。 
3.  * 
4.  * @obj(Object) 用于测试是否为函数的对象 
5.  * @return Boolean 
6.  * @owner jQuery Namaspace 
7.  */  
8. jQuery.isFunction(obj);  
9.   
10. // 例子：检测是否为函数。  
11. function stub() {}  
12. var objs = [  
13.   function() {},  
14.   { x:15, y:20 },  
15.   null,  
16.   stub,  
17.   "function"  
18. ];  
19.   
20. jQuery.each(objs, function(i) {  
21.   var isFunc = jQuery.isFunction(objs[i]);  
22.   $("span:eq( " + i + ")").text(isFunc);  
23. }); -> [ true, false, false, true, false ]  

    ●  jQuery.trim(str)  

Javascript代码  

1. /** 
2.  * 去掉字符串起始和结尾的空格。 
3.  * 
4.  * @str(String) 需要处理的字符串 
5.  * @return Boolean 
6.  * @owner jQuery Namaspace 
7.  */  
8. jQuery.trim(str);  
9.   
10. // 例子：去掉字符串起始和结尾的空格。  
11. $.trim(" hello, how are you? ") -> "hello, how are you?"