先来理解一个概念: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>
效果: