2.jQuery简单实现get()和eq()和add()和end()方法
# 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; }());
调用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>
效果展示：
