$($('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:
myJquery.js(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; }());
(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; }()); Call get() and eq() methods:
index.html