【jQuery原理】01-jQuery的基本结构 02-jQuery入口函数测试 03-apply和call方法 04-jQuery的extend（扩展）方法 05-jQuery监听DOM加载

01-jQuery的基本结构

  <script>
        /*
        1.jQuery的本质是一个闭包
        2.jQuery为什么要使用闭包来实现?
          为了避免多个框架的冲突
        3.jQuery如何让外界访问内部定义的局部变量
           window.xxx = xxx;
        4.jQuery为什么要给自己传递一个window参数?
           为了方便后期压缩代码
           为了提升查找的效率
        5.jQuery为什么要给自己接收一个undefined参数?
           为了方便后期压缩代码
           IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined
        */
        (function( window, undefined ) {
            var jQuery = function( ) {
                return new jQuery.prototype.init( );
            }
            jQuery.prototype = {
                constructor: jQuery
            }
            jQuery.prototype.init.prototype = jQuery.prototype;
            window.jQuery = window.$ = jQuery;
        })( window );



        var num1, num2, num3;
        (function f1() {
            var num = 10;
            window.num = num;
        })();
        (function f2() {
            var num = 20;
        })();
        console.log(num);

        var value = 20;
        function f3() {
            // var value = 10;
            console.log(value);
        }
        f3();

        undefined = 998;
        console.log(undefined);
    </script>

02-jQuery入口函数测试

 <script>
        window.onload = function (ev) {
        // $(function () {
            /*
            jQ入口函数传入不同参数得到的实例
            1.传入 '' null undefined NaN  0  false
            2.传入html片段
            3.传入选择器
            4.传入数组
            5.传入伪数组
            6.传入对象
            7.传入DOM元素
            8.传入基本数据类型
             */
            //  1.传入 '' null undefined NaN  0  false
            // 会返回一个空的jQuery对象给我们
            console.log($());
            console.log($(''));
            console.log($(null));
            console.log($(undefined));
            console.log($(NaN));
            console.log($(0));
            console.log($(false));

            // 2.传入html片段
            // 会将创建好的DOM元素存储到jQuery对象中返回
            console.log($('<p>1</p><p>2</p><p>3</p>'));
            // console.log($('    <div><p>1</p></div><div><p>2</p></div>    '));

            // 3.传入选择器
            // 会将找到的所有元素存储到jQuery对象中返回
            console.log($('li'));

            // 4.传入数组
            // 会将数组中存储的元素依次存储到jQuery对象中立返回
            var arr = [1, 2, 3, 4, 5, 6];
            console.log($(arr));

            // 5.传入伪数组
            // 会将数组中存储的元素依次存储到jQuery对象中立返回
            var likeArr = {0:"lnj", 1:"33", 2:"male", length: 3};
            console.log($(likeArr));

            // console.log(typeof arr);
            // console.log(typeof likeArr);
            // console.log(arr.toString());
            // console.log(likeArr.toString());
            // console.log(({}).toString.apply(arr));

            // 6.传入对象
            // 会将传入的对象存储到jQuery对象中返回
            function Person() {}
            console.log($(new Person()));

            // 7.传入DOM元素
            // 会将传入的DOM元素存储到jQuery对象中返回
            console.log($(document.createElement('div')));

            // 8.传入基本数据类型
            // 会将传入的基本数据类型存储到jQuery对象中返回
            console.log($(123));
            console.log($(true));

            /*
             1.传入 '' null undefined NaN  0  false, 返回空的jQuery对象
             2.字符串:
             代码片段:会将创建好的DOM元素存储到jQuery对象中返回
             选择器: 会将找到的所有元素存储到jQuery对象中返回
             3.数组:
             会将数组中存储的元素依次存储到jQuery对象中立返回
             4.除上述类型以外的:
             会将传入的数据存储到jQuery对象中返回
            */
            // });
        }
    </script>

03-apply和call方法

  <script>
        /*
        apply和call方法的作用:
        专门用于修改方法内部的this

        格式:
        call(对象, 参数1, 参数2, ...);
        apply(对象, [数组]);
        */
        function test() {
            console.log(this);
        }
        // window.test();
        var obj = {"name": "lnj2"};
        /*
        1.通过window.test找到test方法
        2.通过apply(obj)将找到的test方法内部的this修改为自定义的对象
        */
        // window.test.apply(obj);
        // window.test.call(obj);

        function sum(a, b) {
            console.log(this);
            console.log(a + b);
        }
        // window.sum.call(obj, 1, 2);
        /*
        1.通过window.sum找到sum方法
        2.通过apply(obj)将找到的sum方法内部的this修改为自定义的对象
        3.将传入数组中的元素依次取出, 传递给形参
        */
        // window.sum.apply(obj, [3, 5]);

        // var arr = [];
        // arr.push(1);
        // console.log(arr);

        // 真数组转换伪数组的一个过程
        // var arr = [1, 3, 5, 7, 9];
        // var obj = {};
        /*
        1.通过[].push找到数组中的push方法
        2.通过apply(obj)将找到的push方法内部的this修改为自定义的对象
        3.将传入数组中的元素依次取出, 传递给形参
        */
        // [].push.apply(obj, arr);
        // console.log(obj);
        window.onload = function (ev) {
            // 系统自带的伪数组
            var res = document.querySelectorAll("div");
            // 自定义的伪数组
            var obj = {0:"lnj", 1:"33", length: 2};
            // var arr = []; // 真数组
            // [].push.apply(arr, obj);
            // console.log(arr);

            // 如果想将伪数组转换为真数组那么可以使用如下方法
            var arr = [].slice.call(obj);
            console.log(arr);
            // var arr2 = [1, 3, 5, 7, 9];
            // 如果slice方法什么参数都没有传递, 会将数组中的元素放到一个新的数组中原样返回
            // var res2 = arr2.slice();
            // var res2 = arr2.slice(2);
            // var res2 = arr2.slice(2, 4);
            // console.log(res2);
        }
    </script>

04-jQuery的extend（扩展）方法

<script>
        function njQuery() {

        }
        /*
        njQuery.extend = function (obj) {
            // 此时此刻的this就是njQuery这个类
            // console.log(this);
            for(var key in obj){
                // njQuery["isTest"] = function () {console.log("test");}
                this[key] = obj[key];
            }
        }
        njQuery.extend({
            isTest: function () {
                console.log("test");
            }
        });
        njQuery.isTest();
        */
        /*
        njQuery.prototype.extend = function (obj) {
            // 此时此刻的this是njQuery对象
            // console.log(this);
            for(var key in obj){
                // q["isDemo"] = function () {console.log("demo");}
                this[key] = obj[key];
            }
        }
        var q = new njQuery();
        q.extend({
            isDemo: function () {
                console.log("demo");
            }
        });
        q.isDemo();
        */

        njQuery.extend = njQuery.prototype.extend = function (obj) {
            // console.log(this);
            for(var key in obj){
                this[key] = obj[key];
            }
        }
        // njQuery.extend({});
        var q = new njQuery();
        q.extend({});
    </script>

05-jQuery监听DOM加载

 <script>
        /*
        onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
        DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调
        */
        /*
        window.onload = function (ev) {
            // var res = document.querySelectorAll("div");
            // console.log(res);
            console.log("onload");
        }
        document.addEventListener("DOMContentLoaded", function () {
            // var res = document.querySelectorAll("div");
            // console.log(res);
            console.log("DOMContentLoaded");
        });
        */
        /*
        document.readyState属性有如下的状态
        uninitialized - 还未开始载入
        loading - 载入中
        interactive - 已加载，文档与用户可以开始交互
        complete - 载入完成

        onreadystatechange事件就是专门用于监听document.readyState属性的改变的
        */
        /*
        document.attachEvent("onreadystatechange", function () {
            if(document.readyState == "complete"){
                console.log("onreadystatechange");
            }
        });
        */
        $(function () {
            var res = document.querySelectorAll("div");
            console.log(res);
        });
    </script>