实例解析jQuery工具函数

一、$.browser对象属性

　　属性列表　　　　　　　　　　　　　　　　　　说明

　 webkit　　　　　　 webkit相关浏览器则返回true，否则返回false，如google，傲游。

　 mozilla　　　　　　 mozilla相关浏览器则返回true，否则返回false，如火狐

safari　　　　　　 safari相关浏览器则返回true，否则返回false，如safari

opera　　　　　　 opera相关浏览器则返回true，否则返回false，如opera

msie　　　　　　　 msie相关浏览器则返回true，否则返回false,如IE，360，搜狗

version　　　　　　返回对应浏览器的版本

二、BoxModel

　　返回一个布尔值，如果是W3C盒子模型则返回true，否则返回false。

　　盒子模型分两类，一类是W3C盒子模型，一类是IE盒子模型。两者的根本区别在于W3C的盒子模型不包括padding与border，仅指content的Height和Width，而IE盒子模型　　包含padding与border。

@H_301_36@

　　上面的例子弹出W3C盒子模型，如果删除掉顶部的两行，"> ">。则弹出的是IE盒子模型。

数组和对象的操作

三、$.each()

　　此工具函数不仅能够完成指定数组的遍历，还能够实现页面中元素的遍历。

　　语法：$.each(obj,fn(para1,para2))　　obj要遍历的数组或对象，fn为每个遍历元素执行的回调函数，para1表示数组的序号或对象的属性，para2表示数组的元素和对象的属性。

"); }); }) 　　　　输出：　　　　　　0:1 　　　　　　1:2 　　　　　　2:3 　　　　　　3:4 　　　　　　4:5

　 $.each()遍历数组。

"); }); }) 　　　　输出：张三:23 　　　　　　　李四:22 　　　　　　王五:21

元素遍历

我是第一个P

我是第二个P

我是第三个P

我是第四个P

我是第五个P

@H_301_36@

四、$.grep()

　　筛选符合条件的元素，返回一个新数组

　　　　语法：$.grep(Arrar,fn(value,index));　　要注意下回调函数的参数的顺序，第一个是值，第二个是索引。

　　　　　　　$.grep(Arrar,index),[bool]);　　第三个参数表示是否取反，true表示取反，false表示不取反。

输出2,5 })

六、$.map()

改变函数内的数据，接受一个数组或类数组对象作为参数

5 && index < 3) { return value - 10; } }) document.write(arr.join() + "
");　　//2,8　　可以看到原数组不改变 document.write(arr1.join());　　　　　　　 //24　　新数组只获得了操作之后的结果 })

七、$.inArray()

　如果数组中存在被搜索元素，则返回被搜索元素的索引

八、$.trim()

　　去除字符串两边的空格

");　　//输出 11 你在他乡还好吗？ 11 document.write("11" + $.trim(str) + "11");　　　//输出 11你在他乡还好吗？11　　　　//加个11是为了看清楚差别。 })

九、测试操作

　　　　$.isArray(obj)　　　　检测参数是否是数组

　　　　$.isFunction(obj)　　检测参数是否是一个函数

　　　　$.isEmptyObject(obj)　　检测参数是否是一个空对象

　　　　$.isPlainObject(obj)　　　检测参数是否是一个纯粹对象，即对象是否通过{}或new Object()关键字创建。

　　　　$.contains(container,contained)　　检测一个DOM节点是否包含另一个DOM节点。是则返回true否则表示false。注意参数是DOM对象并非jQuery对象。

十、$.param()

　　序列化成url字符串

　　　　$.param(obj,[bool]);　　第二个参数为可选参数，表示是否浅层序列化

" + str1);　　//Name=张飞&Age=23 })

十一、$.makeArray()

　　将数组或类数组对象的属性复制到一个新的数组(真的是数组)中，并返回该新数组。

输出 1,9 })

十二、$.merge()

　　该函数接受两个数组或类数组对象，将第二个参数附加到第一个参数上面，返回第一个参数，第一个数组会修改，第二个不会。

"); //1,9,10 document.write(arr2.join() + "
"); //2,10 document.write(arr3.join() + "
"); //1,10 })

十三、$.parseJSON()

　　该函数会解析JSON格式的字符串，并返回解析结果(对象)。类似于JSON.parse()，注意:jQuery只定义了JSON解析函数，并没有定义序列化函数。

"); //{"name":"张三","age":23} var man1 = $.parseJSON(str); document.write(man1.name + man1.age); //张三23

十四、$.proxy()

　　类似于Function对象的bind()方法，接受函数作为第一个参数，对象作为第二个参数，并返回一个新函数，该函数会作为第二个参数对象的方法调用。

方法test 　　})

十五、$.unique(array)

　　删除元素数组中的重复元素

十六、$.extend()

　　合并对象中的元素

输出 Jerry 后面的会覆盖前面的，result始终只是一个对象 })

　省略dest参数,extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去。

　　要特别注意的一点是：后面的值会覆盖前面同名的值。

方法只有一个参数，意味着将hello方法合并到jQuery全局对象中去 }); $.hello(); //弹出 hello })

　　命名空间示例：

方法绑定到命名空间net里去 }) $.net.hello(); //通过net命名空间调用方法 })

　拷贝方法原型：

extend(boolean,dest,src1,src2,src3...)

其中第一个参数boolean表示是否进行深层拷贝。

输出 MA //result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}} var result=$.extend( false,country:"China"} } ); alert(result.location.city); //输出 undefined //result={name:"John",location:{state:"MA",county:"China"}} 注意没有city，只是合并了location,location里面的属性不管 })

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持编程之家！