实例解析jQuery工具函数


Posted in Javascript onDecember 01, 2016

一、$.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里面的属性不管
})

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
DOM精简教程
Oct 03 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
Javascript获取某个月的天数
May 30 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 #Javascript
获取jqGrid中选择的行的数据
Nov 30 #Javascript
基于Vue.js实现简单搜索框
Mar 26 #Javascript
深入理解jQuery.data() 的实现方式
Nov 30 #Javascript
利用vue-router实现二级菜单内容转换
Nov 30 #Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 #Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 #Javascript
You might like
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python中取绝对值简单方法总结
2020/07/24 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
总经理秘书工作职责
2013/12/26 职场文书
运动会新闻报道稿
2015/07/22 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
PHP中多字节字符串操作实例详解
2021/08/23 PHP