vquery2023/index.js

一个轻量级的类jQuery的库，聚合了jQeury中这几个常用的方法： click() hover() show() hide() css() attr() toggle() eq find() getIndex() bind()

function VQuery(vArg) {
	this.elements = []

	switch(typeof vArg) {
		case 'function':
			window.addEventListener('load', vArg)
			break;
		case 'string':
			switch(vArg.charAt(0)){
				case '#':
					this.elements.push(document.querySelector(vArg));
					break;
				default:
					this.elements = document.querySelectorAll(vArg);
			}
			break;
		case 'object':
			this.elements.push(vArg)
	}
}

VQuery.prototype.click = function(fn) {
	for(let i = 0; i < this.elements.length; i++) {
		this.elements[i].addEventListener('click', fn)
	}

	return this
}

VQuery.prototype.hover = function(fnOver, fnOut) {
	for(let i = 0; i < this.elements.length; i++) {
		this.elements[i].addEventListener('mouseover', fnOver)
		this.elements[i].addEventListener('mouseout', fnOut)
	}

	return this
}

VQuery.prototype.show = function() {
	for(let i = 0; i < this.elements.length; i++) {
		this.elements[i].style.display = "block"
	}

	return this
}

VQuery.prototype.hide = function() {
	for(let i = 0; i < this.elements.length; i++) {
		this.elements[i].style.display = "none"
	}

	return this
}

VQuery.prototype.css = function(attr, value) {
	if (arguments.length == 1) {
		if (typeof attr == 'string') {
			// attr是一个字符串，比如"width", "height";
			return getComputedStyle(this.elements[0])[attr]
		} else {
			// attr是一个json, 比如{"width": "200px", "height": "200px"};
			for(let i = 0; i < this.elements.length; i++) {
				for(let j in attr) {
					this.elements[i].style[j] = attr[j]
				}				
			}
		}
	} else {
		for(let i = 0; i < this.elements.length; i++) {
			this.elements[i].style[attr] = value
		}
	}

	return this
}

VQuery.prototype.attr = function(attr, value) {
	if (arguments.length == 1) {
		return this.elements[0][attr]
	} else {
		for(let i = 0; i < this.elements.length; i++) {
			this.elements[i][attr] = value
		}
	}

	return this
}

VQuery.prototype.toggle = function() {
	let _arguments = arguments

	for(let i = 0; i < this.elements.length; i++) {
		let count = 0
		this.elements[i].addEventListener('click', function() {
			let _this = this
			_arguments[count++ % _arguments.length].call(_this)  // 注意：这里一定要绑定一下this，要不然不起作用！
		})
	}

	return this
}

VQuery.prototype.eq = function (n) {
	return $(this.elements[n])
}

VQuery.prototype.find = function (str) {
	let aResult = []
	for(let i = 0; i < this.elements.length; i++) {
		// 这里不能直接用concat方法，因为querySelectorAll选出来的是NodeList集合，是个类数组对象，而不是真正的数组，它本身没有concat方法！
		// aResult = aResult.concat(this.elements[i].querySelectorAll(str))
		const nodeListsArr = this.elements[i].querySelectorAll(str)
		for(let j = 0; j < nodeListsArr.length; j++) {
			aResult.push(nodeListsArr[j])
		}
	}
	// aResult只是一个元素数组，如何把它变成一个VQuery对象？可以像下面这样操作：
	let newVQuery = $()
	newVQuery.elements = aResult
	return newVQuery
}

function getIndex(obj) {
	let aBrothers = obj.parentNode.children
	for(let i = 0; i < aBrothers.length; i++) {
		if(aBrothers[i] == obj) {
			return i
		}
	}
}
VQuery.prototype.index = function() {
	return getIndex(this.elements[0])
}

VQuery.prototype.bind = function(sEv, fn) {
	for(let i = 0; i < this.elements.length; i++) {
		this.elements[i].addEventListener(sEv, function(ev) {
			if(false == fn.call(this)) {
				ev.stopPropagation()
				// ev.cancelBubble = true
				ev.preventDefault()
			}
		})
	}
}

// 添加插件方法
VQuery.prototype.extend = function(name, fn) {
	VQuery.prototype[name] = fn
}

function $(vArg){
	return new VQuery(vArg)
}

module.exports = $;