JavaScript连缀

最新推荐文章于 2019-09-03 15:49:15 发布

千g

最新推荐文章于 2019-09-03 15:49:15 发布

阅读量378

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/n950814abc/article/details/78542843

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先来理解一个概念：JavaScript库

简单来说，就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，

这个包就是 JavaScript 库。现如今有太多优秀的开源 JavaScript 库，比如：

jQuery、Prototype、Dojo、Extjs 等等。这些 JavaScript 库已经把最常用的代码进行

了有效的封装，以方便我们开发，从而提高效率。

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

CSS，设置 innerHTML，设置 click 事件等等，所以就出现了连缀。

连缀：同时设置一个或多个节点两个或两个以上的操作。

比如：

$().getId('box').css('color', 'red').html('标题').click(function () {alert('a')});

连缀的好处：就是快速方便的设置节点的操作。

举个例子：

var $=function(){
	return new Base();  //避免前台new一个对象，在库里面直接new
}

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] .οnclick=fn;
	}
	return this ;
}

调用：

window.οnlοad=function(){
    $().getId("box").css("color","red").css("backgroundColor","black");
	$().getTagName("p").css("color","green").html("标题").click(function(){
		alert("成功！")
	}).css("backgroundColor","pink");
}

HTML：

	<html>
		<head>
			<title>JavaScript库</title>
			<script type="text/javascript" src="demoqq.js"></script>
			<script type="text/javascript" src="baseqq.js"></script>
		</head>
	
		<body>
			
			<div id="box">id</div>
			<input type="radio" name="sex" value="男" checked="checked"/>
			
			<p>段落</p>
			<p>段落</p>
			<p>段落</p>
	
		</body>
	
	</html>

效果：

千g

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
15
评论
JavaScript连缀

先来理解一个概念：JavaScript库简单来说，就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。现如今有太多优秀的开源 JavaScript 库，比如：jQuery、Prototype、Dojo、Extjs 等等。这些 JavaScript 库已经把最常用的代码进行了有效的封装，以方便我
复制链接

扫一扫