编写Jquery -- 给元素设置css样式，并实现连缀设置

最新推荐文章于 2022-10-19 17:16:16 发布

eling-

最新推荐文章于 2022-10-19 17:16:16 发布

阅读量657

点赞数 1

分类专栏： javascript 学习写Jquery html+css 文章标签： javascript 面向对象 jquery

本文链接：https://blog.csdn.net/second_boy/article/details/52098509

版权

javascript 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

html+css

13 篇文章 0 订阅

订阅专栏

学习写Jquery

3 篇文章 0 订阅

订阅专栏

编写Jquery -- 给元素设置css样式，并实现连缀设置（面向对象）

 // 每次使用eling()都返回一个独立的Eling对象,
 // 防止多个元素使用相同的方法（引用同一个对象），最后的方法覆盖了前面的 
var eling = function(){
	return new Eling();
};

function Eling(){

	// 存放获取到的节点-----作用在于，之前返回的是获取到的元素，
	// 例：document.getElementById("box")，这样返回的是div元素；
	// 可是我的css方法是属于Eling对象的，
	// 那么我们需要把获取到的元素，存入数组，然后返回this对象出去，方便实现“.css()”设置样式连缀功能

	this.elements = [];

	//获取节点
	this.getId = function(id){
		this.elements.push(document.getElementById(id));
		return this;
	}
	this.getTagName = function(tagName){
		var tagNames = document.getElementsByTagName(tagName);

		// 获取到的是数组形式，需使用循环逐个添加到数组
		for(var i=0; i<tagNames.length;i++){ 
			this.elements.push(tagNames[i]);
		}
		
		return this;
	}
}

给Eling对象设置.css()方法，
为了便于管理和共享性，我们把共同的方法写到对象的原型( prototype )上;

Eling.prototype.css = function(attr,value){

	// 有时候获取到的是数组，需循环给每个元素设置相应属性
	for(var i=0; i<this.elements.length;i++){ 
		this.elements[i].style[attr] = value;
	}
	return this;	// 依旧需要返回this（Eling）对象，实现可连缀 例如：“ div.css().css() ”;
}

html页面调用

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div class="box" id="box">BOX呵呵呵</div>
	<input type="radio" name="sex" value="男" checked="checked">
	<p>段落</p>
	<p>段落</p>
	<p>段落</p>
	<p>段落</p>

</body>
<script src="eling.js"></script>
<script>
	alert(eling().getId("box"));	// 返回object 
					// 也就是Eling对象，只有这个对象才能调用.css()方法

	eling().getId("box").css("color","red");

	eling().getTagName("p").css("background-color","pink");
	
</script>
</html>