jQuery仿写

1. 比较久之前写的了，仅作为参考或思想扩展。
2. 此仿写忽略了兼容问题。
3. 用法基本和jQuery相同。
4. 方法还有一些局限性，需要自行体会，本文仅是展示jQ的核心思想。

//下边两个方法，当我们使用$('#a')去获取一个元素时，实际生产一个jQ对象
window.$ = function(selector,context){
    
    
	return new jQ(selector,context);
}
//这个jQ对象是使用构造函数建立的，把dom元素封装在了elements属性里
var jQ = function(selector, context){
    
    
	context = context || document;
    this.elements = context.querySelectorAll(selector);
    this.length = this.elements.length;
	return this;
}

/****构造函数我们应该知道方法声明在原型里...另外链式操作的精髓：return this;***/

//遍历元素。参数传入一个匿名函数，函数内参数为（元素，索引）
jQ.prototype.each = function(fn){
    
    
	for (let i = 0; i < this.length; i++) {
    
    
		fn(this.elements[i], i);
	}
	return this;
}
//绑定事件。jQuery里还有事件委托，这里没有。
jQ.prototype.on = function(eventType, fn){
    
    
	return this.each((item)=>{
    
    
		item.addEventListener(eventType,fn,false);
	});
}
//获取/设置属性。 
jQ.prototype.attr = function (attr, val) {
    
    
	if(!val){
    
    
		return this.elements[0][attr];
	}
	return this.each((item)=>{
    
    
		item.setAttribute(attr, val);
	});
}
//添加class,注意重复添加class问题
jQ.prototype.addClass = function(addClass) {
    
    
	return this.each((item)=>{
    
    
		let className = item.getAttribute("class") || '';
		let str = ' ' + className + ' ';
		if(str.indexOf(' ' + addClass + ' ') == -1){
    
    
			let newClass = className ? (className + ' ' + addClass) : addClass;
			item.setAttribute("class", newClass)
		}
	});
}
//移除class
jQ.prototype.removeClass = function(removeClass) {
    
    
	return this.each((item)=>{
    
    
		let className = item.getAttribute("class");
		if(className){
    
    
			let arr = className.split(' ');
			for (let i = 0; i < arr.length; i++) {
    
    
				if(arr[i] == removeClass){
    
    
					arr.splice(i,1)
					item.setAttribute("class", arr.join(" "));
					break;
				}
			}
		}
	});
}