编程 Javascript

实例解析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里面的属性不管
})

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

实例解析jQuery工具函数

- Author -

逆心

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS操作Cookies的小例子

Oct 15 Javascript

JS实现消息来时让网页标题闪动效果的方法

Apr 20 Javascript

整理关于Bootstrap模态弹出框的慕课笔记

Mar 29 Javascript

ECMAScript6--解构

Mar 30 Javascript

vue router路由嵌套不显示问题的解决方法

Jun 17 Javascript

JavaScript学习笔记之惰性函数示例详解

Aug 27 Javascript

前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来

Nov 14 jQuery

Bootstrap 模态框自定义点击和关闭事件详解

Aug 10 Javascript

vue2.0 中使用transition实现动画效果使用心得

Aug 13 Javascript

详解vue中的父子传值双向绑定及数据更新问题

Jun 13 Javascript

微信小程序Echarts图表组件使用方法详解

Jun 25 Javascript

教你搭建按需加载的Vue组件库(小结)

Jul 29 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