1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>封装库——连缀</title> 6 <script src="base.js"></script> 7 <script src="demo.js"></script> 8 </head> 9 <body> 10 11 <div id="box">box</div> 12 13 <p>段落</p> 14 <p>段落</p> 15 <p>段落</p> 16 </body> 17 </html>
base.js
1 function Base(){ 2 //创建一个数组来保存获取的节点和节点数组 3 this.elements = []; 4 //获取ID节点 5 this.getId = function(id){ 6 this.elements.push(document.getElementById(id)); 7 return this; 8 }; 9 10 //获取元素节点 11 this.getTagName = function(tag){ 12 var tags = document.getElementsByTagName(tag); 13 for (var i=0; i<tags.length; i++){ 14 this.elements.push(tags[i]); 15 } 16 return this; 17 }; 18 19 } 20 21 Base.prototype.css = function(attr,value){ 22 for (var i=0; i<this.elements.length; i++){ 23 this.elements[i].style[attr] = value; 24 } 25 return this; 26 }; 27 28 Base.prototype.innerhtml = function(str){ 29 for (var i=0; i<this.elements.length; i++){ 30 this.elements[i].innerHTML= str; 31 } 32 return this; 33 }; 34 35 Base.prototype.click = function(fn){ 36 for (var i=0; i<this.elements.length; i++){ 37 this.elements[i].onclick = fn; 38 } 39 return this; 40 };
demo.js
1 window.onload = function(){ 2 $().getId('box').css('color','red').css('backgroundColor','blue'); 3 $().getTagName('p').css('color','green').innerhtml('aaa').click(function(){ 4 alert('nnn'); 5 }).css('background',"red"); //后面的样式会覆盖前面的样式，因为使用的一个原型实例对象，这是需要分开实例化，每个专门一个实例。 6 }