javascript之博客前端连缀，css自定义封装代码笔记

来源：互联网发布：阿里百秀 seo 编辑：程序博客网时间：2024/05/22 14:50

自定义base.js封装库：

/**博客前端+封装库var Base={$:function(id){return document.getElementById(id);},$$:function(name){ return document.getElementsByName(name);},$$$:function(tag){return document.getElementsByTagName(tag);}};var Base={getById:function(id){return document.getElementById(id);},getByName:function(name){ return document.getElementsByName(name);},getByTageName:function(tag){return document.getElementsByTagName(tag);}};*//********************自定义封装***************************/function $(){ return new Base();//每次创建一个Base对象，防止页面共用同一个Base对象}//基础库function Base(){this.elements=[];//创建一个临时数组。存放元素节点对象}//通过id获取节点Base.prototype.getById=function(id){this.elements.push(document.getElementById(id));return this;};//通过元素名称获取节点Base.prototype.getByTagName=function(tag){        vartags=document.getElementsByTagName(tag);for(var i=0;i<tags.length;i++){this.elements.push(tags[i]);}return this;};//获取class节点数组Base.prototype.getClass=function(className,idName){var node=null;if(arguments.length==2){//指定区域div中的所有class集合node=document.getElementById(idName);}else{node=document;}var all=node.getElementsByTagName('*');for(var i=0;i<all.length;i++){if(all[i].className==className){this.elements.push(all[i]);}}return this;}//获取class节点集合中的某一个节点Base.prototype.getElement=function(num){var element=this.elements[num];this.elements=[];//清空原来的节点集合this.elements[0]=element;return this;}//添加classBase.prototype.addClass=function(className){for(var i=0;i<this.elements.length;i++){if(this.elements[i].className.match(new RegExp('(\\s|^)'+className+ '(\\s|$)'))){//避免重复相同的classthis.elements[i].className+=" "+className;}}return this;}//移除classBase.prototype.removeClass=function(className){for(var i=0;i<this.elements.length;i++){if(this.elements[i].className.match(new RegExp('(\\s|^)'+className+ '(\\s|$)'))){//避免重复相同的classthis.elements[i].className= this.elements[i].className.replace(new RegExp("\\s|^"+className+'(\\s|$)'));}}return this;}//设置样式Base.prototype.css=function(attr,value){for(var i=0;i<this.elements.length;i++){if(arguments.length==1){//获取外部样式表的设置if(typeof window.getComputedStyle!='undefined'){//W3Creturn window.getComputedStyle(this.elements[i],null)[attr];}else if(typeof this.elements[i].currentStyle !='undefined'){//IEreturn this.elements[i].currentStyle[attr];}//return this.elements[i].style[attr];//获取css属性内容}this.elements[i].style[attr]=value;}return this;}//设置节点内容Base.prototype.html=function(text){for(var i=0;i<this.elements.length;i++){if(arguments.length==0){return this.elements[i].innerHTML;//获取节点内容}this.elements[i].innerHTML=text;}return this;}//设置点击事件Base.prototype.click=function(fn){ for(var i=0;i<this.elements.length;i++){this.elements[i].onclick=fn;}return this;}

html内容：

<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="Base.js"></script><script type="text/javascript" src="demo3.js"></script><script type="text/javascript"></script></head><body><div id="box">盒子</div><div id="aaa"><p class='pclass'>段落1</p><p class='pclass'>段落1</p><p class='pclass'>段落1</p></div><div id="bbb"><p class='pclass'>段落1</p><p class='pclass'>段落1</p><p class='pclass'>段落1</p></div></body></html>

demo3.js:

/***************连缀：链式编程*************************//*Base.getById('box').css('colr','red').html('').click(function(){alert('');}));Base.getById('box');//返回的divEelementBase.getById('box').css('colr','red');//返回的是Base对象*/window.onload=function(){//alert($().getById('box'));//$().getById('box').css('color','red').css('backgroundColor','black');//$().getByTagName('p').css('color','green').html('标题').click(function(){//alert('测试');//});//$().getById('box').css('font-size','20px');//获取外部样式表的属性值//alert($().getById('box').css('font-size'));//$().getClass('pclass').css('color','red');$().getClass('pclass').getElement(2).css('color','red');$().getClass('pclass','aaa').css('color','red');};

0 0