实例解析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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
JQuery live函数
2010/12/24 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python随机数分布random均匀分布实例
2019/11/27 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Keras loss函数剖析
2020/07/06 Python
python 如何实现遗传算法
2020/09/22 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
学校经典推荐信
2013/10/30 职场文书
房地产管理毕业生自荐信
2013/11/04 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
心理健康日活动总结
2014/05/08 职场文书
招商引资工作汇报
2014/10/28 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
婚宴致辞
2015/07/28 职场文书
环保建议书范文
2015/09/14 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android