jQuery基础9-工具函数

版权声明:作者:shenroom 来源:CSDN 版权声明:本文为博主原创文章,转载请附上博文链接! https://blog.csdn.net/qq_41772754/article/details/88085891

1.字符串

   $.trim(str) 去掉字符串起始和结尾的空格。
   $.param(obj,boolean) 将表单元素数组或者对象序列化。是.serialize()的核心方法。

var a=$.trim("   a  bc   ");       //a="a  bc";

var arr=[1,2,3];
var obj={a:1,b:2,"中":3};

var x1=$.param(arr);            //x1="undefined=&undefined=&undefined="
var x2=$.param(obj);            //x2="a=1&b=2&%E4%B8%AD=3"  ( %E4%B8%AD 即"中" )

var y=decodeURIComponent(x2);        // decodeURIComponent()解析URL编码
console.log(y);                                //y="a=1&b=2&中=3"

var s= { name:{one:1,two:2}, age:[20,22] };

var a1=$.param(s);                      //a1="name%5Bone%5D=1&name%5Btwo%5D=2&age%5B%5D=20&age%5B%5D=22"
var a2=decodeURIComponent(a1);     //a2="name[one]=1&name[two]=2&age[]=20&age[]=22"

 //使用传统的方式浅层序列化
var a3=$.param(s,true);                    //a3="name=%5Bobject+Object%5D&age=20&age=22"
var a4=decodeURIComponent(a3);       //a4="name=[object+Object]&age=20&age=22"

2.数组和对象操作

   $.each(object,[callback])          //   通用例遍方法,可用于例遍对象和数组。
   $.extend([d],tgt,obj1,[objN])      //   合并多个对象。
   $.grep(array,fn,[invert])         //   使用过滤函数过滤数组元素。
   $.when(deferreds)                //   提供一种方法来执行一个或多个对象的回调函数,延迟对象通常表示异步事件。
   $.makeArray(obj)                //   将类数组对象转换为数组对象。
   $.map(arr|obj,callback)        //   将一个数组中的元素转换到另一个数组中。
   $.inArray(val,arr,[from])       //   确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )。
   $.toArray()                     //   把jQuery集合中所有DOM元素恢复成一个数组。
   $.merge(first,second)           //   合并两个数组。
   $.unique(array)                //   删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。
   $.parseJSON(json)               //   接受一个JSON字符串,返回解析后的对象。
   $.parseXML(data)                //   解析一个字符串到一个XML文件。

$.each([1,2,3],function(i,n){       //i是位置下标,n是数组元素
    console.log(i+":"+n);
})

$.each({a:1,b:2},function(i,n){     //i是属性,n是属性值
    console.log(i+":"+n);
})

var obj1 = {};                                //后面对象都合并到第一个对象中
var obj2 = { a: false, b: 5, c: "foo" };
var obj3 = { a: true, c: "bar" };             //后面对象元素会覆盖前面对象中相同的元素 
var set = $.extend(obj1, obj2, obj3);
// 结果:
//  obj1 = { a: true, b: 5, c: "bar" };
//  set = { a: true, b: 5, c: "bar" };

//过滤数组中小于 0 的元素
var a1=$.grep( [0,1,2], function(n,i){     //n是数组元素,i是该元素对应下标值
    return n > 0;  
});                                        //a1=[1,2]

//排除数组中大于 0 的元素,使用第三个参数进行排除
var a2=$.grep( [0,1,2], function(n,i){
    return n > 0;
}, true);                                    //a2=[0]

$.when({a:1},{a:2}).done(function(x1,x2){   //x1,x2对应参数中的对象
   alert(x1.a+x2.a);                        //3
});

//将类数组对象转换为数组对象
var arr = $.makeArray(document.getElementsByTagName("div"));
arr.reverse();         // 使用数组翻转函数,颠倒元素顺序

//将原数组中每个元素加 3 转换为一个新数组。
var a3=$.map( [0,1,2], function(n,i){              //n是数组中的元素,i(不用时可省略)是该元素对应下标位置
  return n + i;                                    //a3=[3,4,5]
});

//原数组中大于 0 的元素加 1 ,否则删除
var a4=$.map( [0,1,2], function(n){                //a4=[2,3]
  return n > 0 ? n + 1 : null;
}); 

//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组
var a5=$.map( [0,1,2], function(n){              
  return [ n, n + 1 ];                             //a5=[0, 1, 1, 2, 2, 3]
});

var arr = [ 4, "Pete", 8, "John" ];
$.inArray("John", arr);        //3
$.inArray(4, arr);             //0
$.inArray("David", arr);       //-1    (没有找到返回-1)
$.inArray("Pete", arr, 2);     //-1    (从下标[2]开始查找)

//得到所有li的元素数组
var a6=$('li').toArray();            //a6=[<li id="foo">, <li id="bar">]

//合并两个数组到第一个数组上
var arr1=[0,1,2];
var arr2=[2,3,4];
var arr=$.merge(arr1, arr2);         //arr = [0,1,2,2,3,4]
console.log(arr1);                   //arr1 = [0,1,2,2,3,4]   

//删除重复 div 标签
$.unique(document.getElementsByTagName("div"));

//解析一个JSON字符串,注:传入一个畸形的JSON字符串时会抛出一个异常。
//{test: 1}   畸形( test 没有包围双引号)
//{'test': 1} 畸形(使用了单引号而不是双引号)
var a7=$.parseJSON('{"name":"John"}');    //a7={name: "John"}

//用来解析的格式良好的XML字符串
var xml = '<rss version="2.0"><channel><title>RSS Title</title></channel></rss>',
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find('title');          
console.log($title.text())         //"RSS Title"

3.函数操作 

   $.noop一个空函数,                   //   (当仅仅想要传递一个空函数的时候使用)
   $.proxy(function,context)           //   返回一个新函数,并且这个函数始终保持了特定的作用域。

var obj = {
    name: "John",
    test: function() { alert( this.name ); }
};
//点击#box,执行test()。下面2种方式等价:
$("#box").click( $.proxy(obj.test, obj));      //将函数 obj.test 中的 this 指向 obj
$("#box").click( $.proxy( obj, "test" ) );     //结果都弹出:"John"

4. 浏览器及特性检测

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


//检测浏览器是否支持盒式模型
var a=$.support.boxModel;     //若支持则为 true

//显示当前 IE 浏览器版本号。1.3中不建议使用。浏览器渲染引擎版本号。
if ( $.browser.msie ){ alert( $.browser.version ); }

5.测试操作 

   $.contains(c,c)          //   一个DOM节点是否包含另一个DOM节点。
   $.type(obj)              //   检测obj的数据类型。
   $.isArray(obj)            //   jQuery 1.3 新增。测试对象是否为数组。
   $.isFunction(obj)         //   测试对象是否为函数。
   $.isEmptyObject(obj)       //   jQuery 1.4 新增。测试对象是否是空对象(不包含任何属性)。
   $.isPlainObject(obj)       //   测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)。
   $.isWindow(obj)            //   测试对象是否是窗口(有可能是Frame)。
   $.isNumeric(value)         //   1.7+确定它的参数是否是一个数字。

//检测一个元素是否包含另一个元素
$.contains(document.documentElement, document.body);      // true
$.contains(document.body, document.documentElement);      // false

//检测obj的数据类型
$.type(true) === "boolean"                //true
$.type(3) === "number"                    //true
$.type("test") === "string"               //true
$.type(function(){}) === "function"       //true 
$.type([]) === "array"                    //true
$.type(new Date()) === "date"             //true
$.type(/test/) === "regexp"               //true

//检测是否为数组
$.isArray([])                   // true

//检测是否为函数
$.isFunction( $.noop );         // true

//测试对象是否是空对象
$.isEmptyObject({})             // true

//测试对象是否是纯粹的对象
$.isPlainObject({})             // true
$.isPlainObject("test")         // false

//测试对象是否是窗口
$.isWindow(window);             // true

//确定它的参数是否是一个数字
$.isNumeric("-10");           // true
$.isNumeric(16);              // true
$.isNumeric(0xFF);            // true
$.isNumeric("0xFF");          // true
$.isNumeric("8e5");           // true (exponential notation string)
$.isNumeric(3.1415);          // true
$.isNumeric(+10);             // true
$.isNumeric(0144);            // true (octal integer literal)
$.isNumeric("");              // false
$.isNumeric({});              // false (empty object)
$.isNumeric(NaN);             // false
$.isNumeric(null);            // false
$.isNumeric(true);            // false
$.isNumeric(Infinity);        // false
$.isNumeric(undefined);       // false

  6.插件编写

   $.error(message)      //  接受一个字符串,并且直接抛出一个包含这个字符串的异常。
   $.fn.jquery           //  代表 jQuery 版本号的字符串。


//重载jQuery.error,以便可以在Firebug里显示错误信息
$.error = console.error;
//注:这个方法的主要目的是提供给插件开发人员,让他们可以重载这个方法,并以更好的方式显示错误,或者提供更多信息。

//判断一个对象是否是 jQuery 对象
var a = $('body');
if ( a.jquery ) { alert("a是JQ对象")  };

//取得页面上当前使用的 jQuery 的版本号
alert( $.fn.jquery );

jQuery基础1-简介、语法

jQuery基础2-选择器

jQuery基础3-筛选(过滤、查找、串联)

jQuery基础4-dom元素操作

jQuery基础5-事件

jQuery基础6-动画效果

jQuery基础7-Ajax请求

jQuery基础8-event事件对象

jQuery基础9-工具函数

jQuery基础10-延迟对象 和 回调函数

猜你喜欢

转载自blog.csdn.net/qq_41772754/article/details/88085891