定义:连缀,最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作。
优点:快速方便的设置节点的操作。
js中的方法:
var $ = function () {
return new Base();
}
function Base() {
//创建一个数组,来保存获取的节点和节点数组
this.elements = [];
//获取ID节点
this.getId = function (id) {
this.elements.push(document.getElementById(id));
return this;
};
//获取元素节点
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.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style[attr] = value;
}
return this;
}
//设置HTML页面
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].innerHTML = str;
}
return this;
}
//设置点击事件
Base.prototype.click = function (fn) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onclick = fn;
}
return this;
}
调用:
window.onload = function () {
//alert(base.getId('UserName').elements.length);
$().getId('UserName').css('color', 'red').css('backgroundColor', 'black');
//alert(base.getTagName('li').elements.length);
$().getTagName('li').css('color', 'green').html('标题').click(function () {
alert('成功');
}).css('backgroundColor', 'pink');
};
在HTML中写入要显示的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>连缀</title>
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<div id="UserName">UserName</div>
<li>段落</li>
<li>段落</li>
<li>段落</li>
</body>
</html>
连缀能够快速方便的设置节点的操作。