jQuery 第一章 實例方法 DOM操作
阿新 • • 發佈:2019-05-08
版本 col get() 慢慢 proto 運算 cti slice instance
進一步選擇元素相關方法:
.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 })()
jQuery 第一章 實例方法 DOM操作