实例解析jQuery工具函数
一、$.browser对象属性
属性列表说明
webkitwebkit相关浏览器则返回true,否则返回false,如google,傲游。
mozillamozilla相关浏览器则返回true,否则返回false,如火狐
safari safari相关浏览器则返回true,否则返回false,如safari
opera opera相关浏览器则返回true,否则返回false,如opera
msiemsie相关浏览器则返回true,否则返回false,如IE,360,搜狗
version返回对应浏览器的版本
$(function(){ if($.browser.msie){ alert("IE浏览器"); } if($.browser.webkit){ alert("webkit浏览器"); } if($.browser.mozilla){ alert("mozilla浏览器"); } if($.browser.safari){ alert("safari浏览器"); } if($.browser.opera){ alert("opera浏览器"); } alert($.browser.version); })
二、boxModel
返回一个布尔值,如果是W3C盒子模型则返回true,否则返回false。
盒子模型分两类,一类是W3C盒子模型,一类是IE盒子模型。两者的根本区别在于W3C的盒子模型不包括padding与border,仅指content的Height和Width,而IE盒子模型包含padding与border。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <scriptsrc="jQuery.1.8.3.js"type="text/javascript"></script> <scripttype="text/javascript"> $(function(){ if($.support.boxModel){ alert("W3C盒子模型!"); } else{ alert("IE盒子模型!"); } }) </script> </head> <body> </body> </html>
上面的例子弹出W3C盒子模型,如果删除掉顶部的两行,<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">。则弹出的是IE盒子模型。
数组和对象的操作
三、$.each()
此工具函数不仅能够完成指定数组的遍历,还能够实现页面中元素的遍历。
语法:$.each(obj,fn(para1,para2))obj要遍历的数组或对象,fn为每个遍历元素执行的回调函数,para1表示数组的序号或对象的属性,para2表示数组的元素和对象的属性。
$(function(){ vararr=[1,2,3,4,5]; $.each(arr,function(index,value){ document.write(index+":"); document.write(value+"<br/>"); }); }) 输出: 0:1 1:2 2:3 3:4 4:5
$.each()遍历数组。
$(function(){ vararr={"张三":"23","李四":22,"王五":"21"}; $.each(arr,function(index,value){ document.write(index+":"); document.write(value+"<br/>"); }); }) 输出:张三:23 李四:22 王五:21
元素遍历
<head> <title></title> <scriptsrc="jQuery.1.8.3.js"type="text/javascript"></script> <scripttype="text/javascript"> $(function(){ $("p").each(function(){ $(this).css("background-color","red"); }); //一下三行代码与以上三行效果一样 //$.each($("p"),function(){ //$(this).css("background-color","red"); //}) }) </script> </head> <body> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> <p>我是第五个P</p> </body> </html>
四、$.grep()
筛选符合条件的元素,返回一个新数组
语法:$.grep(Arrar,fn(value,index));要注意下回调函数的参数的顺序,第一个是值,第二个是索引。
$.grep(Arrar,fn(value,index),[bool]);第三个参数表示是否取反,true表示取反,false表示不取反。
$(function(){ vararr=[2,5,34,22,8]; vararr1=$.grep(arr,function(value,index){ returnindex<=2&&value<10; }) document.write(arr1.join());//输出2,5 })
六、$.map()
改变函数内的数据,接受一个数组或类数组对象作为参数
$(function(){ vararr=[2,5,34,22,8]; vararr1=$.map(arr,function(value,index){ if(value>5&&index<3){ returnvalue-10; } }) document.write(arr.join()+"<br/>");//2,5,34,22,8可以看到原数组不改变 document.write(arr1.join());//24新数组只获得了操作之后的结果 })
七、$.inArray()
如果数组中存在被搜索元素,则返回被搜索元素的索引
$(function(){ vararr=[1,2,3,4,5]; alert($.inArray(4,arr));//弹出3 })
八、$.trim()
去除字符串两边的空格
$(function(){ varstr="你在他乡还好吗?"; document.write("11"+str+"11"+"<br/>");//输出11你在他乡还好吗?11 document.write("11"+$.trim(str)+"11");//输出11你在他乡还好吗?11//加个11是为了看清楚差别。 })
九、测试操作
$.isArray(obj)检测参数是否是数组
$.isFunction(obj)检测参数是否是一个函数
$.isEmptyObject(obj)检测参数是否是一个空对象
$.isPlainObject(obj)检测参数是否是一个纯粹对象,即对象是否通过{}或newObject()关键字创建。
$.contains(container,contained)检测一个DOM节点是否包含另一个DOM节点。是则返回true否则表示false。注意参数是DOM对象并非jQuery对象。
$(function(){ vararr=[1,2,3,2,1]; document.write(jQuery.isArray(arr));//返回true varstr="123"; document.write(jQuery.isArray(str));//返回false }) $(function(){ varf=fun1; alert($.isFunction(fun1));//返回true }) functionfun1(){} $(function(){ varobj1={}; varobj2={name:"张飞"}; alert($.isEmptyObject(obj1));//返回trueobj1是空对象 alert($.isEmptyObject(obj2));//返回falseobj2不是空对象 }) $(function(){ varobj1={}; varobj2={name:"张飞"}; varobj3=newObject(); varobj4=null; alert($.isPlainObject(obj1));//true通过{}创建 alert($.isPlainObject(obj2));//true通过{}创建 alert($.isPlainObject(obj3));//true通过newObject()创建 alert($.isPlainObject(obj4));//flase不是通过{}或newObject()创建 }) $(function(){ alert($.contains($("#div1")[0],$("#p1")[0]));//返回true,注意参数是DOM对象,并非jQuery对象 })
十、$.param()
序列化成url字符串
$.param(obj,[bool]);第二个参数为可选参数,表示是否浅层序列化
$(function(){ varman={Name:"张飞",Age:23}; varstr=$.param(man); document.write(str);//Name=%E5%BC%A0%E9%A3%9E&Age=23 varstr1=decodeURI(str); document.write("<br>"+str1);//Name=张飞&Age=23 })
十一、$.makeArray()
将数组或类数组对象的属性复制到一个新的数组(真的是数组)中,并返回该新数组。
vararr=[1,3,5,7,9]; $(function(){ vararr1=$.makeArray(arr); document.write(arr1.join());//输出1,3,5,7,9 })
十二、$.merge()
该函数接受两个数组或类数组对象,将第二个参数附加到第一个参数上面,返回第一个参数,第一个数组会修改,第二个不会。
vararr1=[1,3,5,7,9]; vararr2=[2,4,6,8,10]; $(function(){ vararr3=$.merge(arr1,arr2); document.write(arr1.join()+"<br/>");//1,3,5,7,9,2,4,6,8,10 document.write(arr2.join()+"<br/>");//2,4,6,8,10 document.write(arr3.join()+"<br/>");//1,3,5,7,9,2,4,6,8,10 })
十三、$.parseJSON()
该函数会解析JSON格式的字符串,并返回解析结果(对象)。类似于JSON.parse(),注意:jQuery只定义了JSON解析函数,并没有定义序列化函数。
varman={name:"张三",age:23}; varstr=JSON.stringify(man); document.write(str+"<br/>");//{"name":"张三","age":23} varman1=$.parseJSON(str); document.write(man1.name+man1.age);//张三23
十四、$.proxy()
类似于Function对象的bind()方法,接受函数作为第一个参数,对象作为第二个参数,并返回一个新函数,该函数会作为第二个参数对象的方法调用。
$(function(){ varobj={ name:"John", test:function(){ alert(this.name);//当id为test的按钮点击时,弹出姓名 $("#test").unbind("click",obj.test);//并取消事件绑定(下次再点击不会弹出姓名) } }; $("#test").click(jQuery.proxy(obj,"test"));//绑定object对象里面的方法test })
十五、$.unique(array)
删除元素数组中的重复元素
$(function(){ vararr=[1,2,3,2,1]; jQuery.unique(arr); alert(arr.join());//返回3,2,1 })
十六、$.extend()
合并对象中的元素
$(function(){ varresult=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}); alert(result.name);//输出Jerry后面的会覆盖前面的,result始终只是一个对象 })
省略dest参数,extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去。
要特别注意的一点是:后面的值会覆盖前面同名的值。
$(function(){ $.extend({ hello:function(){alert('hello');}//该方法只有一个参数,意味着将hello方法合并到jQuery全局对象中去 }); $.hello();//弹出hello })
命名空间示例:
$(function(){ $.extend({net:{}});//扩展一个命名空间 $.extend($.net,{ hello:function(){alert('hello');}//将hello方法绑定到命名空间net里去 }) $.net.hello();//通过net命名空间调用方法 })
拷贝方法原型:
extend(boolean,dest,src1,src2,src3...)
其中第一个参数boolean表示是否进行深层拷贝。
$(function(){ varresult=$.extend(true,{}, {name:"John",location:{city:"Boston",country:"USA"}}, {last:"Resig",location:{state:"MA",country:"China"}}); alert(result.location.state);//输出MA //result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}} varresult=$.extend(false,{}, {name:"John",location:{city:"Boston",country:"USA"}}, {last:"Resig",location:{state:"MA",country:"China"}}); alert(result.location.city);//输出undefined //result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}注意没有city,只是合并了location,location里面的属性不管 })
以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持毛票票!