实例解析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控制frameSet示例
Sep 10 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
原生js实现回复评论功能
Jan 18 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 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.MVC的模板标签系统(五)
2006/09/05 PHP
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python实现手机通讯录搜索功能
2018/02/22 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
比较基础的php面试题及答案-填空题
2014/04/26 面试题
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android