实例解析jQuery工具函数

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

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

(0)

相关推荐

  • jquery实现点击页面回到顶部

    a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔[有时间就写] 1)首先我们写好DOM结构.写好CSS样式表 /* HTML */ <div style="wid

  • jQuery Checkbox 全选 反选的简单实例

    1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://xiazai.jb51.net/201611/yuanma/jquery(jb51.net).rar"></script> <script type="text/javascript"

  • jQuery获取this当前对象子元素对象的方法

    如下所示: <select id="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> $(function(){ $("

  • jquery结合html实现中英文页面切换

    目的:前端(只采用thymeleaf模板+jquery) 实现国际化 由:前端没有采用流行的vue.js angular 等框架,纯html不可以引用js中定义的常量 采用jquery赋值(维护2个模板(中,英)界面) 直接out 方案:采用https://github.com/coderifous/jquery-localize/ 一个本地化插件 a jQuery plugin that makes it easy to internationalize your web site 步骤: 1

  • JQuery学习总结【一】

    JQuery学习总结[一] 一:JQuery 1 JQuery知识 *:就是让我们学会调用JQ插件,其实内部就是对JS的封装. *:jquery里面有三个文件, 第2个和第3个其实里面的内容是一样的,只是第三个对其进行了压缩,使浏览器对其的访问时间变短. 我们在使用的时候将Jquery-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起,其实vsdoc.js是对于前面的解释说明,它是让我们在编写代码的时候可以点操作出来. *:练习<点击按钮弹出对话框的内容> <点击网页

  • JQuery学习总结【二】

    一:JQuery知识点 *:JQuery的dom操作 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. *:document方法 1:.val()可以获取到文本框里面的值,若括号里面有值则直接为赋值. Eg:加法计算器 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"

  • 解析jQueryEasyUI的使用

    使用EasyUI最好的方法不是学会,所有的东西都敲一遍,你也没办法敲得完,而是找到一个好的文档. http://xiazai.jb51.net/201611/yuanma/jQueryEasyUI(jb51.net).rar jQueryEasyUI的使用方法其实非常简单.在第一次使用中,也还是碰到了些问题,特地做了一个简单的示例,然后复制过来文档. 页面代码: <html> <head> <title>jQuery EasyUI学习</title> <

  • Javascript基于jQuery UI实现选中区域拖拽效果

    一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

  • jQuery实现发送验证码并60秒倒计时功能

    本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

  • jQuery select自动选中功能实现方法分析

    本文实例分析了jQuery select自动选中功能实现方法.分享给大家供大家参考,具体如下: //筛选 var typeid = "<!--{$typeid}-->"; var bigclassid = "<!--{$bigclassid}-->"; var smallclassid = "<!--{$smallclassid}-->"; $("#typeid option[value="

  • 详解jQuery的Cookie插件

    一.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件. 特别提醒,今日发现一个特别的错误,google浏览器提示:has no method $.cookie.火狐浏览器提示:$.cookie is not a function;调试了半天,终于找到原因,如果同一个页面两次或者多次引入jQuery插件就会报此错误. 使用方法: 1.引入jQuery与jQuery.Cookie.js插件. <script src="jQuery.1.8.3.js" type=

随机推荐