进一步选择元素相关方法:
.get()
.eq()
.find()
.filter()
.not()
.is()
.has()
.add()集中操作 .end()回退操作
.get()
$(".class").get() 可以填 $()选择器选出来的dom 索引, 0 1 2 3 -1 -2 , 不填 取全部dom, 但是
取出来的dom 不再是jquery的对象,而是原生dom, 用get()取出来的 dom 都为原生dom;
现在会用了,但是咱们不能单单只会用,还要知道其原理,以下模仿其功能,写一个 .get() 方法。
把上一篇写的 jQuery 函数全部抽出来, 建立一个单独文件为我们自己的 myJquery.js ,
自己慢慢学,写成一个我们自己的jquery 库
1 (function(){ 2 function jQuery(selector){ 3 return new jQuery.prototype.init(selector); 4 } 5 jQuery.prototype.init = function(selector){ 6 7 if( selector.indexOf(‘.‘) != -1 ){ 8 var dom = document.getElementsByClassName( selector.slice(1) ); 9 }else if( selector.indexOf(‘#‘) != -1 ){ 10 var dom = document.getElementById( selector.slice(1) ); 11 }else{ 12 var dom = document.getElementsByTagName(selector); 13 } 14 this.length = 0; 15 if( dom.length == undefined ){ 16 this[0] = dom; 17 this.length ++; 18 }else{ 19 for( var i = 0; i < dom.length; i++ ){ 20 this[i] = dom[i]; 21 } 22 this.length = dom.length; 23 } 24 } 25 jQuery.prototype.css = function(config){ 26 for(var i = 0; i < this.length; i++){ 27 for(var prop in config){ 28 this[i].style[prop] = config[prop]; 29 } 30 } 31 return this; 32 } 33 //以下为我们本章的.get() 方法 34 jQuery.prototype.get = function(num) { 35 if (num == null) { //判断用户有没有填参数。 36 return [].slice.call(this, 0); //空截,把类数组转成数组,借用Array.prototype.slice方法 37 } else { 38 if (num < 0) {//判断用户是否输入 负数。 39 return this[num + this.length]; 40 //举个例子 [a, b, c] 此数组的长度为3 41 // 用户输入-1 想要拿最后一位 c,如果你把-1 + 3该数组的长度, 你会发现 刚好等于 最后一位的索引 42 } else { 43 return this[num];//如果用户输入 0 1 2 3 直接返回this 中的 dom 即可 44 } 45 } 46 //以下为简化版本 三目运算符 ↓ 47 //return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]); 48 49 } 50 jQuery.prototype.init.prototype = jQuery.prototype; //$()运行的是init的函数 init的prototype上面没有css方法。 51 //所以 我们把init的prototype指向jQuery.prototype 52 window.$ = window.jQuery = jQuery; 53 })()
.eq()
这个方法和.get() 有点像,但是,获取的dom 并不是原生的dom 了,是 jquery对象的dom,
除此之外,还有一个不同点,不传参数 .get() 是返回全部原生dom,.eq()是返回空。
模拟原理,往我们自己的myJquery.js 添加.eq() 方法,你会发现 此方法 和 get方法的原理一样,但是 有点不同,返回的
jquery对象的dom, 我们先在做另外一个功能, 往$() 传 dom 会把你传的dom包装成 jquery对象的dom。
1 (function(){ 2 function jQuery(selector){ 3 return new jQuery.prototype.init(selector); 4 } 5 jQuery.prototype.init = function (selector) { 6 //加上以下代码 7 if (selector == null) { //判断 有没有传值,没有传值,直接返回 this (jquery 对象) 8 return this; 9 } 10 //如果还按照以前selector.indexOf(‘.‘)的话,传入 dom,dom上面没.indexof方法,会报错,再加上一层判断 11 //typeof selector == ‘string‘ 判断他是字符串 再执行, dom的话,就进不去了 &&运算符,遇到假就返回 12 if(typeof selector == ‘string‘ && selector.indexOf(‘.‘) != -1 ){ 13 var dom = document.getElementsByClassName(selector.slice(1)); 14 // ↓ 也要加上哦 15 }else if(typeof selector == ‘string‘ && selector.indexOf(‘#‘) != -1 ){ 16 var dom = document.getElementById( selector.slice(1) ); 17 }else if(typeof selector == ‘string‘){//zheli 18 var dom = document.getElementsByTagName(selector); 19 } 20 21 this.length = 0; 22 // 主要在这里 加上以下代码 ↓ 判断 传进来的值 是否是dom 元素, 是的话,就进去 23 if(selector instanceof Element || dom.length == undefined ){ 24 this[0] = dom || selector; // 把selector 直接挂到 this[0] 位上就OK了 25 this.length ++; 26 }else{ 27 for( var i = 0; i < dom.length; i++ ){ 28 this[i] = dom[i]; 29 } 30 this.length = dom.length; 31 } 32 } 33 jQuery.prototype.css = function(config){ 34 for(var i = 0; i < this.length; i++){ 35 for(var prop in config){ 36 this[i].style[prop] = config[prop]; 37 } 38 } 39 return this; 40 } 41 42 jQuery.prototype.get = function(num) { 43 44 return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]); 45 } 46 // 跟 get方法原理差不多,差的就是, 传进去是空的话 返回 null 即可, 47 jQuery.prototype.eq = function (num) { 48 var dom = num == null ? null : (num < 0 ? this[num + this.length] : this[num]); 49 return $(dom); // 如果直接返回 dom 就是返回原生的dom 我们要把他包装一下,变成jquery对象, 此方法 50 // 在上面已经实现了。 51 } 52 jQuery.prototype.init.prototype = jQuery.prototype; 53 54 window.$ = window.jQuery = jQuery; 55 })()
原文:https://www.cnblogs.com/yanggeng/p/10823074.html