模仿jQuery做一个链式调用的库

首先不得不承认，jQuery中的链式调用特别好用。

但是我不喜欢用别人的框架，总觉得别人家的饭不如自己做的饭香，所以今天做一个简单的，链式调用的库，便于查找元素，最好还能方便扩展。

打开sublime编辑器，新建一个js文件，声明一个主入口函数 ，形参是查找元素的关键字，返回值是一个对象，把html元素集合放进去，再挂载一个用来链式调用的方法。

function $(queryString){
	return {
		domArray:[...document.querySelectorAll(queryString)],
		$:function(queryString){
			// 往子级搜索
            return this;
		}
	}
}

把功能做出来，调用此方法时遍历domArray，收集子元素，放进一个集合，去重，然后更新domArray，最后return this，方便后面的链式调用

$:function(queryString){
	// 往子级搜索
	var children=[];
	this.domArray.forEach(function(e){
		children.push(...e.querySelectorAll(queryString));
	})
	children=[...new Set(children)]
	this.domArray=children;
	return this;
}

测试可用，再顺手扩展几个方法，这个库就差不多啦

function $(queryString){
	return {
		domArray:[...document.querySelectorAll(queryString)],
		$:function(queryString){
			// 往子级搜索
			var children=[];
			this.domArray.forEach(function(e){
				children.push(...e.querySelectorAll(queryString));
			})
			children=[...new Set(children)]
			this.domArray=children;
			return this;
		},
		//下一个兄弟节点
		next:function(){
			let newElementArray=[];
			this.domArray.forEach(function(e){
				if(e!=null){newElementArray.push( e.nextElementSibling )} 
			})
			newElementArray=[...new Set(newElementArray)]
			this.domArray=newElementArray;
			return this;
		},
		//上一个兄弟节点
		prev:function(){
			let newElementArray=[];
			this.domArray.forEach(function(e){
				if(e!=null){newElementArray.push( e.previousElementSibling )} 
			})
			newElementArray=[...new Set(newElementArray)]
			this.domArray=newElementArray;
			return this;
		},
		//退回父级节点
		parent:function(){
			this.domArray=this.domArray.map( e=>e.parentNode )
			return this;
		},
		//由索引查找
		eq:function(index){
			if(this.domArray[index]){ this.domArray=[this.domArray[index]] }
			return this;
		}
	}
}

记得在每个方法的大括号后面都要写一个逗号，这个容易让人忽略掉