标签：jQuery get dom selector num prototype eq

# jQuery选择元素 - get() 从jQuery对象中获取某个指定的元素，返回原生的dom对象，所以不能再次链式调用jQuery对象的方法，但是可以使用原生的方法，或者再次封装为jQuery对象 ```js $('demo').get(0).
$($('demo').get(0))//再次封装为jQuery对象 ```
## 实现get() 和 eq()方法 ```js (function () {     //创建一个jQuery构造函数     function jQuery(selector) {         return new jQuery.prototype.init(selector);     }     //为jQuery的原型添加init属性，所有实例可以使用该属性     jQuery.prototype.init = function (selector) {         this.length = 0; //为this添加length属性，并且赋值为0         //选出 dom 并且包装成jQuery对象返回         //判断selector是null 和 undefined 和 dom对象 和 id 和 class的情况         if(this == null){//判断selector是null或undefined             return this;         }if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector是class的情况             var dom = document.getElementsByClassName(selector.slice(1));         } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector是id的情况             var dom = document.getElementById(selector.slice(1));         }
        if (selector instanceof Element || dom.length === undefined) { //(selector是dom对象) || (selector是id，返回的是一个对象，对象没有length属性)             this[0] = dom || selector;//(selector是id) || (selector是dom对象)             this.length++;         } else { //selector是class，返回的是一个类数组             for (var i = 0; i < dom.length; i++) {                 this[i] = dom[i];                 this.length++;             }         }     };
    //为jQuery的原型添加css属性，所有实例可以使用该属性     jQuery.prototype.css = function (config) {         for (var i = 0; i < this.length; i++) {             for (var prop in config) {                 this[i].style[prop] = config[prop];             }         }
        return this; //链式调用的精髓     };
    //为jQuery的原型添加get属性，所有实例可以使用该属性     jQuery.prototype.get = function (num) {         //num == null 返回数组         //num >= 0 返回this[num]         //num < 0 返回this[length + num]         return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0));     };
    //为jQuery的原型添加get属性，所有实例可以使用该属性     jQuery.prototype.eq = function (num) {         return jQuery(this.get(num));//调用jQuery.prototype.get()函数获取到dom对象，在封装为jQuery对象     };
    //上面的jQuery构造函数是new 一个jQuery.prototype.init对象，     //jQuery.prototype.init对象上没有jQuery.prototype上的css()方法     //所以添加下面一句，让jQuery.prototype.init对象可以调用jQuery.prototype上的css()方法     jQuery.prototype.init.prototype = jQuery.prototype;
    //让外部可以通过$()或者jQuery()调用     window.$ = window.jQuery = jQuery; }()); ```   以上是markdown格式的笔记   实现jQuery里面的get()和eq()方法：

(function () {
    //创建一个jQuery构造函数
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
    //为jQuery的原型添加init属性，所有实例可以使用该属性
    jQuery.prototype.init = function (selector) {
        this.length = 0; //为this添加length属性，并且赋值为0
        //选出 dom 并且包装成jQuery对象返回
        //判断selector是null 和 undefined 和 dom对象 和 id 和 class的情况
        if(this == null){//判断selector是null或undefined
            return this;
        }if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector是class的情况
            var dom = document.getElementsByClassName(selector.slice(1));
        } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector是id的情况
            var dom = document.getElementById(selector.slice(1));
        }

        if (selector instanceof Element || dom.length === undefined) { //(selector是dom对象) || (selector是id，返回的是一个对象，对象没有length属性)
            this[0] = dom || selector;//(selector是id) || (selector是dom对象)
            this.length++;
        } else { //selector是class，返回的是一个类数组
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

    //为jQuery的原型添加css属性，所有实例可以使用该属性
    jQuery.prototype.css = function (config) {
        for (var i = 0; i < this.length; i++) {
            for (var prop in config) {
                this[i].style[prop] = config[prop];
            }
        }

        return this; //链式调用的精髓
    };

    //为jQuery的原型添加get属性，所有实例可以使用该属性
    jQuery.prototype.get = function (num) {
        //num == null 返回数组
        //num >= 0 返回this[num]
        //num < 0 返回this[length + num]
        return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0));
    };

    //为jQuery的原型添加get属性，所有实例可以使用该属性
    jQuery.prototype.eq = function (num) {
        return jQuery(this.get(num));//调用jQuery.prototype.get()函数获取到dom对象，在封装为jQuery对象
    };

    //上面的jQuery构造函数是new 一个jQuery.prototype.init对象，
    //jQuery.prototype.init对象上没有jQuery.prototype上的css()方法
    //所以添加下面一句，让jQuery.prototype.init对象可以调用jQuery.prototype上的css()方法
    jQuery.prototype.init.prototype = jQuery.prototype;

    //让外部可以通过$()或者jQuery()调用
    window.$ = window.jQuery = jQuery;
}());

myJquery.js

调用get()和eq()方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="wrapper">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
    <script src="./myJquery.js"></script>
    <script>
        console.log($(".demo").get(0), $(".demo").eq(0));
    </script>
</body>

</html>

index.html

效果展示：

 

 

 

标签：jQuery,get,dom,selector,num,prototype,eq
来源： https://www.cnblogs.com/lanshanxiao/p/12856441.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。