/*base.js文件*/
//前台调用---实例化一个Base对象
var $ = function () {
return new Base();
};
//基础库
//创建Base对象
function Base(){
this.elements = [];//创建一个数组，存放获得的节点和节点数组
//获得ID节点
//参数：节点的ID
//返回值：Base对象
this.getId = function (id) {
this.elements.push(document.getElementById(id)); //将获得的节点存放在数组中
return this; //返回当前对象--Base（此时对象中的elements数组已经存放了需要的节点）
};
//获得元素节点
//参数：节点的tag
//返回值：Base对象
this.getTagName = function (tag) {
//将节点数组存放在数组中（通过遍历）
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i++) {
this.elements.push(tags[i]);
}
return this;//返回当前对象--Base
}
}
//设置css方法---需要在对象的原型上添加方法
//参数：attr--属性 value--属性对应的值
//返回值：Base对象
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style[attr] = value; //将对象的节点设置css属性
}
return this;//返回当前对象--Base
}
//设置innerHTML方法---在对象的原型上添加
//参数：str-页面上显示的值
//返回值：Base对象
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].innerHTML = str;
}
return this; //返回当前对象--Base
};
//出发点击事件click方法--在对象的原型上添加
//参数：一个匿名函数
//返回值：Base对象
Base.prototype.click = function (fn) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].onclick = fn;
}
return this; //返回当前对象--Base
}
/*demo.js文件*/
window.onload = function () {
//var base = new Base();//实例化一个Base对象
//base.getId("box").css("color", "red").css("background", "blue").html("改变现实的值").click(function () { alert("a") });
//另外一个问题---当前面设置了一些css属性后面再设置之后，前面的设置会被覆盖掉
//原因：两次设置是在通过base对象上设置的
//base.getTagName("p").css("background", "black");
//针对这个问题的解决方法
//在base.js中实例化一个Base对象，在demo中直接调用已经实例化好的对象，就不会出现调用同一个对象的情况
$().getTagName("p").css("background", "black");
$().getId("box").css("color", "red").css("background", "blue").html("改变现实的值").click(function () { alert("a") });
}