jQuery之常用的工具函数详解(一)

$.extend() jQuery中拷贝对象的方法

  $(function(){  
        var a={ 
            name:'hello'
        }
        var b={}
        b=a;
        console.log(b);  //  { name:'hello'}
        b.name='Leo';
        console.log(b);  //  { name:'Leo'}
        console.log(a);  //  { name:'Leo'}

 //如果直接将a的对象赋给b,那么会产生引用的相关问题,因为修改b中的值,会直接影响a中的值,没有达到拷贝的效果

        var a={ 
            name:'hello'
        }
        var b={} 
        $.extend(b,a);
        console.log(b);  //  { name:'hello'}
        b.name='Leo';
        console.log(b);  //  { name:'Leo'}
        console.log(a);  //  { name:'hello'}

//使用$.extend()方法,修改b中的值,则不会影响a中的值,达到拷贝的效果

        var a={ 
            name:'hello'
        }
        var b={
            age:22
        }
        var c={} 
        $.extend(c,a,b);
        console.log(c);  //{name: "hello", age: 22}
        //可以实现多个拷贝

        var a={ 
            name:{ age:22 }
        }
        var b={}   
        $.extend(b,a);
        console.log(b);   //{ name:{age:22}}
        b.name.age=30;
        console.log(b);   //{ name:{age:30}}
        console.log(a);   //{ name:{age:30}}

//以上的执行结果我们会发现,a中的值还是发生了变化,这是因为$.extend()默认是浅拷贝的方式
//不支持多层级的对象引用,如何实现深拷贝,需要设置第一个参数为true

          var a={ 
            name:{ age:22 }
        }
         var b={}      
        $.extend(true,b,a);
        console.log(b);   //{ name:{age:22}}
        b.name.age=30;
        console.log(b);   //{ name:{age:30}}
        console.log(a);   //{ name:{age:22}}
     })

$.proxy() 改变函数内this的指向

$(function(){

      function show(a,b){
          alert(a);
          alert(b);
          alert(this);
      }
      show(); // this->window
      show.call(document) //this->document
      //除了用以上方法,还可以用$.proxy();
      $.proxy(show,document)();  //this->document
      $.proxy(show,document)(3,4); //可以接受参数
      $.proxy(show,document,3,4)(); //还可以这样的形式接受参数,那为什么要以这样的形式接受参数,举个小例子。
     $('input').on('click',$.proxy(function(){
        alert(a);
        alert(b);
        alert(this);
     },document,3,4));
   })

$. parseJSON() 要解析的 JSON 字符串。

 var a='{"name":"leo"}';
 console.log($.parseJSON(a));   //->{"name":"leo"}
//解析严格格式类型的JSON字符串

$.type() 判断数据类型

        var a=1;
        console.log($.type(a));  //->number
        var b='abc';        
        console.log($.type(b));  //->string
        var c=[1,2,3];      
        console.log($.type(c));  //->array
        var d={'name':'sun'}; 
        console.log($.type(d));  //->object

$.isFunction() 判断是否是函数类型

var e=function(){}
console.log($.isFunction(e));  //->true 

$.isNumeric() 判断是否是数字类型

var f=1;  
console.log($.isNumeric(f));   //->true

$.isArray() 判断是否是数组类型

var g=['a']
console.log($.isArray(g));    //->true    

$.isEmptyObject() 判断是否是空的对象

var a=null;              
console.log($.isEmptyObject(a));   //->true

后续会不断更新其它工具函数用法,敬请期待!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,791评论 24 450
  • Zepto 提供了丰富的工具函数,下面来一一解读。 源码版本 本文阅读的源码为 zepto1.2.0 $.exte...
    对角另一面阅读 296评论 0 0
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 家里多了只仓鼠。同事在路上捡到的,知道我家小子一直想养一只,于是这只小仓鼠双十二当天被我带回了家。 ...
    清若0215阅读 316评论 0 1
  • 东城酒肆,一壶烧酒两斤牛肉 集市里的尘埃被马匹飞驰而过所扬起 残破的幕帘还在摇摆,吹笛者挽起衣袖 这个世界是一个巨...
    孤独乞丐阅读 530评论 0 0