【jQuery】06-jQuery核心函数 07-jQuery对象 08-静态方法和实例方法 09-静态方法each方法 10-静态方法map方法

本文链接：https://blog.csdn.net/qq_20535249/article/details/96962537

06-jQuery核心函数

 <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>

07-jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-jQuery对象</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            * 1.什么是jQuery对象
            * jQuery对象是一个伪数组
            *
            * 2.什么是伪数组?
            * 有0到length-1的属性, 并且有length属性
            */
            var $div = $("div");
            console.log($div);

            var arr = [1, 3, 5];
            console.log(arr);
        });
    </script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

在这里插入图片描述

08-静态方法和实例方法

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

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

</script>

在这里插入图片描述

09-静态方法each方法

forEach() 方法为每个数组元素调用一次函数（回调函数）。

<script>
        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);
        // });

        // 1.利用jQuery的each静态方法遍历数组
        /*
        第一个参数: 当前遍历到的索引
        第二个参数: 遍历到的元素
        注意点:
        jQuery的each方法是可以遍历伪数组的
        */
        // $.each(arr, function (index, value) {
        //     console.log(index, value);
        // });
        $.each(obj, function (index, value) {
            console.log(index, value);
        });
    </script>

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

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

在这里插入图片描述

10-静态方法map方法

map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。

  var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        // 1.利用原生JS的map方法遍历
        /*
        第一个参数: 当前遍历到的元素
        第二个参数: 当前遍历到的索引
        第三个参数: 当前被遍历的数组
        注意点:
        和原生的forEach一样,不能遍历的伪数组
        */
        var newarr;
        newarr = arr.map(function (value, index, array) {
            value++;
            console.log(index, value, array);
            return value;
        });
        console.log(arr);
        console.log(newarr);
        obj.map(function (value, index, array) {
            console.log(index, value, array);
        });

在这里插入图片描述

 var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        var newarr = $.map(arr, function (value, index) {
            // console.log(index, value);
            value++;
            return value;
        });
        var res = $.map(obj, function (value, index) {  //得到的res为一个新的数组
            // console.log(index, value);
            value++;
            return value;
        });

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

        console.log(newarr);
        console.log(res);
        console.log(res2);

        /*
        jQuery中的each静态方法和map静态方法的区别:
        each静态方法默认的返回值就是, 遍历谁就返回谁
        map静态方法默认的返回值是一个空数组

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

在这里插入图片描述