jQuery simple implementation of get() and eq() methods

#jQuery select element
-get() gets a specified element from the jQuery object and returns the native dom object. Therefore, it is not allowed to chain the method of jQuery object again, but you can use the native method or encapsulate it as jQuery object again
```js
$('demo').get(0).

$($('demo').get(0)) / / encapsulated as jQuery object again
```

##Implement get() and eq() methods
```js
(function () {
/ / create a jQuery constructor
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
/ / add init attribute for jQuery prototype, which can be used by all instances
    jQuery.prototype.init = function (selector) {
this.length = 0; / / add the length attribute to this and assign it a value of 0
/ / select dom and wrap it as jQuery object to return
/ / judge whether the selector is null and undefined and dom objects and id and class
if(this = = null) {/ / judge whether the selector is null or undefined
            return this;
if (type of selector = = = 'string' & & selector.indexOf('.')! = - 1) {/ / selector is class
            var dom = document.getElementsByClassName(selector.slice(1));
} else if (type of selector = = = 'string' & & selector.indexOf("ා)! = - 1) {/ / when selector is id
            var dom = document.getElementById(selector.slice(1));
        }

if (selector instance of Element| dom.length = = = undefined) {/ / (selector is DOM object) | (selector is id, returned is an object, object has no length attribute)
this[0] = dom | selector;//(selector is id) | (selector is dom object)
            this.length++;
The else {/ / selector is a class and returns an array of classes
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

/ / add css attribute for jQuery prototype, which can be used by all instances
    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; / / the essence of chain call
    };

/ / add the get attribute to the jQuery prototype, which can be used by all instances
    jQuery.prototype.get = function (num) {
/ / num = = null return array
/ / num > = 0 return this[num]
/ / num < 0 returns this[length + num]
        return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0));
    };

/ / add the get attribute to the jQuery prototype, which can be used by all instances
    jQuery.prototype.eq = function (num) {
return jQuery(this.get(num)); / / call the jQuery.prototype.get() function to get the dom object, which is encapsulated as a jQuery object
    };

/ / the above jQuery constructor is a jQuery.prototype.init object,
/ / no css() method on jQuery.prototype.init object
/ / so add the following sentence so that the jQuery.prototype.init object can call the css() method on jQuery.prototype
    jQuery.prototype.init.prototype = jQuery.prototype;

/ / make external calls through $() or jQuery()
    window.$ = window.jQuery = jQuery;
}());
```
 
These are notes in markdown format
 
Implement the get() and eq() methods in jQuery:
(function () {
    //Create a jQuery Constructor
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
    //by jQuery Prototype addition of init Property that can be used by all instances
    jQuery.prototype.init = function (selector) {
        this.length = 0; //by this Add to length Property with a value of 0
        //elect dom And packed into jQuery Object return
        //judge selector yes null and undefined and dom Objects and id and class Situation of
        if(this == null){//judge selector yes null or undefined
            return this;
        }if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector yes class Situation of
            var dom = document.getElementsByClassName(selector.slice(1));
        } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector yes id Situation of
            var dom = document.getElementById(selector.slice(1));
        }

        if (selector instanceof Element || dom.length === undefined) { //(selector yes dom object) || (selector yes id,An object is returned. The object does not length attribute)
            this[0] = dom || selector;//(selector yes id) || (selector yes dom object)
            this.length++;
        } else { //selector yes class,Returns an array of classes
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i];
                this.length++;
            }
        }
    };

    //by jQuery Prototype addition of css Property that can be used by all instances
    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; //The essence of chain call
    };

    //by jQuery Prototype addition of get Property that can be used by all instances
    jQuery.prototype.get = function (num) {
        //num == null Return array
        //num >= 0 Return this[num]
        //num < 0 Return this[length + num]
        return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0));
    };

    //by jQuery Prototype addition of get Property that can be used by all instances
    jQuery.prototype.eq = function (num) {
        return jQuery(this.get(num));//call jQuery.prototype.get()Function get to dom Object, encapsulated as jQuery object
    };

    //above jQuery Constructor is new One jQuery.prototype.init Object,
    //jQuery.prototype.init No on object jQuery.prototype Upper css()Method
    //So add the following sentence to let jQuery.prototype.init Object can call jQuery.prototype Upper css()Method
    jQuery.prototype.init.prototype = jQuery.prototype;

    //Let the outside pass through $()perhaps jQuery()call
    window.$ = window.jQuery = jQuery;
}());
myJquery.js

Call get() and eq() methods:

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

Effect display:

 

 

Tags: Javascript JQuery Attribute

Posted on Sat, 09 May 2020 01:20:51 -0400 by oldmanice