实例解析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 相关文章推荐
使用js在页面中绘制表格核心代码
Sep 16 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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
自己前几天写的无限分类类
2007/02/14 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
判断脚本加载是否完成的方法
2009/05/26 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python处理XML格式数据的方法详解
2017/03/21 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
党员入党表决心的话
2014/03/11 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
爱护公共设施标语
2014/06/24 职场文书
殡葬服务心得体会
2014/09/11 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript