27行js代码模拟jQuery的元素选择以及方法链式调用

模拟jQuery的实现主要分为2个部分，第一是元素选择器，第二是操作方法。

一：元素选择器

如：

$("#div1")

这是选择id为div1的元素，这是jQuery的选择器，如果使用原生js的方法就是：

document.getElementById("div1");

很明显使用jQuery的方法方便多了。不难想象，实现jQuery选择器的原理大致如下：

<div id="div1"></div>

function getElement(element) {
    let id = element.replace("#", "");
	let el = document.getElementById(id);
}

getElement("#div1");

这样很容易实现了id为div1的元素的选择，其它class或者元素的选择方法类似，不过需要注意返回的数组处理，以及参数的数据类型判断，这里作为例子没有加上太多严谨的逻辑处理。

二：操作方法

在前面的文章已经说过jQuery方法链式调用的原理，这里就不再重复，直接点击链接查看即可。

三：完整实例

主要是使用了立即执行函数以及原型方法来实现

<div id="div1"></div>

(function () {
	function jQuery(element) {
		jQuery.prototype.getElement(element);
		return jQuery.prototype;
	}

	jQuery.prototype = {
		el:{},
		getElement: function(element) {
			let id = element.replace("#", "");
			this.el = document.getElementById(id);
			return this;
		},
		width: function(width) {
			this.el.style.width = width;
			return this;
		},
		height: function(height) {
			this.el.style.height = height;
			return this;
		},
		border: function(style) {
			this.el.style.border = style;
			return this;
		}
	}
	this.jQuery = this.$ = jQuery;
})()

$("#div1").width("100px").height("100px").border("1px solid red");

立即执行函数的好处是：方法执行完之后，里面的变量方法会被销毁，但是里面还用到了闭包原理，将立即执行函数的方法（jQuery）赋值给了全局对象，作为全局对象的一个属性。

该实例只针对id元素进行了简单实现，后面有时间把其它也写完整，以及业务逻辑完善。