js—连缀

来源：互联网发布：家谱软件手机版编辑：程序博客网时间：2024/05/17 08:00

定义：连缀，最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作。

优点：快速方便的设置节点的操作。

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>

连缀能够快速方便的设置节点的操作。

0 0