原生JS封装库——CSS上实现方法

原生js封装库之css上

实现以下目标：

1 连缀：类似：$().getid('main').css('color','red').html('标题')；

步骤：

1? 因为要在原型里写方法，所以采用函数式对象，即构造函数。

2? 将获取节点的方法和设置或获取属性及其他所有的方法写在base对象里。调用时只需new出一个base对象。

3? 避免在前台new出对象，在基础库里写一个方法var $=function(){return new base()},前台调用函数就行了。

思路：要实现连缀功能，必须每个方法的返回值是base对象，才能继续连缀，例如获取节点后，返回base对象设置css属性；

$().getid('main').css('color','red');? getid：获取id节点的方法和css：设置css属性的方法都是base对象的方法。所以只有获取id节点后返回base对象才能继续调用里面的css方法，同样css方法的返回值也要是base对象。

原理：将获取到的节点或节点数组作为属性放在属性数组里，同时获取节点的和、方法的返回值是base可以继续调用里面的方法。$().getid('main')将id为main的节点对象存放在this.elements数组里作为base对象（即$()）的属性；因为css()是base对象的方法，所以，getid()方法的返回值要写成base对象，在使用css()方法时就可使用存放的节点对象。

封装的库：base.js。 前台调用库demo.js。

base.js:

var $=function(){                     //这里写一个函数，调用时返回一个base对象                 
	return new base();
}
function base(){
	this.elements=[];                 //创建属性数组 保存获取的节点数组,实例（私有）属性不要在原型里添加
}
// 不能base.prototype.elements=[]；比如设置了一个id为main的颜色；再设置id为其它的颜色会把main的颜色覆盖掉，因为在原型里添加属于共有
	// 获取id节点的方法
	base.prototype.getid=function(id){
		this.elements.push(document.getelementbyid(id));   //将节点存入数组中
		return this;                                       //返回base对象实现连缀
	}
	//获取name节点数组的方法
	base.prototype.getname=function(name){ 
		var name=document.getelementsbyname(name);
		for(var i=0;i
html:


<script type="text/javascript" src="demo.js"></script><script type="text/javascript" src="base.js"></script>
main
段落
;i++){>

前台调用库：demo.js:

测试1：获取:

window.onload=function(){
	console.log($().getid('main').css('color'));
	console.log($().gettagname('p').css('color'));
	console.log($().getname('button').css('color'))
}

图示：

 

测试2：设置：

window.onload=function(){
	$().getid('main').css('color','blue');
	$().gettagname('p').css('color','blue');
	$().getname('button').css('color','blue')
}

图示：

ps:如何写函数：

例如：设置css属性，先思考不用函数怎么设置，即：document.getelementbyid('main').style.color=red;

改成函数：设置两个参数，属性及属性值（attr,value)。互相对应：this.element[i].style.attr=value.适用于任何函数

;i++){>