jQuery入门到精通（二）连载

飞熊 • 2023年4月25日上午9:59 • 技术随笔 • 阅读 187

入门jQuery

1.静态方法和实例方法

//1.定义一个类
function AClass () {
}
//2.给这个类添加一个静态方法 直接添加给类的就是静态方法
AClass.staticMethod = function(){
    alert("staticMethod");
}
//静态方法通过类名调用
AClass.staticMethod();

//3. 给这个类添加一个实例方法
AClass.prototype.instanceMethod = function(){
    alert("instanceMethod");
}
//实例方法通过类的实例调用
//创建一个实例（创建一个对象）
var a = new AClass();
a.instanceMethod();

2.jQuery-each方法

/*
index：遍历到的元素
value：当前遍历到的索引
注意点：原生的forEach方法只能遍历数组，不能遍历伪数组
       jQuery的each方法可以遍历伪数组
*/

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

arr.forEach(function(value,index){
    console.log(index,value);
});


$.each(arr,function(index,value){
    console.log(index,value);
});

3.jQuery-map方法

jQuery中的each静态方法和map静态方法的区别：1、each静态方法默认的返回值就是，遍历谁就返回谁。map静态方法默认的返回值是一个空数组；2、each静态方法不支持在回调函数中对遍历的数组进行处理，map静态方法可以在回调函数中通过return对遍历的数组进行处理然后生成一个新的数组返回

/*
value：当前遍历到的元素
index：当前遍历到的索引
array：当前遍历到的数组
注意点：原生JS的map方法和原生的forEach一样，不能遍历的伪数组
       和jQuery中的each静态方法一样， map静态方法也可以遍历伪数组
*/

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

arr.map(function(value, index, array){
    console.log(value, index, array);
});

var res = $.each(obj, function (value, index){
    console.log(index, value);
});

var res2 = $.map(obj, function (value, index){
    console.log(index, value);
    return index + value;
});

4.jQuery中的其它静态方法

/* 
$.trim();
作用：去除字符串两端的空格
参数：需要去除空格的字符串
返回值：去除空格之后的字符串
*/
var res = "  inj  ";
var str = $.trim(res);
console.log("---"+res+"---");
console.log("---"+str+"---");

/* 
$.isWindow();
作用：判断传入的对象时候是window对象
返回值：true/false
*/
var res = $.isWindow(arr);
console.log(res);

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

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

/* 
$.isFunction();
作用：判断传入的对象是否是一个函数
返回值：true/false
jQuery本质上就是一个函数
*/
var res = $.isFunction(jQuery);
console.log(res);

5.静态方法holdReady方法

<script>
    $.holdReady(true); //作用：暂停ready执行
    $(document).ready(function(){
        alert("ready");
    });
</script>

<body>
    <button>回复ready事件</button>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function(){
            alert("btn");
        }
    </script>
</body>

https://blog.csdn.net/qq_53123067/article/details/124459049?spm=1001.2014.3001.5502

https://blog.csdn.net/qq_53123067/article/details/124471170?spm=1001.2014.3001.5501