封装小jq

目的：熟悉原生js、js原型、js继承等。

jquery：每一个构造函数都有一个prototype的属性，它指向一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承。

1、创建一个构造函数

function Jq(el){
    this.elem = document.querySelector(el); //测试只获取第一个元素。后面可以扩展
}

2、给构造函数的prototype添加属性和方法

Jq.prototype.text = function(text){
    this.elem.innerHTML = text; //修改元素的html
}

3、测试text方法。

var jq = new Jq("button");
jq.text("改变后的html");

4、想和jq一样，链式操作。在原型的方法return this，因为this执行实例对象，而实例对象继承prototype的所有属性和方法。修改text方法

//修改text方法
Jq.prototype.text = function(text){
	this.elem.innerHTML = text;
	return this;
}

//添加color方法
Jq.prototype.color= function(color){	this.elem.style。color = color;
	return this;
}

5、链式操作测试，改为原谅色。

jq.text("改变后的html").color("green");

6、省略每次实例化一个对象都需要var jq = new Jq("button");

window.$ = function(el){
    return new Jq(el);
}

//后面使用
$("button).text("修改html");

总结：是一个非常简单的例子，后面的扩展才是难点，判断和循环的，以及js原生的api、浏览器的兼容性。