jQuery（四）--jQuery静态方法和实例方法：each()、map()、trim()、isArray()、isFunction()、isWindow()、holdReady()

目录

i.each()

ii.map()

iii.trim()

iv.isArray()

v.isFunction()

vi.isWindow()

vii.holdReady()

---

公共部分：

<script src="js/jquery-1.12.3.min.js"></script>

先来看看js中的实例方法和静态方法：

        //1.定义一个类
        function AClass() {}

        //2.给这个类添加一个静态方法
        //直接添加给类的就是静态方法
        AClass.staticMethod = function() {
            console.log('staticMethod');
        };

        //静态方法通过类名调用
        AClass.staticMethod();

        //3.给这个类添加实例方法
        AClass.prototype.instanceMethod = function() {
            console.log('instanceMethod');
        };

        //实例方法通过类的实例调用
        //创建实例
        const a = new AClass();
        //通过实例调用
        a.instanceMethod();

i.each()

        const arr = [1, 3, 5, 7, 9];
        /**
         * 原生JS
         * 第一个参数：遍历到的元素
         * 第二个参数：当前遍历到的元素
         * 原生的forEach只能遍历数组，不能遍历伪数组：var obj={0:1,1:2,2:4,length:3};
         * 元素js写法
          arr.forEach(function(value, index) {
            console.log(index, value);
        });
        *
        *jQuery
        第一个参数：当前遍历到的索引
        第二个参数：遍历到的元素
        jQuery可以遍历伪数组
        */
        const obj = {
            0: 1,
            1: 2,
            2: 4,
            length: 3
        };
        $.each(obj, function(index, value) {
            console.log(index, value);
        });

---

ii.map()

        const arr = [1, 3, 5, 7, 9];
        const obj = {
            0: 1,
            1: 2,
            2: 4,
            length: 3
        };

        /**
         * 利用原生JS遍历
         * 第一个参数：当前遍历到的元素
         * 第二个参数：当前遍历到的索引
         * 第三个参数：当前被遍历的数组
         *  arr.map(function(vaule, index, array) {
            console.log(index, vaule, array);
         });
         * 和原生forEach一样，不能遍历伪数组
         * 
         * 
         * 第一个参数：要遍历的数组
         * 第二个参数：每遍历一个元素之后执行的回调函数
         * 回调函数的参数：
         * 第一个参数：遍历到的元素
         * 第二个参数：遍历到的索引
         * 和jQuery中的each一样，可以遍历伪数组
         * 
         * 
         * each静态方法默认的返回值就是，遍历谁就返回谁
         * map静态方法的默认返回值是一个空数组
         * each静态方法不支持在回调函数中对遍历的数组进行处理
         * map静态方法可以在回调函数中通过return对遍历的数组进行操作处理，生成一个新的数组返回
         */
        let res = $.map(obj, function(value, index) {
            console.log(index, value);
            return index + value;
        });

        let res1 = $.each(obj, function(value, index) {
            console.log(index, value);
            return index + value;
        });

        console.log(res, res1);

---

iii.trim()

• 作用：去除字符串两端的空格
• 参数：需要去除空格的字符串
• 返回值：去除空格之后的字符串

        const str = "   lwj    ";
        console.log(str);
        const res = $.trim(str);
        console.log(res);

 

---

iv.isArray()

作用：判断传入对象是否是真数组

返回值：true/false

        var arr = [1, 5, 6]; //数组 
        var arrlike = {
            0: 1,
            1: 2,
            2: 8,
            length: 3
        }; //伪数组
        var obj = {
            name: 'lwj',
            age: 18
        }; //对象
        var fn = function() {}; //函数
        var w = window; //window
        var res = $.isArray(arr);
        console.log(res); //true

---

 

v.isFunction()

作用：判断传入对象是否是函数

返回值：true/false

jQuery框架本质上是一个 函数

        var arr = [1, 5, 6]; //数组 
        var arrlike = {
            0: 1,
            1: 2,
            2: 8,
            length: 3
        }; //伪数组
        var obj = {
            name: 'lwj',
            age: 18
        }; //对象
        var fn = function() {}; //函数
        var w = window; //window
        var res = $.isFunction(fn);
        console.log(res); //true

---

 

vi.isWindow()

作用：判断传入的对象是否是window对象

返回值：true/false

        var arr = [1, 5, 6]; //数组 
        var arrlike = {
            0: 1,
            1: 2,
            2: 8,
            length: 3
        }; //伪数组
        var obj = {
            name: 'lwj',
            age: 18
        }; //对象
        var fn = function() {}; //函数
        var w = window; //window
        var res = $.isWindow(w);
        console.log(res);//true

---

vii.holdReady()

作用：暂停ready函数的执行

        $.holdReady(true);
        $(document).ready(function() {
            console.log("ready");
        })



        var btn = document.querySelector("button");
        btn.onclick = function() {
            $.holdReady(false);
        };