实例解析jQuery工具函数_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　　　　　　 返回对应浏览器的版本

  $(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。

<!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 + "<br/>");
  });
 })
　　　　输出：
　　　　　　0:1
　　　　　　1:2
　　　　　　2:3
　　　　　　3:4
　　　　　　4:5

　  $.each()遍历数组。

$(function () {
  var arr = { "张三": "23","李四": 22,"王五": "21" };
  $.each(arr, function (index, value) {
  document.write(index + ":");
  document.write(value + "<br/>");
  });
 })
　　　　输出：张三:23
　　　　　　　李四:22
　　　　　　 王五:21

      元素遍历

<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表示不取反。

$(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()

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

$(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() + "<br/>");　　//2,5,34,22,8　　可以看到原数组不改变
  document.write(arr1.join());　　　　　　　 //24　　新数组只获得了操作之后的结果
 })

七、$.inArray()

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

 $(function () {
  var arr = [1, 2, 3, 4, 5];
  alert($.inArray(4,arr));　　//弹出 3
 })

八、$.trim()

　　去除字符串两边的空格

 $(function () {
  var str = " 你在他乡还好吗？ ";
  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)　　　检测参数是否是一个纯粹对象，即对象是否通过{}或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]);　　第二个参数为可选参数，表示是否浅层序列化

 $(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("<br>" + str1);　　//Name=张飞&Age=23
 })

 十一、$.makeArray()

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

 var arr = [1,3,5,7,9];
 $(function () {
  var arr1 = $.makeArray(arr);
  document.write(arr1.join());　　//输出 1,3,5,7,9
 })

十二、$.merge()

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

 var arr1 = [1, 3, 5, 7, 9];
 var arr2 = [2, 4, 6, 8, 10];
 $(function () {
  var arr3 = $.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解析函数，并没有定义序列化函数。

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

十四、$.proxy()

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

$(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)

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

$(function () {
 var arr = [1, 2, 3, 2, 1];
 jQuery.unique(arr);
 alert(arr.join());　　//返回　　3,2,1
})

十六、$.extend()

　　合并对象中的元素

$(function(){
 var result=$.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(){
 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实例化构造函数、jquery工具函数、jquery ajax实例、jquerymobile实例网站、jquery jsonp 实例，以便于您获取更多的相关知识。

时间： 2024-09-20 07:54:28

实例解析jQuery工具函数_jquery的相关文章

从零开始学习jQuery (九) jQuery工具函数_jquery

一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作. jQuery工具函数为我们操作对象和数组提供了便利条件. 二.前言 大部分人仅仅使用jQuery的选择器选择对象, 或者实现页面动画效果. 在处理业务逻辑时常常自己编写很多算法. 本文提醒各位jQuery也能提高我们操作对象和数组的效率. 并且可以将一些常用算法扩充到jQuer

jQuery 工具函数学习资料_jquery

URL 字符串操作 数组和对象操作 测试操作 浏览器 1:URL操作: $.param(obj) 返回 :string: 说明:将jquery对象按照name/value 或者key/value序列化为URL参数,用&连接. 示例: var obj ={name:zh,age:20}; alert(jQuery.param(obj)); //alert "name=zh&age=20";   2:字符串操作: jQuery.trim(str) 返回:string: 说明

从零开始学习jQuery (九) jQuery工具函数

一.摘要 本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案,即使你会使用jQuery也能在阅读中发现些许秘籍. 我们经常要使用脚本处理各种业务逻辑,最常见的就是数组和对象的操作.jQuery工具函数为我们操作对象和数组提供了便利条件. 二.前言 大部分人仅仅使用jQuery的选择器选择对象,或者实现页面动画效果.在处理业务逻辑时常常自己编写很多算法.本文提醒各位jQuery也能提高我们操作对象和数组的效率.并且可以将一些常用算法扩充到jQuery工具函数中,实现

jQuery源码分析-03构造jQuery对象-工具函数_jquery

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

JQuery工具函数汇总_jquery

在jQuery中,工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的,我们统称为工具函数,或Utilites函数 主要作用于:字符串.数组.对象 API:工具函数 调用格式:   $.函数名()或jQuery.函数名() 字符串操作: $.trim():去除字符串左右两边的空格 数组和对象操作: $.each():遍历数组 $.each(array,function(index,value){}):array:数组变量,index:元素下标,从0开始,valu

实例解析jQuery插件EasyUI最常用的表单验证规则_jquery

例如:校验输入框只能录入0-1000之间 最多有2位小数的数字表单<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox"  validType="rateCheck[0,1000]"  maxlength="6" /> $.extend($.fn

浅谈Jquery核心函数_jquery

      在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数. jquery核心函数有7个重载,分别如下: jquery()  该函数返回一个空的jquery对象. jquery(elements)  该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合) jqu

浅谈jQuery效果函数_jquery

jQuery有很多的效果可以实现,比如说淡入淡出的效果:<html> <head> <style> #box{width:200px;height:200px;background:red;opacity:1;} </style> </head> <body> <div id="box"> </div> <input type="button" value=&quo

实例解析jQuery中proxy()函数的用法_jquery

jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境. jQuery.proxy( function, context ) function将要改变上下文语境的函数. context函数的上下文语境(`this`)会被设置成这个 object 对象. jQuery.proxy( context, name ) context函数的上下文语境会被设置成这个 object 对象. name将要改变上下文语境的函数名(这个函数必须