手写一个简易的jquery 2020/12/03

手写一个简易的jquery

class写法

class jquery{
	constructor(selector){
			const result = document.querySelectorAll(selector)
			const length = result.length
			for(let i=0; i < length ; i++){
				this[i] = result[i]
			}
			this.length = length
			this.selector = selector
		}
		get(index){
			return this[index]
		}
		each(fn){
			for(let i=0; i < length ; i++){
				const elem = this[i]
				fn(elem)
			}
		}
	}
	//插件写法1
	jquery.prototype.chajian = function(el){
	  console.log(el)
	}
	//复写方式
	class jquery2 extends jquery{
		constructor(selector){
			super(selector)
		}
		addClass(classname){
			console.log(classname)
			for(let i=0; i < this.length ; i++){
				const elem = this[i]
				elem.className += `${elem.className} ${classname}` 
				console.log(elem)
			}
		}
	}
	const $div = new jquery2('div')

	**es5写法**
	function Jquery(selector){
		var result = document.querySelectorAll(selector)
			var length = result.length
			for(var i=0; i < length ; i++){
				this[i] = result[i]
			}
			this.length = length
			this.selector = selector
		}
	Jquery.prototype.get = function(index){
		return this[index]
	}