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

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

你可能感兴趣的:(jQuery之常用的工具函数详解(一))