jQuery基础之七 -- 工具函数

转载：http://blog.csdn.net/zzq58157383/article/details/7691835

浏览器及特性检测

$.support

[java] view plaincopyprint?
  1. $.support主要包括以下测试：  
  2. boxModel:  如果这个页面和浏览器是以W3C CSS盒式模型来渲染的，则等于true。通常在IE 6和IE 7的怪癖模式中这个值是false。在document准备就绪前，这个值是null。   
  3. cssFloat:   如果用cssFloat来访问CSS的float的值，则返回true。目前在IE中会返回false,他用styleFloat代替。  
  4. hrefNormalized:   如果浏览器从getAttribute("href")返回的是原封不动的结果，则返回true。在IE中会返回false，因为他的URLs已经常规化了。   
  5. htmlSerialize:       如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接，则返回true，目前IE中返回false。  
  6. leadingWhitespace:  如果在使用innerHTML的时候浏览器会保持前导空白字符，则返回true，目前在IE 6-8中返回false。  
  7. noCloneEvent:            如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在IE中返回false。  
  8. objectAll:     如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素，则为true，目前在IE 7中为false。  
  9. opacity:        如果浏览器能适当解释透明度样式属性，则返回true，目前在IE中返回false，因为他用alpha滤镜代替。  
  10. scriptEval:  使用 appendChild/createTextNode 方法插入脚本代码时，浏览器是否执行脚本，目前在IE中返回false，IE使用 .text 方法插入脚本代码以执行。  
  11. style:            如果getAttribute("style")返回元素的行内样式，则为true。目前IE中为false，因为他用cssText代替。  
  12. tbody:          如果浏览器允许table元素不包含tbody元素，则返回true。目前在IE中会返回false，他会自动插入缺失的tbody。  
  13.   
  14. 例如： jQuery.support.boxModel  //检测浏览器是否支持盒式模型  

 $.browser

[java] view plaincopyprint?
  1. 可用值: safari, opera, msie, mozilla 此属性在 DOM 树加载完成前即有效，可用于为特定浏览器设置 ready 事件  
  2. $.browser.msie   //在 Microsoft's Internet Explorer 浏览器中返回 true。  
  3. if ($.browser.safari) {alert("this is safari!");}   //仅在 Safari 中提示 "this is safari!" 。  

 $.browser.version 

[java] view plaincopyprint?
  1. if ( $.browser.msie )  alert( $.browser.version );    //显示当前 IE 浏览器版本号。  

$.boxModel

[java] view plaincopyprint?
  1. 当前页面中浏览器是否使用标准盒模型渲染页面。 建议使用 jQuery.support.boxModel 代替,在 Internet Explorer 怪癖模式（QuirksMode）中返回 False。  

数组和对象操作

$.each(object, [callback])

[java] view plaincopyprint?
  1. 通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。  
  2. $.each( [0,1,2], function(i, n){  
  3.     alert( "Item #" + i + ": " + n );  
  4. });  
  5.   
  6. $.each( { name: "John", lang: "JS" }, function(i, n){  
  7.     alert( "Name: " + i + ", Value: " + n );  
  8. });  

$.extend([deep], target, object1, [objectN])

[java] view plaincopyprint?
  1. 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。  
  2. 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。  
  3. 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。  
  4.   
  5. var settings = { validate: false, limit: 5, name: "foo" };  
  6. var options = { validate: true, name: "bar" };  
  7. $.extend(settings, options);   //合并 settings 和 options，修改并返回settings， { validate: true, limit: 5, name: "bar" }  
  8.   
  9. var empty = {};  
  10. var defaults = { validate: false, limit: 5, name: "foo" };  
  11. var options = { validate: true, name: "bar" };  
  12. var settings = $.extend(empty, defaults, options); //合并 defaults 和 options, 不修改 defaults。  
  13.   
  14. 结果：  
  15. settings == { validate: true, limit: 5, name: "bar" }  
  16. empty == { validate: true, limit: 5, name: "bar" }  
  17.   
  18. jQuery.extend({  
  19.   min: function(a, b) { return a < b ? a : b; },  
  20.   max: function(a, b) { return a > b ? a : b; }  
  21. });  
  22. jQuery.min(2,3); // => 2  
  23. jQuery.max(4,5); // => 5  

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

[java] view plaincopyprint?
  1. 使用过滤函数过滤数组元素。此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。  
  2. 如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。  
  3. $.grep( [0,1,2], function(n,i){  
  4.    return n > 0;  
  5. });   //过滤数组中小于 0 的元素。 [1, 2]  
  6.   
  7. $.grep( [0,1,2], function(n,i){  
  8.    return n > 0;  
  9. }, true);  //排除数组中大于 0 的元素，使用第三个参数进行排除。[0]  

$.makeArray(obj)

[java] view plaincopyprint?
  1. 将类数组对象转换为数组对象。  
  2. var arr = $.makeArray(document.getElementsByTagName("div"));  
  3. arr.reverse(); // 使用数组翻转函数  

$.map(array, callback)

[java] view plaincopyprint?
  1. 将一个数组中的元素转换到另一个数组中。  
  2. $.map( [0,1,2], function(n){  
  3.      return n + 4;  
  4. });  //将原数组中每个元素加 4 转换为一个新数组。 [4, 5, 6]  
  5.   
  6. $.map( [0,1,2], function(n){  
  7.      return n > 0 ? n + 1 : null;    
  8. });   //原数组中大于 0 的元素加 1 ，否则删除。[2, 3]  
  9.   
  10. $.map( [0,1,2], function(n){  
  11.      return [ n, n + 1 ];  
  12. });  //原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。[0, 1, 1, 2, 2, 3]  

$.inArray(value, array)

[java] view plaincopyprint?
  1. 确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。  
  2. var arr = [ 4, "Pete", 8, "John" ];  
  3. jQuery.inArray("John", arr);    //3  
  4. jQuery.inArray(4, arr);     //0  
  5. jQuery.inArray("David", arr);    //-1  

$.toArray()

[java] view plaincopyprint?
  1. 把jQuery集合中所有DOM元素恢复成一个数组。  
  2. alert($('li').toArray());   //得到所有li的元素数组  

$.merge(first, second)

[java] view plaincopyprint?
  1. 合并两个数组,返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()  
  2. $.merge( [0,1,2], [2,3,4] ) //合并两个数组到第一个数组上。[0,1,2,2,3,4]  

$.unique(array)

[java] view plaincopyprint?
  1. 删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。  
  2. $.unique(document.getElementsByTagName("div"));   //删除重复 div 标签。  

$.parseJSON(json)

 

[java] view plaincopyprint?
  1. 接受一个JSON字符串，返回解析后的对象。传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串：  
  2. {test: 1} （ test 没有包围双引号）  
  3. {'test': 1} （使用了单引号而不是双引号）  
  4. 另外，如果你什么都不传入，或者一个空字符串、null或undefined，parseJSON都会返回 null 。  
  5. var obj = jQuery.parseJSON('{"name":"John"}');  
  6. alert( obj.name === "John" );   //解析一个JSON字符串  

函数操作

$.noop  一个空函数

$.proxy(function, scope)  返回一个新函数，并且这个函数始终保持了特定的作用域

[java] view plaincopyprint?
  1. var obj = {  
  2.     name: "John",  
  3.     test: function() {  
  4.     alert( this.name );  
  5.         $("#test").unbind("click", obj.test);  
  6.     }  
  7. };  
  8.   
  9. $("#test").click( jQuery.proxy( obj, "test" ) );  
  10.   
  11. // 以下代码跟上面那句是等价的:  
  12. // $("#test").click( jQuery.proxy( obj.test, obj ) );  
  13.   
  14. // 可以与单独执行下面这句做个比较。  
  15. // $("#test").click( obj.test );  

测试操作

 

$.contains(container, contained)

[java] view plaincopyprint?
  1. 一个DOM节点是否包含另一个DOM节点,container 作为容器，可以包含其他元素,contained 可能被其他元素所包含  
  2. 检测一个元素是否包含另一个元素  
  3. $.contains(document.documentElement, document.body);   // true  
  4. $.contains(document.body, document.documentElement);   // false  

$.isArray(obj)  用于测试对象是否为数组

$.isFunction(obj)  用于测试对象是否为函数

$.isEmptyObject(obj)  测试是否为空对

[java] view plaincopyprint?
  1. $.isEmptyObject({}) // true   
  2. $.isEmptyObject({ foo: "bar" }) // false  

$.isPlainObject(obj)   用于测试是否为纯粹的对象

[java] view plaincopyprint?
  1. $.isPlainObject({}) // true  
  2. $.isPlainObject("test") // false  

 

字符串操作

$.trim(str)

[java] view plaincopyprint?
  1. 去掉字符串起始和结尾的空格。  
  2. $.trim(" hello, how are you? ");       //"hello, how are you?"  

URL

$.param(obj, [traditional])

[java] view plaincopyprint?
  1. 将表单元素数组或者对象序列化。是.serialize()的核心方法。  
  2. obj   数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。  
  3. traditional  是否使用传统的方式浅层序列化。  
  4.   
  5. var params = { width:1680, height:1050 };  
  6. var str = $.param(params);      //按照key/value对序列化普通对象。  
  7. $("#results").text(str);       //width=1680&height=1050  
  8.   
  9. 对比两种序列化方式  
  10. var myObject = {  
  11.     a: {  
  12.         one: 1,   
  13.         two: 2,   
  14.         three: 3  
  15.     },   
  16.     b: [1,2,3]  
  17.     };  
  18. var recursiveEncoded = $.param(myObject);  
  19. var recursiveDecoded = decodeURIComponent($.param(myObject));  
  20.   
  21. alert(recursiveEncoded);  //a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3  
  22. alert(recursiveDecoded);  //a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=  
  23.   
  24. var shallowEncoded = $.param(myObject, true);  
  25. var shallowDecoded = decodeURIComponent(shallowEncoded);  
  26.   
  27. alert(shallowEncoded);   //a=%5Bobject+Object%5D&b=1&b=2&b=3  
  28. alert(shallowDecoded);   //a=[object+Object]&b=1&b=2&b=3  

插件编写

$.error(message)

[java] view plaincopyprint?
    1. 接受一个字符串，并且直接抛出一个包含这个字符串的异常。  
    2. $.error = console.error;     //重载jQuery.error，以便可以在Firebug里显示  

posted on 2014-04-28 16:36  pcshell  阅读(194)  评论(0)  编辑  收藏  举报

导航