美文网首页首页推荐
jQuery之常用的工具函数详解(一)

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

作者: 编程小飞侠 | 来源:发表于2016-09-09 16:53 被阅读52次

    $.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之常用的工具函数详解(一)

        本文链接:https://www.haomeiwen.com/subject/yaneettx.html