实例解析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里面的属性不管
})
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持毛票票！