【jQuery】 jQuery中的静态方法each || map

JQuery静态方法each

each总结：
1.首先是静态所以直接可以用[JQuery . / $ . + 方法名]来调用；
2.格式为$.each(object,[callback]) >>> callback中第一参是index,第二参是value；
3.有返回值，返回值就是其遍历的数组；
4.不可以在回调函数中对遍历数组进行处理；

 /* 原生JS和JQ中forEach/each的区别 */
    /* 1.原生JS的forEach方法 
    * 特点 >>> 原生JS中的forEach只能遍历数组，不能遍历伪数组
    * 第一个参数是 >>> 元素值
    * 第二个参数是 >>> 元素对应的索引值
    */
    var arr = [2,4,6,8,0];
    var arr1 = {0:2,1:4,2:6,3:8,4:0,length:5};
    arr.forEach(function(value,index){
        console.log(index + " >>> " + value);
    })
    // arr1.forEach(function(value,index){
    //     console.log(index + " >>> " + value);
    // })    Error!
    console.log("----------------------------------"); 
    /* 2.JQ中的each方法 
    * 格式 >>>　each( object, [callback])
    * 特点 >>> 原生JS中的forEach只能遍历数组，也能遍历伪数组
    * 第一个参数是 >>> 循环的对象/数组
    * 第二个参数是 >>> 元素对应的索引值
    * 第二个参数是 >>> 元素值
    */
    $.each(arr,function(index,value){
        console.log(index + " >>> " + value);
    })
    console.log("----------------------------------");
    $.each(arr1,function(index,value){
        console.log(index + " >>> " + value);
    })

JQuery中的静态方法map

map总结：
1.首先是静态所以直接可以用[JQuery . / $ . + 方法名]来调用；
2.格式为$.map(object,[callback]) >>> callback中第一参是value,第二参是index；
3.没有返回值；
4.可以在回调函数中对遍历数组进行处理，并生成一个新的数组返回；

 var arr = [2,4,6,8,10];
        var arr1 = {0:1,1:3,2:5,3:7,4:9,length:5};
        /* 原生的JS写map方法循环
        *  1.格式 >>> object.map(function(value,index){...})
        *  2.相同点 >>> 和原生each一样不能遍历伪数组 || 都是遍历数组
        *  3.不同点 >>>　
        */
        arr.map(function(value,index,array){
            console.log("JS",value,index);
        })

        try{
            arr1.map(function(value,index,array){
            console.log("JS",value,index);  // error: arr1.map is not a function
        })
        }catch(e){
            console.log(e,"The object is not array");
        }
        

        /* JQuery写map方法循环
        * 1.格式 >>> $/JQuery.map(object,[callback])
        * 2.相同点 >>> 跟each一样遍历数组/伪数组
        * 3.不同点 >>> ①回调函数中传的参数不一样  ||  
        * ②each遍历的数组有回调,而map没有  ||  
        * ③each静态方法不支持在回调函数中对遍历的数组进行操作处理,而map可以通过return对遍历的数组进行处理
        */
        jQuery.map(arr1,function(value,index){
            console.log("JQ1",index,value);
        })
        console.log("=============①==============");
        $.map(arr,function(value,index){
            console.log("JQ-map",index,value);
        })
        $.each(arr,function(index,value){
            console.log("JQ-each",index,value);
        })
        console.log("=============②==============");
        var res = $.each(arr,function(index,value){
            console.log("JQ--Each",index,value);
        })
        var res1 = $.map(arr,function(value,index){
            console.log("JQ--Map",index,value);
        })
        console.log("res--each",res); // (5) [2, 4, 6, 8, 10]
        console.log("res1--map",res1); // []
        console.log("=============③==============");
        var res2 = $.each(arr1,function(index,value){
            return index + value;
        })
        var res3 = $.map(arr1,function(value,index){
            return index + value;
        })
        console.log("res2--each",res2);
        console.log("res3-map",res3);

JQuery中的静态方法trim

1.格式$./JQuery.trim(xxx);
2.接受的参数就是要去掉空格的字符串
3.有回调，即为处理字符串两边空格获得的新字符串
4.只是去掉头部和尾部的空格

 // JQ静态方法中的trim去两边空格
        var str = "  t  r  i  m  ";
        var str1 = "   trim   ";
        var newStr = $.trim(str);
        var newStr1 = $.trim(str1);
        console.log("---" + str + "---");   // ---  t  r  i  m  ---
        console.log("---" + newStr + "---");  // ---t  r  i  m---
        console.log("---" + newStr1 + "---"); // ---trim---

JQuery的静态判断isArray/isFunction/isWindow

// 数组array
        var array = [1,3,5,7,9];
        // 对象object
        var object = {name : 'ls',age: 23};
        // 伪数组farray
        var farray = {0:1,1:3,2:5,3:7,4:9,length:5};
        // 函数fn
        var fn = function(){};
        // 全局window
        var win = window;

        // JQ静态判断，返回值为true / false
        var a = $.isArray(array);
        var b = $.isArray(object);
        var c = $.isArray(farray);

        var d = $.isFunction(fn);
        var e = $.isWindow(win);

        console.log("isArray",a,b,c); // true false false
        console.log("isFunction",d);  // true
        console.log("isWindow",e);  // true

JQuery的静态方法holdready

1.作用：holdready是用来禁止掉ready的执行

<script>
        // $.holdready是暂停ready的执行
        $.holdReady(true);
        $(document).ready(function(){
            alert("ready");
        })
    </script>
    <body>
        <button id="btn">点我</button>
        <script>
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                $.holdReady(false);
            }
        </script>
    </body>

JQuery的静态方法type

1.作用：可以用来进行判断
2.格式：$./JQuery. + type（xxx）;

// JQuery中的静态方法type判断的类型
        var a = $.type("str");
        var b = $.type(1);
        var c = $.type(true);
        var d = $.type([]);
        var e = $.type({});
        var f = $.type(function(){});
        var g = $.type(new Date());
        var h = $.type(/test/);
        console.log("JQ-type",a);   // JQ-type string
        console.log("JQ-type",b);   // JQ-type number
        console.log("JQ-type",c);   // JQ-type boolean
        console.log("JQ-type",d);   // JQ-type array
        console.log("JQ-type",e);   // JQ-type object
        console.log("JQ-type",f);   // JQ-type function
        console.log("JQ-type",g);   // JQ-type date
        console.log("JQ-type",h);   // JQ-type regexp