# jQuery選擇元素 - 1.get() 從jQuery對象中獲取某個指定的元素，返回原生的dom對象，所以不能再次鏈式調用jQuery對象的方法，但是可以使用原生的方法，或者再次封裝為jQuery對象 ```js $('demo').get(0). $($('demo').get(0))//再 ...
# jQuery選擇元素 - 1.get() 從jQuery對象中獲取某個指定的元素，返回原生的dom對象，所以不能再次鏈式調用jQuery對象的方法，但是可以使用原生的方法，或者再次封裝為jQuery對象 ```js $('demo').get(0).
$($('demo').get(0))//再次封裝為jQuery對象 ``` - 2.eq() 從jQuery對象中獲取某個指定的元素，返回jQuery對象 ```js $('.demo').eq(0) ```
- 3.find() 在原有的元素中，查找其後代元素，返回jQuery對象
- 4.jQuery對象中包含了一個prevObject屬性，此屬性指向前一個鏈式調用的jQuery對象，第一個指向了$(document) ```js $('.wrapper');//prevObject:$(document) $('.wrapper').find('ul');//prevObject:$('.wrapper') $('.wrapper').find('ul').find('li');//$('.wrapper').find('ul') ```
- 5.filter() 按條件過濾前一個jQuery對象，返回jQuery對象。主要是針對前一個選擇的jQuery對象基礎上，對其進行限制。不能又選擇有限制。 ```js $('.wrapper').find('ul').find('li').filter(':odd');//過濾li為奇數的li並返回
$('.wrapper').find('ul').filter('li:odd');//這種寫法，過濾不到li:odd
$('.wrapper ul li').filter(function(index, ele){ //index:索引; ele:原生dom對象 //return true;//return後的表達式為true，則元素留下來，為false則剔除掉。返回的還是jQuery對象 return index % 2 == 0;//2的倍數保留 }); ```
- 6.not() not()和filter()是相反的，是反選。
- 7.is() 選中的元素有沒有某個條件，返回true和false ```js $('.wrapper').is('span');//判斷$('.wrapper')是否有span元素 ```
- 8.has() 選中的後代元素必須具有某種條件的jQuery對象，返回jQuery對象 ```js $('li').has('ul');//選中li元素，其後代元素中具有ul元素的 ```
- 9.add() 為jQuery對象中添加一些對象 ```js $('.wrapper').add('ul');//在$('.wrapper')中，再次添加$('ul')的對象 ```
- 10.end() 回退到前一個jQuery對象 ```js $('.wrapper').add('ul').end();//將jQuery對象回退到$('.wrapper') ```
## 實現get() 和 eq() 和 add() 和 end()方法 ```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對象的prevObject屬性賦值，從而可以使用end()方法 jQuery.prototype.pushStack = function(dom){ //dom是jQuery對象 if(dom.constructor != jQuery){//dom是原生的dom對象 dom = jQuery(dom);//將原生dom對象包裹成jQuery對象 } dom.prevObject = this;//將
return dom; };
//為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 this.pushStack(this.get(num));//調用jQuery.prototype.get()函數獲取到dom對象，再封裝為jQuery對象並且為jQuery對象添加prevObject屬性 };
//為jQuery的原型添加add屬性，所有實例可以使用該屬性 jQuery.prototype.add = function (selector) { var curObj = jQuery(selector);//當前通過add添加的selector選中的jQuery對象 var prevObj = this;//調用add()的jQuery對象 var newObj = jQuery();
for(var i = 0; i < curObj.length; i++){ newObj[newObj.length++] = curObj[i]; }
for(var i = 0; i < prevObj.length; i++){ newObj[newObj.length++] = prevObj[i]; }
this.pushStack(newObj);//為jQuery對象添加prevObject屬性 };
//為jQuery的原型添加end屬性，所有實例可以使用該屬性 jQuery.prototype.end = function () { return this.prevObject;//直接返回前一個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()和add()和end()方法：
(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(selector == null){//判斷selector是null或undefined return this; }else 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對象的prevObject屬性賦值，從而可以使用end()方法 jQuery.prototype.pushStack = function(dom){ //dom是jQuery對象 if(dom.constructor != jQuery){//dom是原生的dom對象 dom = jQuery(dom);//將原生dom對象包裹成jQuery對象 } dom.prevObject = this;//將 return dom; }; //為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 this.pushStack(this.get(num));//調用jQuery.prototype.get()函數獲取到dom對象，再封裝為jQuery對象並且為jQuery對象添加prevObject屬性 }; //為jQuery的原型添加add屬性，所有實例可以使用該屬性 jQuery.prototype.add = function (selector) { var curObj = jQuery(selector);//當前通過add添加的selector選中的jQuery對象 var prevObj = this;//調用add()的jQuery對象 var newObj = jQuery(); for(var i = 0; i < curObj.length; i++){ newObj[newObj.length++] = curObj[i]; } for(var i = 0; i < prevObj.length; i++){ newObj[newObj.length++] = prevObj[i]; } this.pushStack(newObj);//為jQuery對象添加prevObject屬性 return newObj;//將合併後的jQuery對象返回 }; //為jQuery的原型添加end屬性，所有實例可以使用該屬性 jQuery.prototype.end = function () { return this.prevObject;//直接返回前一個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()和add()和end()方法：
<!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> <div class="container"> <div>4</div> <div class="demo">5</div> <div class="demo">6</div> <div>7</div> </div> <script src="./myJquery.js"></script> <script> console.log($(".demo").get(0)); console.log($(".demo").eq(0)); console.log($('.container').add('.demo')); console.log($('.container').add('.demo').end()); $('.container').add('.demo').css({width:'100px',height:'20px',background:'yellow'}); </script> </body> </html>index.html 效果展示：
