JQuery --- 第一期

个人学习笔记

1.我的第一个JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyJQuery</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //JQuery的固定写法
        $(document).ready(function () {
            alert("Hello ,JQuery");
        });
    </script>
</head>
<body>
</body>
</html>

2.JQuery和JS入口函数的区别

原生JS个JQuery的加载模式不相同:
　　原生JS会等到DOM加载完毕,图片也加载完毕之后执行
　　JQuery只要DOM加载完毕就开始执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和JS入口函数的区别</title>

    <script src="jquery-1.12.4.js"></script>
    <script>
        
        //通过原生JS拿到DOM元素
        window.onload = function (ev) {
            var img = document.getElementsByTagName("img")[0];
            console.log(img);
            //可以拿到DOM元素的宽和高
            var width = window.getComputedStyle(img).width;
            console.log("onload",width);
        }
        //通过JQuery拿到DOM元素,但是JQuery不可以拿到DOM元素的宽和高
        $(document).ready(function () {
           var $img = $("img")[0];
            console.log($img);
        });
        //原生的JS如果编写了多个入口函数,后面的会覆盖前面的
        window.onload = function (ev) {
            alert("Hello , JavaScript1");
        }
        window.onload = function (ev) {
            alert("Hello , JavaScript2");
        }
        // JQuery编写多个入口函数,后面的不会覆盖前面的
        $(document).ready(function () {
            alert("Hello , JQuery1");
        });
        $(document).ready(function () {
            alert("Hello , JQuery2");
        });
    </script>
</head>
<body>
    <img src="https://img.alicdn.com/tfs/TB1ZXiuQhTpK1RjSZFMXXbG_VXa-520-280.png_q90_.webp" alt="">
</body>
</html>

3.JQuery入口函数的其他写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery入口函数的其他写法</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //第一种写法
        $(document).ready(function () {
           alert("Hello JQuery");
        });

        //第二种写法
        jQuery(document).ready(function () {
           alert("Hello JQuery");
        });

        //第三种写法(推荐)
        $(function () {
           alert("Hello ,JQuery");
        });

        //第四种写法
        jQuery(function () {
           alert("Hello ,JQuery");
        });

    </script>
</head>
<body>

</body>
</html>

4.JQuery的冲突问题
　　原来的$访问符号被覆盖下面介绍解决冲突的办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery的冲突问题</title>
    <script src="jquery-1.12.4.js"></script>
    <script src="test.js"></script>

    <script>
        //1.释放$的使用权 注意:释放操作必须在编写其他JQuery代码之前,释放之后就不能继续使用$,改为写JQuery
        jQuery.noConflict();
        jQuery(function () {
           alert("Hello jQuery!");
        });

        //2.自定义访问符号
        var jq = jQuery.noConflict();
        jq(function () {
           alert("Hello jQuery!");
        });
    </script>
</head>
<body>
</body>
</html>

 5.JQuery的核心函数

　　$();就代表调用JQuery的核心函数

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

6.jQuery对象

　　jQuery 对象是一个伪数组,具有索引,长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        /*
        jQuery 对象是一个伪数组,具有索引,长度
         */
        $(function () {
            var $div = $("div");
            console.log($div);
        });
        var nums =[1,2,3];
        console.log(nums);
    </script>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
</html>

7.静态方法和实例方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法和实例方法</title>
    <script>
        //定义一个测试类AClass
        function AClass() {
        }
        //添加一个静态方法并调用
        AClass.staticMethod = function () {
            alert("staticMethod");
        }
        AClass.staticMethod();
        //添加一个实例方法并调用
        AClass.prototype.instanceMethod = function () {
            alert("instanceMethod");
        }
        var a = new AClass();
        a.instanceMethod();
    </script>
</head>
<body>
</body>
</html>

8. 静态方法-each方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法-each方法</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        var arr = [1,3,5,7,9];
        /**
         * 第一个参数,遍历到的元素
         * 第二个参数,当前遍历的索引
         * 注意:原生 JS只能遍历数组,不能遍历伪数组
         */
        arr.forEach(function (value,index) {
            console.log(index,value);
        });
        /**
         * 利用JQuery的静态方法each遍历真数组.
         * 第一个参数为索引,第二个参数为值
         */
        $.each(arr,function (index,value) {
            console.log(index,value);
        });
        //定义一个伪数组
        var obj = {0:1,1:3,2:5,3:7,4:9,length:5}
        /**
         * 利用JQuery的静态方法each遍历伪数组.
         * 第一个参数为索引,第二个参数为值
         */
        $.each(obj,function (index,value) {
            console.log(index,value);
        });
    </script>
</head>
<body>
</body>
</html>

9.静态方法-map方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法-map方法</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        var arr = [1,3,5,7,9];
        var obj = {0:1,1:3,2:5,3:7,4:9,length:5}
        //1.利用原生 JS的map方法遍历, 不能遍历伪数组
        arr.map(function (value, index, array) {
            console.log(index,value,array);
        })
        /**
         * 第一个参数:要遍历的数组
         * 第二个参数,遍历到每个元素之后执行的回调方法
         *          function的参数:
         *                      第一个参数:遍历到的值
         *                      第二个参数:遍历到的索引
         */
        $.map(arr,function (index,value) {
            console.log(index,value);
        })
        /**
         * 默认返回一个空数组
         * map静态方法可以在回调函数中通过return对数组进行处理
         * 注意:和JQuery的静态方法each一样,也可以遍历伪数组
         */
        var res = $.map(obj,function (index,value) {
            console.log(index,value);
        })
        /**
         * 默认返回要遍历的数组本身
         * each静态方法不支持在回调函数中对遍历的数组进行处理
         * @type {*|jQuery}
         */
        var res2 = $.each(obj,function (index,value) {
            console.log(index,value);
        });

        console.log(res);
        console.log(res2);
    </script>
</head>
<body>

</body>
</html>

10.JQuery其他静态方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery其他静态方法</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        var str = "     jQuery      ";
        /**
         * 去掉字符串两端的空格
         * 参数:需要处理的字符串
         * 返回值:处理之后的字符串
         * @type {*|jQuery}
         */
        var res = $.trim(str);
        console.log("---"+str+"---")
        console.log("---"+res+"---")
        /**
         * 判断参数是不是window对象
         * 返回值为布尔类型
         * @type {*|jQuery}
         */
        var res2 = $.isWindow(window);
        console.log(res2)

        var arr = [1,3,5,7,9];
        /**
         * 判断参数是不是一个真数组
         * 返回值为布尔类型
         */
        var res3 = $.isArray(arr);    //真数组返回true
        console.log(res3);
        /**
         * 判断参数是不是一个函数
         * @type {*|jQuery}
         * !!!!注意:JQuery框架本质上就是一个函数
         */
        var res4 = $.isFunction(function () {});
        var res5 = $.isFunction(jQuery);
        console.log(res4);
        console.log(res5);
    </script>
</head>
<body>

</body>
</html>

11.静态方法-holdReady方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法-holdReady方法</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        /**
         * 暂停入口函数的执行
         * 参数为true时为暂停
         * 参数为false时为回复
         */
        $.holdReady(true);
        $(function () {
           alert("ready!");
        });
    </script>
</head>
<body>
<button>回复ready时间</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        $.holdReady(false);
    }
</script>
</body>
</html>

猜你喜欢