【jQuery】学习笔记（一）

欢迎转载，请注明作者和出处。

本文链接： https://blog.csdn.net/weixin_43217942/article/details/102471226

---

jQuery入口函数

 //1
 $(document).ready(function(){
    //todo
 });
 
 //2
 jQuery(document).ready(function(){
    //todo
 });
 
 //3 最常用！
$(function(){
    //todo
})；

//4
jQuery(function()[
    //todo
});

释放jQuery的$符

注意点：释放操作必须编写在使用的jQuery代码之前，释放后就在也不能使用$了，该为使用jQuery

改为另一个访问符号

var jq = jquery.noConflict();
//释放$符

jQuery对象

jQuery对象是包装的js对象，本质是一个伪数组。

什么是伪数组，伪数组的特征，与数组（Array）的区别？

• 有0到length-1的属性，并且有length属性。
• 真数组的长度是可变的，伪数组的长度不可变。
• 真数组可以使用数组中的方法（.forEach）,伪数组不可以
• 真数组可以使用原型辨别，伪数组没有__proto__和prototype

如何辨别真数组和伪数组？

测试代码:

<script>
    var arr = [1,2,3];

    var  obj =function () {
        var a = "one";
        var b = "two";
        var c = "three";

    };
    console.log(arr);
    console.log(obj);
</script>

输出结果:

//arr
Array(3)
0: 1
1: 2
2: 3
length: 3
__proto__: Array(0)

//obj
Object
0:"one"
1:"two"
2:"three"
__proto__:Object

从上方结果可以观察到：

• 数组的父类是Array，而伪数组的父类是Objet
• 伪数组只有数组的外在表现，而没有JS数组强大的功能，因为伪数组的父类不是Array，所以不能使用Array中的各种方法

静态方法，实例方法

直接添加在类上面等等成为静态方法，添加到类的原型方法称为实例方法。

<script>
//创建一个类
function TestCalss() {

}

//添加静态方法
TestCalss.staticMethod = function () {
    console.log("staticMethod");
};

//静态方法通过类名直接调用
TestCalss.staticMethod();
    
//为对象添加实例方法
TestCalss.prototype.instanceMethod = function () {
    console.log("instanceMethod");
};

//调用实例方法
new TestCalss().instanceMethod();
</script>

最后输出了“staticMethod”、“instanceMethod”。

什么是对象的原型对象？

原型对象对JS类的顶层对象，一般用来实现类之间的数据和方法共享。

function F() {} // F 是一个函数，函数也是对象，而且每个函数都有一个属性叫："prototype"
var o = new F(); // F.prototype 就是 o 的原型对象
 
console.log(o.name);
// 输出： undefined
 
F.prototype.name = "foo";
console.log(o.name);
// 输出： foo
 
 
// 上面这个例子是想说明：通过 new 在对象 o 与对象 F.prototype 之间建立了联系， 这个建立联系
// 的方式有人叫 "原型继承" 。 当访问的对象属性不存在时，就会沿着原型链去查找。

jQuery的each（）方法

    var arr = [1,2,3,4,5];
    arr.forEach(function (value,index) {
        console.log("idx:"+index+"  value:"+value)
    });

    $.each(arr,function (index,value) {
        console.log("idx:"+index+"  value:"+value)
    })

• jQuery中的each（）方法的value和index月forEach（）中的相反
• jQuery的each（）方法可以遍历伪数组，而forEach（）方法却不可以

jQuery中的each方法有几个形式，分别应用于什么场景？

    var arr = [1,2,3,4,5];
    var obj = {
        0:"one",
        1:"two",
        2:"three",
        length:3
    };

    $.each(arr,function (index,value) {
        console.log("idx:"+index+"  value:"+value)
    });
    $.each(obj,function (index,value) {
        console.log("idx:"+index+"  value:"+value);
    })

jQuery中map（）方法

    var arr = [1,2,3,4,5];
    var obj = {
        0:"one",
        1:"two",
        2:"three",
        length:3
    };

    arr.map(function (value, index, array) {
        console.log("index:"+index+"  value:"+value);
    });
    
    $.map(arr,function (value,index) {
        console.log("index:"+index+"  value:"+value);
    });

jQuery和JS中回调函数都是先value后index

jQuery中each（）方法和map（）方法的区别

1. each（）方法默认返回值是它遍历的数组
2. map（）方法默认的返回值是一个空数组
3. each（）方法不支持在回调函数中对遍历的数组进行处理
4. map（）方法可以在回调函数中通过对return对遍历的数组进行处理，然后生成一个新的数组返回

jQuery中map（）与原生JS中的map（）的区别

    var arr = [1,2,3,4,5];
    var obj = {
        0:"one",
        1:"two",
        2:"three",
        length:3
    };

    arr.map((value,index)=>{
        console.log("index:"+index+"  value:"+value);
    });
    //和原生的forEach（）一样，不能遍历伪数组


    //jQuery map（）遍历伪数组
    $.map(obj,(value,index)=>{
        console.log(value,index);
    });

    //通过map（）修改数组元素
    var ar = $.map(arr,(value,index)=>{
        return value+1;
    });
    $.map(ar,(value,index)=>{
        console.log(value,index);
    });

主要区别：jQuery 中的map（）方法可以遍历伪数组，而原生JS的map（）不支持

---

PS：希望对你有帮助，欢迎评论，求点赞，你的认可是我写作的最大动力~~