连缀介绍和简单库对象

调用库的时候，我们需要能够在前台调用的时候可以同时设置多个操作，比如设置CSS，设置innerHTML，设置click事件...

这里提到的库只是自己编写的为了方便的“个人代码微库”的部分，非主流框架库

1.连缀介绍：

所谓的连缀其实就是同时给一个或多个节点进行两个或两个以上的操作：

     $().getId('box').css('backgroundColor','black').css('color','white').html('你好').click(function(){alert('a')});

好处在于我们可以很方便的进行节点操作的设置

2.简单库对象写法：

var Base = function () {this.elements = [];//获取idthis.getId=function(id){this.elements.push(document.getElementById(id));return this}//获取元素this.getTagName = function(tagName){var tags = document.getElementsByTagName(tagName);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;
}Base.prototype.html = function(value){for(var i=0;i<this.elements.length;i++){this.elements[i].innerHTML = value;}return this;
}Base.prototype.click = function(fn){for(var i=0;i<this.elements.length;i++){this.elements[i].onclick = fn;}return this;
}

为了避免每次去New对象，可以直接在库中写上：

var $ = function(){return new Base();
}

这样就可以很方便的实现连缀操作了，如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>连缀Demo</title><script type="text/javascript" src="base.js"></script><script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="box" >2</div>
<p>P1</p>
<p>P2</p>
</body>
</html>

加上节点操作：

window.onload = function () {$().getId('box').css('backgroundColor','black').css('color','white').html('你好').click(function(){alert('a')});$().getTagName('p').html('改变你').click(function(){alert('changed')});
}

连缀介绍和简单库对象相关推荐

达梦数据库DM8-DM数据迁移工具介绍和简单使用
达梦数据库DM8-DM数据迁移工具介绍和简单使用系列文章目录本文环境 1.DM管理工具介绍 2.DM数据迁移工具简单使用 1.打开DM数据迁移工具 2.新建工程 3.新建迁移任务DM到DM 3.新 ...
【日志问题】JDK Logging、Commons Logging和Log4j、Slf4j和Logbacck的介绍和简单使用
[日志问题]JDK Logging.Commons Logging和Log4j.Slf4j和Logbacck的介绍和简单使用是什么简介如何使用 JDK logging log4j +slf4j ...
Fresco图片加载框架的介绍,相关开源库以及工具类的封装
Fresco图片加载框架的介绍,相关开源库以及工具类的封装本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 简介 Fresco 是Facebook开源的安卓上的 ...
gradle介绍，简单易学
系列文章目录简单易学的gradle教程一. 最简单的gradle介绍,简单易学二. gradle的基本原理三. 基于gradle持续集成文章目录系列文章目录 gradle介绍一.Grad ...
Matplotlib的介绍及简单操作
Matplotlib的介绍及简单操作 1 什么是Matplotlib 是专门用于开发2D图表(包括3D图表) 以渐进.交互式方式实现数据可视化 2 为什么要学习Matplotlib 可视化是在整个数据 ...
（三）AJAX基本介绍和简单实例03
(三)AJAX基本介绍和简单实例03-----Ajax与数据库的动态应用前台显示界面: 选择所有客户之后: 选择其中一个客户---杜森: Demo03.html代码 <html> < ...
Python导入标准库和扩展库对象的几种方式
Python中的对象大概可以分为三类:内置对象.标准库对象和扩展库对象.其中内置对象是直接编译进解释器的可以直接使用,没有对应的Python源代码:标准库对象是随Python安装的,但是需要导入才能使 ...
SQL Server中追踪器Trace的介绍和简单使用
原文:SQL Server中追踪器Trace的介绍和简单使用一.What is Trace? 对于SQL Profiler这个工具相信大家都不是很陌生,没用过的朋友可以在SQL Server Man ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...

连缀介绍和简单库对象

连缀介绍和简单库对象相关推荐

最新文章

热门文章