jQuery的一些简单知识点(一)

来源：互联网发布：抓阄软件编辑：程序博客网时间：2024/05/21 10:10

1.必备tips1：Object.prototype.toString

    /*     * Object.prototype.toString     * 作用：根据内部的this返回一个类似于这样的字符串'[object constructorName]'     * 这个方法有个缺点，不能获取用户自定义对象的具体类型，只能获取内置对象的类型。     * */    console.log(typeof []);//object    console.log([]);//根据打印找constructorName    console.log(Object.prototype.toString.call([]));//[object Array]    console.log(typeof new Date());//object    console.log(Object.prototype.toString.call(new Date()));//[object Date]    console.log(typeof Array);//function    console.log(Array); //ƒ Array() { [native code] }    console.log(Object.prototype.toString.call(Array));//[object Function]    console.log(typeof Date);//function    console.log(Object.prototype.toString.call(Date));//[object Function]    // 简写 ==> 因为{}对象直接继承Object.prototype，    // 所以通过这个对象得到的toString，一定来自Object.prototype。    //这里注意到｛｝外面加了一个小括号（）,我们接下来会讲到，请往下看。    console.log(({}).toString.call([]));//[object Array]    console.log(({}).toString.call(new Date()));//[object Date]    console.log(({}).toString.call(Array));//[object Function]    console.log(({}).toString.call(Date));//[object Function]    // 用这个toString获取自定义对象的类型    //这个方法有个缺点，不能获取用户自定义对象的具体类型，只能获取内置对象的类型。    function Person() {}    var xiaofang = new Person();    console.log(({}).toString.call(xiaofang)); //[object Object]

2.必备tips2：{ }代码块和对象

        /*        * 什么是代码块：        * 代码块就是一对大括号。        *        * 如果把一对大括号:        1.赋值给其他变量，例如:var myobj={}，        2.或者参与运算，那么大括号就变成了字面对象，例如:用小括号包起来({})。        * */        var obj={};        console.log(obj);//看控制台打印，并展开观察原型中的方法，toString是其原型中的方法        {            var a = 1;            console.log(a);        }        console.log(typeof ({}));        console.log(typeof {});        // 需要通过运算，把{}转换为字面量，才能调用方法        console.log(({}).toString()); // '[object Object]'        console.log(obj.toString()); // '[object Object]'        // 错误，代码块不能调用方法        ({}).toString();        // {}.toString(); 这样打开会报错

3.必备tips3：toString方法

    <script>        // 字符串 ==> String.prototype.toString        var a="ddd";        console.log(a.toString());//ddd        var e= new String();        console.log(e.toString());//        var e= new String('string');        console.log(e.toString());//string        // 数组 ==> Array.prototype.toString        var b=[1,2,3,4,5,6];        console.log(b.toString());//1,2,3,4,5,6        var b=[];        console.log(b.toString());//        var d=new Array();        console.log(d.toString());//        // 对象  ==> Object.prototype.toString        var c={};        console.log(c.toString());//[object Object]        // 函数 ==> Function.prototype.toString        console.log(Function.toString());//function Function() { [native code] }        console.log(Array.toString());//function Array() { [native code] }        console.log(RegExp.toString());//function RegExp() { [native code] }        function fn() {            console.log('我写的');        }        console.log(fn.toString());        // function fn() {        //     console.log('我写的');        // }    </script>

4.jQuery的本质

<body>    <script>    // 真数组    var arr = [1, 2, 3];    console.log(arr);    console.log(({}).toString.call(arr));//[object Array]    console.log(arr.__proto__.constructor);//真数组的构造函数为"ƒ Array() { [native code] }函数"    /*     * jquery对外暴露了两个方法：jQuery和$,     * 这两方法实际上是同一个方法，     * 通过调用这两个方法，可以得到一个jQuery实例对象。     *     * jQuery实例对象是一个伪数组对象。     *     * jQuery和$实际上是一个工厂函数。     * */    // 工厂函数直接调用，就可以得到一个实例    var $div = $('<div></div>');    var jQueryDiv = jQuery('<div></div>');    console.log($div);    console.log($div.__proto__.constructor);//伪数组的构造函数不是"ƒ Array() { [native code] }函数"    console.log(jQueryDiv);    console.log(jQueryDiv.__proto__.constructor);    // 验证实例是伪装组    console.log(({}).toString.call($div));//[object Object]    </script>

4.真数组伪数组PK

    <script>        /*        * 数组的分类：        *        * 1、真数组        * new Array 创建的数组，或者字面量形式 [] 创建的数组，都是真数组。        * 1.1 稀疏数组        * 数组中，某些下标不存在，即为稀疏数组。        * 1.2 非稀疏数组        * 数组中没有缺失任何值。        *        * 2、伪数组        * 必须要有length属性，        * 要么length为0，要么有length - 1为下标的属性。        * */        /*        * 伪数组的特点：        * 1、必须要有length属性        * 2、如果length属性值为0，那么这个对象有没有元素无所谓        * 3、如果length属性值不为0，那么这个对象一定有 (length - 1) 为下标的属性值。        * */        // 是伪装组        var obj = { length: 0 };        var obj = { length: 4, 3: 'a' }; // 没有0，1，2可以认为0，1，2存的是undefined        var obj = { length: 2, 0: 'a', 1: 'b' };        // 不是伪数组，因为没有 9(length - 1) 这个属性        var obj = { length: 10, 0: 'a', 1: 'b', 2: 'c', 3: 'd', 4: 'e', 5: 'f' };    </script>

5.jQuery插件机制

    <script>        /*        * jQuery插件实现机制：        * 就是给原型添加一些功能方法。        * */        // 咱们的自调结构，沿用了1.7的版本        (function( w ) {            // 对外暴露的工厂函数            function jQuery() {                return new jQuery.fn.init();            }            // 给原型提供一个简写方式            jQuery.fn = jQuery.prototype = {            };            // init是jQuery中真正的构造函数            var init = jQuery.fn.init = function() {            };            // 替换构造函数的原型 为 jQuery工厂的原型            //为了实现插件机制，让外界可以透过jQuery.fn扩充方法。            init.prototype = jQuery.fn;            // 把工厂通过两个变量暴露出去            w.jQuery = w.$ = jQuery;        }( window ));        // 实现一个jQ弹出框插件        jQuery.fn.alert = function( msg ) {            alert( msg );        };        // 测试插件        var $$ = $();        $$.alert('弹出框插件');    </script>

6.jQuery入口函数的实现思路

    <script>        /*        * jQ入口函数根据不同参数创建实例的样式,入口函数的参数无非以下几种：        *        * 测试用例：        * 1、传入null、undefined、0、NaN、''        * 2、选择器        * 3、html片段        * 4、数组        * 5、伪数组        * 6、对象        * 7、其他基本数据类型        * 8、DOM        * */简化版：        function init(selector){            if (!selector) {                //1、传入null、undefined、0、NaN、''返回空对象( 即空实例 )                return this;            }else if(typeof selector == 'string'){                if () {                    //2、传入字符串，那么需要判断是HTML片段,如果是片段，则创建对应的DOM，然后添加到实例身上  $('<span>hello world</span>')                }else{                    //否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上。                    //DOM元素 $('.test') $('#test') $('div')                 }            }else if (){                //3、如果是数组或伪数组，那么把每一项分别添加到实例身上。            }else{                //4、除了上面的数据类型，剩余的，统一添加到实例身上。            }        }细化版（简化版的细化版）：        function init( selector ) {            // 传入null、undefined、0、NaN、''返回空对象( 即空实例 )            if ( !selector ) {                return this;            }            // 传入字符串，那么需要判断是html片段 还是 其它            else if ( typeof selector == 'string' ) {                // 如果是片段，则创建对应的DOM，然后添加到实例身上，                // 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。                if (  ) {                    /*                    * 创建的思路：                    * 1、先创建一个临时的div容器                    * 2、设置这个div的innerHTML为html片段，                    * 这些片段就自动转变为了div的子元素，                    * 3、然后遍历div的子元素分别添加this身上，记住给实例补充length属性值，                    *  可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。                    * */                }                // 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上                else {                    /*                    * 实现的思路：                    * 1、使用querySelectorAll获取页面中的元素                    * 2、然后遍历获取到所有元素分别添加this身上，记住给实例补充length属性值，                    * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。                    * */                }            }            /*            * 判断是不是真假数组的思路：            * 1、先把函数和window排除掉，            * 2、然后通过toString来判断是不是真数组            * 3、否则再判断是不是伪数组            * 备注：下面的判断只用来判断是不是伪数组，不要用下面的判断条件判断真数组，            *       例如：[ 0:1, , , ] 使用下面的判断，就会得到false，造成真数组的误判。            * 3.1、 先看看这个对象有没有length属性，            * 3.2、 如果有，看看length的值是不是为0，如果为0，OK是伪数组，            * 3.3、 如果length的值不为0，看看这个数据有没有 length - 1这个属性，如果有，OK是伪数组。            * 建议把这个是否是真假数组的判断封装为一个函数，在这里调用。            * */            else if (  ) {                /*                * 实现的思路：                * 把真或伪数组中的每一项分别添加到实例身上，记住给实例补充length属性值，                * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。                * */            }            else {                /*                * 实现的思路：                * 把这个参数直接添加到实例身子，length为1即可。                * */            }        }        console.log(new init(null));;    </script>

7.细化版本中对字符串的处理

        function init(selector){            if (!selector) {                //1、传入null、undefined、0、NaN、''返回空对象( 即空实例 )                return this;            }else if(typeof selector == 'string'){                if () {                    //2、传入字符串，那么需要判断是HTML片段,如果是片段，则创建对应的DOM，然后添加到实例身上  $('<span>hello world</span>')                }else{                    //否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上。                    //DOM元素 $('.test') $('#test') $('div')                 }            }else if (){                //3、如果是数组或伪数组，那么把每一项分别添加到实例身上。            }else{                //4、除了上面的数据类型，剩余的，统一添加到实例身上。            }        }    // 判断是不是html片段    init.isHTML = function(html) {        // 如果是空类型的，直接返回false        if (!html) {            return false;        }        // 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。        if (html.charAt(0) == '<' && html.charAt(html.length - 1) == '>' && html.length >= 3) {            return true;        }        return false;    }    // 去掉字符串首尾空白字符    init.trim = function(str) {        // 不是字符串就不处理了        if (typeof str !== 'string') {            return str;        }        // 优先使用内置的trim方法        if (str.trim) {            return str.trim();        }        // 把首尾空白字符替换为空，然后返回        return str.replace(/^\s+|\s+$/g, '');    }    function init(selector) {        // 传入null、undefined、0、NaN、''返回空对象( 即空实例 )        if (!selector) {            return this;        }        // 传入字符串，那么需要判断是html片段 还是 其它        else if (typeof selector == 'string') {            // 为了用户友好体验，先去掉首尾空白字符            selector = init.trim(selector);            // 如果是片段，则创建对应的DOM，然后添加到实例身上，            // 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。            if (init.isHTML(selector)) {                /*                 * 创建的思路：                 * 1、先创建一个临时的div容器                 * 2、设置这个div的innerHTML为html片段，                 * 这些片段就自动转变为了div的子元素，                 * 3、然后遍历div的子元素分别添加this身上，记住给实例补充length属性值，                 *  可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。                 * */                var tempDiv = document.createElement('div');                tempDiv.innerHTML = selector;                [].push.apply(this, tempDiv.childNodes);                return this;            }            // 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上            else {                /*                 * 实现的思路：                 * 1、使用querySelectorAll获取页面中的元素                 * 2、然后遍历获取到所有元素分别添加this身上，记住给实例补充length属性值，                 * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。                 * */                try {                    var nodes = document.querySelectorAll(selector);                    [].push.apply(this, nodes);                    return this;                } catch (e) {                    this.length = 0;                    return this;                }            }        }        /*         * 判断是不是真假数组的思路：         * 1、先把函数和window排除掉，         * 2、然后通过toString来判断是不是真数组         * 3、否则再判断是不是伪数组         * 备注：下面的判断只用来判断是不是伪数组，不要用下面的判断条件判断真数组，         *       例如：[ 0:1, , , ] 使用下面的判断，就会得到false，造成真数组的误判。         * 3.1、 先看看这个对象有没有length属性，         * 3.2、 如果有，看看length的值是不是为0，如果为0，OK是伪数组，         * 3.3、 如果length的值不为0，看看这个数据有没有 length - 1这个属性，如果有，OK是伪数组。         * 建议把这个是否是真假数组的判断封装为一个函数，在这里调用。         * */        else if (true) {            /*             * 实现的思路：             * 把真或伪数组中的每一项分别添加到实例身上，记住给实例补充length属性值，             * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。             * */        } else {            /*             * 实现的思路：             * 把这个参数直接添加到实例身子，length为1即可。             * */        }    }    // 测试html片段    var $spans = new init('<span>123</span>放松地放量加速离开的<span>321</span>');    console.log($spans);    var $divs = new init('<div><span>sdsfsdfs</span><span>dgdfgdf</span></div>');    document.body.appendChild($spans[0]);    document.body.appendChild($divs[0]);

8.入口函数对各种类型的判断原理

    // 判断是不是html片段    init.isHTML = function(html) {        // 如果是空类型的，直接返回false        if (!html) {            return false;        }        // 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。        if (html.charAt(0) == '<' && html.charAt(html.length - 1) == '>' && html.length >= 3) {            return true;        }        return false;    };    // 去掉字符串首尾空白字符    init.trim = function(str) {        // 不是字符串就不处理了        if (typeof str !== 'string') {            return str;        }        // 优先使用内置的trim方法        if (str.trim) {            return str.trim();        }        // 把首尾空白字符替换为空，然后返回        return str.replace(/^\s+|\s+$/g, '');    };    // 判断是不是函数    init.isFunction = function(fn) {            if (typeof fn == 'function') {                return true;            }            return false;        },        // 判断是不是window    init.isWindow = function(w) {            if (w.window == w) {                return true;            }            return false;        },        init.isLikeArray = function (arr){            if (init.isFunction(arr) || init.isWindow(arr) ||typeof arr!=='object') {                return false;            }            if (({}).toString.call(arr) == '[object Array]') {                return true;            }        }        // 判断是不是伪数组或真数组    init.isLikeArray = function(arr) {            // 过滤函数和window，以及非对象的其他数据            // 真数组（以下屏蔽的六行代码为）            // var arr=[];            // console.log(typeof arr);//object            // // 伪数组            // var obj ={length:0};            // console.log(typeof obj);//object            // console.log(({}).toString.call(arr));//[object Array]            // console.log(({}).toString.call(obj));//[object Object]            if (init.isFunction(arr) || init.isWindow(arr) || typeof arr !== 'object') {                return false;            }            // 判断是不是真数组            if (({}).toString.call(arr) == '[object Array]') {                return true;            }            // 判断是不是伪数组            // arr必须有length，在这个基础上，要么length为0，要么有length - 1这个属性值            if (('length' in arr) && ((arr.length === 0) || (arr.length - 1 in arr))) {                return true;            }            return false;        };    function init(selector) {        // 传入null、undefined、0、NaN、''返回空对象( 即空实例 )        if (!selector) {            return this;        }        // 传入字符串，那么需要判断是html片段 还是 其它        else if (typeof selector == 'string') {            // 为了用户友好体验，先去掉首尾空白字符            selector = init.trim(selector);            // 如果是片段，则创建对应的DOM，然后添加到实例身上，            // 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。            if (init.isHTML(selector)) {                /*                 * 创建的思路：                 * 1、先创建一个临时的div容器                 * 2、设置这个div的innerHTML为html片段，                 * 这些片段就自动转变为了div的子元素，                 * 3、然后遍历div的子元素分别添加this身上，记住给实例补充length属性值，                 *  可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。                 * */                var tempDiv = document.createElement('div');                tempDiv.innerHTML = selector;                [].push.apply(this, tempDiv.childNodes);                return this;            }            // 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上            else {                /*                 * 实现的思路：                 * 1、使用querySelectorAll获取页面中的元素                 * 2、然后遍历获取到所有元素分别添加this身上，记住给实例补充length属性值，                 * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。                 * */                try {                    var nodes = document.querySelectorAll(selector);                    [].push.apply(this, nodes);                    return this;                } catch (e) {                    this.length = 0;                    return this;                }            }        }        /*         * 判断是不是真假数组的思路：         * 1、先把函数和window排除掉，         * 2、然后通过toString来判断是不是真数组         * 3、否则再判断是不是伪数组         * 备注：下面的判断只用来判断是不是伪数组，不要用下面的判断条件判断真数组，         *       例如：[ 0:1, , , ] 使用下面的判断，就会得到false，造成真数组的误判。         * 3.1、 先看看这个对象有没有length属性，         * 3.2、 如果有，看看length的值是不是为0，如果为0，OK是伪数组，         * 3.3、 如果length的值不为0，看看这个数据有没有 length - 1这个属性，如果有，OK是伪数组。         * 建议把这个是否是真假数组的判断封装为一个函数，在这里调用。         * */        else if (init.isLikeArray(selector)) {            /*             * 实现的思路：             * 把真或伪数组中的每一项分别添加到实例身上，记住给实例补充length属性值，             * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。             * */            [].push.apply(this, selector);        } else {            /*             * 实现的思路：             * 把这个参数直接添加到实例身子，length为1即可。             * */            this[0] = selector;            this.length = 1;        }    }    // 测试html片段    /*var $spans = new init('<span>123</span>放松地放量加速离开的<span>321</span>');     console.log( $spans );     var $divs = new init('<div><span>sdsfsdfs</span><span>dgdfgdf</span></div>');     document.body.appendChild( $spans[0] );     document.body.appendChild( $divs[0] );*/   var a = new init([1, 2, 3, 4]);    console.log(a);

阅读全文

0 0