16个jQuery工具函数
2016-01-08 17:30
567 查看
一、$.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 返回对应浏览器的版本 复制代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(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。 复制代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jQuery.1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { if ($.support.boxModel) { alert("W3C盒子模型!"); } else { alert("IE盒子模型!"); } }) </script> </head> <body> </body> </html> 上面的例子弹出W3C盒子模型,如果删除掉顶部的两行,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">。则弹出的是IE盒子模型。 数组和对象的操作 三、$.each() 此工具函数不仅能够完成指定数组的遍历,还能够实现页面中元素的遍历。 语法:$.each(obj,fn(para1,para2)) obj要遍历的数组或对象,fn为每个遍历元素执行的回调函数,para1表示数组的序号或对象的属性,para2表示数组的元素和对象的属性。 $(function () { var arr = [1, 2, 3, 4, 5]; $.each(arr, function (index, value) { document.write(index + ":"); document.write(value + " "); }); }) 输出: 0:1 1:2 2:3 3:4 4:5 $.each()遍历数组。 复制代码 1 2 3 4 5 6 7 8 $(function () { var arr = { "张三": "23","李四": 22,"王五": "21" }; $.each(arr, function (index, value) { document.write(index + ":"); document.write(value + " "); }); }) 输出:张三:23 李四:22 王五:21 元素遍历 复制代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <head> <title></title> <script src="jQuery.1.8.3.js" type="text/javascript"></script> <script type="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表示不取反。 复制代码 1 2 3 4 5 6 7 $(function () { var arr = [2, 5, 34, 22, 8]; var arr1 = $.grep(arr, function(value, index) { return index <= 2 && value < 10; }) document.write(arr1.join()); //输出2,5 }) 六、$.map() 改变函数内的数据,接受一个数组或类数组对象作为参数 复制代码 1 2 3 4 5 6 7 8 9 $(function () { var arr = [2, 5, 34, 22, 8]; var arr1 = $.map(arr, function (value, index) { if (value > 5 && index < 3) { return value - 10; } }) document.write(arr.join() + " "); //2,5,34,22,8 可以看到原数组不改变 document.write(arr1.join()); //24 新数组只获得了操作之后的结果 }) 七、$.inArray() 如果数组中存在被搜索元素,则返回被搜索元素的索引 复制代码 1 2 3 4 $(function () { var arr = [1, 2, 3, 4, 5]; alert($.inArray(4,arr)); //弹出 3 }) 八、$.trim() 去除字符串两边的空格 复制代码 1 2 3 4 5 6 $(function () { var str = " 你在他乡还好吗? "; document.write("11" + str + "11" + " "); //输出 11 你在他乡还好吗? 11 document.write("11" + $.trim(str) + "11"); //输出 11你在他乡还好吗?11 //加个11是为了看清楚差别。 }) 九、测试操作 复制代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 $.isArray(obj) 检测参数是否是数组 $.isFunction(obj) 检测参数是否是一个函数 $.isEmptyObject(obj) 检测参数是否是一个空对象 $.isPlainObject(obj) 检测参数是否是一个纯粹对象,即对象是否通过{}或new Object()关键字创建。 $.contains(container,contained) 检测一个DOM节点是否包含另一个DOM节点。是则返回true否则表示false。注意参数是DOM对象并非jQuery对象。 $(function () { var arr = [1, 2, 3, 2, 1]; document.write(jQuery.isArray(arr)); //返回true var str = "123"; document.write(jQuery.isArray(str)); //返回false }) $(function () { var f = fun1; alert($.isFunction(fun1)); //返回true }) function fun1() { } $(function () { var obj1 = {}; var obj2 = { name: "张飞" }; alert($.isEmptyObject(obj1)); //返回true obj1是空对象 alert($.isEmptyObject(obj2)); //返回false obj2不是空对象 }) $(function () { var obj1 = {}; var obj2 = { name: "张飞" }; var obj3 = new Object(); var obj4 = null; alert($.isPlainObject(obj1)); //true 通过{}创建 alert($.isPlainObject(obj2)); //true 通过{}创建 alert($.isPlainObject(obj3)); //true 通过new Object()创建 alert($.isPlainObject(obj4)); //flase 不是通过{}或new Object()创建 }) $(function () { alert($.contains($("#div1")[0],$("#p1")[0])); //返回true,注意参数是DOM对象,并非jQuery对象 }) 十、$.param() 序列化成url字符串,$.param(obj,[bool]); 第二个参数为可选参数,表示是否浅层序列化 复制代码 1 2 3 4 5 6 7 8 $(function () { var man = { Name: "张飞", Age: 23 }; var str = $.param(man); document.write(str); //Name=%E5%BC%A0%E9%A3%9E&Age=23 var str1 = decodeURI(str); document.write(" " + str1); //Name=张飞&Age=23 }) 十一、$.makeArray() 将数组或类数组对象的属性复制到一个新的数组(真的是数组)中,并返回该新数组。 复制代码 1 2 3 4 5 var arr = [1,3,5,7,9]; $(function () { var arr1 = $.makeArray(arr); document.write(arr1.join()); //输出 1,3,5,7,9 }) 十二、$.merge() 该函数接受两个数组或类数组对象,将第二个参数附加到第一个参数上面,返回第一个参数,第一个数组会修改,第二个不会。 复制代码 1 2 3 4 5 6 7 8 9 10 11 var arr1 = [1, 3, 5, 7, 9]; var arr2 = [2, 4, 6, 8, 10]; $(function () { var arr3 = $.merge(arr1, arr2); document.write(arr1.join() + " "); //1,3,5,7,9,2,4,6,8,10 document.write(arr2.join() + " "); //2,4,6,8,10 document.write(arr3.join() + " "); //1,3,5,7,9,2,4,6,8,10 }) 十三、$.parseJSON() 该函数会解析JSON格式的字符串,并返回解析结果(对象)。 类似于JSON.parse(),注意:jQuery只定义了JSON解析函数,并没有定义序列化函数。 复制代码 1 2 3 4 var man = { name: "张三", age: 23 }; var str = JSON.stringify(man); document.write(str + " "); //{"name":"张三","age":23} var man1 = $.parseJSON(str); document.write(man1.name + man1.age); //张三23 十四、$.proxy() 类似于Function对象的bind()方法,接受函数作为第一个参数,对象作为第二个参数,并返回一个新函数,该函数会作为第二个参数对象的方法调用。 复制代码 1 2 3 4 5 6 $(function () { var obj = { name: "John", test: function () { alert(this.name); //当id为test的按钮点击时,弹出姓名 $("#test").unbind("click", obj.test); //并取消事件绑定(下次再点击不会弹出姓名) } }; $("#test").click(jQuery.proxy(obj, "test")); //绑定object对象里面的方法test }) 十五、$.unique(array) 删除元素数组中的重复元素 复制代码 1 2 3 $(function () { var arr = [1, 2, 3, 2, 1]; jQuery.unique(arr); alert(arr.join()); //返回 3,2,1 }) 十六、$.extend() 合并对象中的元素 复制代码 1 2 $(function(){ var result=$.extend({},{name:"Tom",age:21}, {name:"Jerry",sex:"Boy"}); alert(result.name); //输出 Jerry 后面的会覆盖前面的,result始终只是一个对象 }) 省略dest参数,extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去。 要特别注意的一点是:后面的值会覆盖前面同名的值。 复制代码 1 2 3 4 $(function(){ $.extend({ hello:function(){alert('hello');} //该方法只有一个参数,意味着将hello方法合并到jQuery全局对象中去 }); $.hello(); //弹出 hello }) 命名空间示例: 复制代码 1 2 3 4 $(function(){ $.extend({net:{}}); //扩展一个命名空间 $.extend($.net,{ hello:function(){alert('hello');} //将hello方法绑定到命名空间net里去 }) $.net.hello(); //通过net命名空间调用方法 }) 拷贝方法原型: extend(boolean,dest,src1,src2,src3...) 其中第一个参数boolean表示是否进行深层拷贝。 复制代码 1 2 3 4 5 6 7 $(function(){ var result=$.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"}} var result=$.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里面的属性不管 })
相关文章推荐
- Jquery的同步和异步请求
- 转盘抽奖插件-jquery.lottery.js
- 14-Jquery获取选中的select的值
- Jquery中易混淆的选择器
- jquery学习随笔(DOM节点操作)
- jQuery-事件委托案例练习
- jquery $.post在火狐和google下无法提交原因
- jquery插件
- jQuery CSS3相结合实现时钟插件
- 转载 jQuery$冲突问题
- jQuery Ajax通用js封装
- 根据JQuery开发自定义插件。
- jquery获取自定义的标签属性的值
- ajax+php (jquery.form插件)实现异步文件上传
- jQuery EasyUIcombobox 自动补全
- jqueryMobile
- 基于jQuery的内容滚动插件flexSlider.js
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
- jquery判断checkbox全选,全取消
- jquery-css