jQuery基础之核心函数，jQuery对象及伪数组静态方法和实例方法的定义，各种静态方法（each,map,holdRedady,trim,isWindow,isArray,isFunction)

蔚落 2024-04-17 17:50 41阅读 0赞

### jQuery核心函数 ###

1.接收一个函数  
2.接收一个字符串  
        2.1接收一个字符串选择器  
                返回一个jQuery对象, 对象中保存了找到的DOM元素  
         2.2接收一个字符串代码片段  
                 返回一个jQuery对象, 对象中保存了创建的DOM元素  
3.接收一个DOM元素  
         会被包装成一个jQuery对象返回给我们

实例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>06-jQuery核心函数</title>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            // $();/jQuery原理();就代表调用jQuery的核心函数
    
            // 1.接收一个函数
            $(function () { 
                alert("hello lnj");
               		 // 2.接收一个字符串
    	            // 2.1接收一个字符串选择器
    	            // 返回一个jQuery对象, 对象中保存了找到的DOM元素
    	            var $box1 = $(".box1");
    	            var $box2 = $("#box2");
    	            console.log($box1);
    	            console.log($box2);
    	            
    	            // 2.2接收一个字符串代码片段
    	            // 返回一个jQuery对象, 对象中保存了创建的DOM元素
    	            var $p = $("<p>我是段落</p>");
    	            console.log($p);
    	            $box1.append($p);
    		            
    	            // 3.接收一个DOM元素
    	            // 会被包装成一个jQuery对象返回给我们
    	            var span = document.getElementsByTagName("span")[0];
    	            console.log(span);
    	            var $span = $(span);
    	            console.log($span);
            });
        </script>
    </head>
    <body>
    	<div class="box1"></div>
    	<div id="box2"></div>
    	<span>我是span</span>
    </body>
    </html>

### jQuery对象 ###

1.什么是jQuery对象  
         jQuery对象是一个伪数组

2.什么是伪数组?  
         1，具有length属性  
         2，按索引方式存储数据  
         3，不具有数组的push,pop等方法

### 静态方法和实例方法 ###

类和对象（class）是两种以计算机为载体的计算机语言的合称。对象是对客观事物的抽象，类是对对象的抽象。类是一种抽象的数据类型。  
它们的关系是，对象是类的实例，类是对象的模板。对象是通过new className产生的，用来调用类的方法;类的构造方法

// 1.定义一个类
            function AClass() { 
            }
    		
            // 2.给这个类添加一个静态方法
            // 直接添加给类的就是静态方法
            AClass.staticMethod = function () { 
                alert("staticMethod");
            }
    		
            // 静态方法通过类名调用
            AClass.staticMethod();
            
    		// 3.给这个类添加一个实例方法
            AClass.prototype.instanceMethod = function () { 
                alert("instanceMethod");
            }
            // 实例方法通过类的实例调用
            // 创建一个实例(创建一个对象)
            var a = new AClass();
            // 通过实例调用实例方法
            a.instanceMethod();

### 静态方法each方法 ###

实例如下：

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

原生的forEach方法只能遍历数组, 不能遍历伪数组

/* 第一个参数: 遍历到的元素 第二个参数: 当前遍历到的索引 */
            arr.forEach(function (value, index) { 
                console.log(index, value);
            });
            obj.forEach(function (value, index) { 
                console.log(index, value);		//出错
            });

jQuery的each方法是可以遍历伪数组的

/* 第一个参数: 当前遍历到的索引 第二个参数: 遍历到的元素 */
            $.each(arr, function (index, value) { 
                console.log(index, value);
            });
            $.each(obj, function (index, value) { 
                console.log(index, value);
            });

### 静态方法map方法 ###

实例如下：

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

和原生的forEach一样,不能遍历的伪数组

/* 第一个参数: 当前遍历到的元素 第二个参数: 当前遍历到的索引 第三个参数: 当前被遍历的数组 */
          arr.map(function (value, index, array) { 
               console.log(index, value, array);
           });
            obj.map(function (value, index, array) { 
              console.log(index, value, array);//报错
            });

和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组

/* 第一个参数: 要遍历的数组 第二个参数: 每遍历一个元素之后执行的回调函数 回调函数的参数: 第一个参数: 遍历到的元素 第二个参数: 遍历到的索引 */
            $.map(arr, function (value, index) { 
                 console.log(index, value);
            });

jQuery中的each静态方法和map静态方法的区别:

each静态方法默认的返回值就是, 遍历谁就返回谁  
        map静态方法默认的返回值是一个空数组

each静态方法  不支持在回调函数中对遍历的数组进行处理  
        map静态方法可以在回调函数中通过return  对遍历的数组进行处理, 然后  生成一个新的数组返回

### 静态方法holdReady方法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>12-静态方法holdReady方法</title>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            // $.holdReady(true); 作用: 暂停ready执行
            $.holdReady(true);
            $(document).ready(function () { 
                alert("ready");
            });
        </script>
    </head>
    <body>
    <button>回复ready事件</button>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () { 
            $.holdReady(false);
        }
    </script>
    </body>
    </html>

### 其他静态方法 ###

$.trim();  
作用: 去除字符串两端的空格  
参数: 需要去除空格的字符串  
返回值: 去除空格之后的字符串

var str = " lnj ";
            var res = $.trim(str);
            console.log("---"+str+"---");	//--- lnj ---
            console.log("---"+res+"---")	;//---lnj---

// 真数组
            var arr = [1, 3, 5, 7, 9];
            // 伪数组
            var arrlike = { 0:1, 1:3, 2:5, 3:7, 4:9, length:5};
            // 对象
            var obj = { "name":"lnj", age:"33"};
            // 函数
            var fn = function(){ };
            // window对象
            var w = window;

$.isWindow();  
作用: 判断传入的对象是否是window对象  
返回值: true/false

var res = $.isWindow(w);
            console.log(res);

$.isArray();  
作用: 判断传入的对象是否是真数组  
返回值: true/false

var res = $.isArray(w);
            console.log(res);

$.isFunction();  
作用: 判断传入的对象是否是一个函数  
返回值: true/false

注意点:
            jQuery框架本质上是一个函数
            (function( window, undefined ) { 
             })( window );
            
            var res = $.isFunction(jQuery);
            console.log(res);//true