起因是很多网站都有非常多的相同效果,即使是同一个网站也有很多相同的效果的;像sina、京东的选项卡都是N多的!为了以后开发的更效率,我打算建立自己的DIY文件;一个DOM库,一个方法库;开发的时候只需要跟一个配置文件即可;

想想就是一件超级幸福的事情;我在DOM库里可以把很多IE的坑,很多IE不支持的属性,用DOM操作来做一个兼容的方法;

比如getElementsByClassName,这个方法虽然很好用,但是遗憾的是IE并不支持;

我在我的DOM库里,配置了一个getBrosByClassName的全兼容方法来解决;

方法库才刚刚开始做,很多东西还没有严谨的套路;我打算把DOM库按照ECMAScript的语法规范来写一个;

因为闭包的好处,我可以在我自己的DOM里把getBrosByClassName也用getElementsByClassName;用的时候我只需要引用我DOM的name.getElementsByClassName即可;如果直接写getElementsByClassName就是正常的JavaScript语法;

—–

HTML代码如下

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript模块化开发选项卡</title>
<link rel="stylesheet" href="css/tabModel.css"/>
<style>
#home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
#home_bottom {color:#008CD7;text-align:center;font-size:14px;}
</style>
</head>
<body>
<h3 id="home_top">模块化开发选项卡 - Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a>  博客网址:<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
<p id="home_bottom">学习JavaScript是一件很有趣的事,可以做出很多自豪的小玩意!--broszhu (这个页面是实现原理:<a href="http://taobao.fm/archives/988" target="_blank">点此查看</a></p>
<div class="tabModel">
<ul class="tabHeads">
<li class="tabHead selectTabHead highlight">选项1</li>
<li class="tabHead">选项2</li>
<li class="tabHead">选项3</li>
<li class="tabHead">选项4</li>
<li class="tabHead">选项5</li>
</ul>
<div class="tabContents">
<div class="tabContent selectTabContent"><p>模块化开发,把一个效果分为不同的DOM库模块;以后可以加快开发力度;</p></div>
<div class="tabContent">朱安邦002</div>
<div class="tabContent">朱安邦003</div>
<div class="tabContent">朱安邦004</div>
<div class="tabContent">朱安邦005</div>
</div>
</div>
<!--分界线-->
<div class="tabModel">
<ul class="tabHeads">
<li class="tabHead selectTabHead">选项1</li>
<li class="tabHead highlight">选项2</li>
<li class="tabHead">选项3</li>
<li class="tabHead">选项4</li>
<li class="tabHead">选项5</li>
</ul>
<div class="tabContents">
<div class="tabContent selectTabContent">哈哈哈哈哈哈哈001</div>
<div class="tabContent">哈哈哈哈哈哈哈002</div>
<div class="tabContent">哈哈哈哈哈哈哈003</div>
<div class="tabContent">哈哈哈哈哈哈哈004</div>
<div class="tabContent">哈哈哈哈哈哈哈005</div>
</div>
</div>
<!--分界线-->
<div class="tabModel">
<ul class="tabHeads">
<li class="tabHead selectTabHead">选项1</li>
<li class="tabHead">选项2</li>
<li class="tabHead highlight">选项3</li>
<li class="tabHead">选项4</li>
<li class="tabHead">选项5</li>
</ul>
<div class="tabContents">
<div class="tabContent selectTabContent">模块化开发001</div>
<div class="tabContent">模块化开发002</div>
<div class="tabContent">模块化开发003</div>
<div class="tabContent">模块化开发004</div>
<div class="tabContent">模块化开发005</div>
</div>
</div>
<!--分界线-->
<div class="tabModel">
<ul class="tabHeads">
<li class="tabHead selectTabHead">选项1</li>
<li class="tabHead">选项2</li>
<li class="tabHead">选项3</li>
<li class="tabHead highlight">选项4</li>
<li class="tabHead">选项5</li>
</ul>
<div class="tabContents">
<div class="tabContent selectTabContent">朱安邦001</div>
<div class="tabContent">朱安邦002</div>
<div class="tabContent">朱安邦003</div>
<div class="tabContent">朱安邦004</div>
<div class="tabContent">朱安邦005</div>
</div>
</div>
<!--分界线-->
<div class="tabModel">
<ul class="tabHeads">
<li class="tabHead selectTabHead">选项1</li>
<li class="tabHead">选项2</li>
<li class="tabHead">选项3</li>
<li class="tabHead">选项4</li>
<li class="tabHead highlight">选项5</li>
</ul>
<div class="tabContents">
<div class="tabContent selectTabContent">朱安邦001</div>
<div class="tabContent">朱安邦002</div>
<div class="tabContent">朱安邦003</div>
<div class="tabContent">朱安邦004</div>
<div class="tabContent">朱安邦005</div>
</div>
</div>
<!--分界线-->
<script src="js/brosbox.js"></script>
<script src="js/brosTools.js"></script>
<script src="js/tabModel.js"></script>
</body>
</html>

CSS代码如下(我打算以后也做个CSS的库;但是现在对CSS研究的还不是很深,所以这个目前只是一个决定,还没有进入实际行动)

div,ul,li{
padding: 0;
margin: 0;
font-size: 16px;
font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
}
ul,li{
list-style: none;
}
.tabModel{
width: 600px;
height: 500px;
border:1px solid #ccc ;
border-radius: 5px;
margin: 10px auto;
padding: 5px;
}
.tabHeads{position: relative;top: 1px}
.tabHead{
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid red ;
float: left;
margin-right:10px ;
cursor: pointer;
}
.tabContent{
width: 100%;
height: 465px;
line-height: 465px;
text-align: center;
border: 1px solid red ;
clear: both;
display: none;
}
.highlight{color: #00FF00 }
.selectTabHead{background: #ffff00}
.selectTabContent{display: block}

配置的JS文件;

var oTabHeads=brosbox.getBrosboxByClassName("tabHead");
for (var i=0;i<oTabHeads.length;i++){
oTabHeads.item(i).onmouseover=brosTools.changeTab;
}

下面是我的方法库里面的代码:

var brosTools={};

brosTools.changeTab=function(){
var n=brosbox.getIndex(this);//获取当前元素的索引号;
brosbox.addClass(this,"selectTabHead");//被点击元素添加tabSelectHead的class字符串;

var siblings=brosbox.siblings(this);//获取当前元素的兄弟们;
for(var i=0;i<siblings.length;i++){
brosbox.removeClass(siblings[i],"selectTabHead");//清除当前选中tabHead兄弟们的selectTabHead属性;
};

var parent=this.parentNode;//获取当前元素的父级节点;
var sconentGroup=brosbox.brosNextSiling(parent);//获取当前元素父级节点的下一个兄弟节点;
var contents=brosbox.broschildren2(sconentGroup,"div");//获取当前元素父节点下的所有元素子节点;
for(var i=0;i<contents.length;i++){
brosbox.removeClass(contents[i],"selectTabContent");//删除节点的selectTabContent属性;
}
brosbox.addClass(contents[n],"selectTabContent");
};

下面就是我的DOM库和方法库里的代码;

—-

DOM库的;

var brosbox={};

//getElementsByClassName兼容IE的方法;
brosbox.getBrosboxByClassName=function(classStr,context){//classStr可能是一个也可能是多个;
context=context||document;//如果没有传context,则默认用document;
if(context.getElementsByClassName){
return context.getElementsByClassName(classStr);//如果是非IE浏览器,支持getElementsByClassName的,直接使用这个方法就可以了;
}else{
classStr=classStr.replace(/^ +| +$/g,"");//classStr可能传很多个,防止输入不规范,掐头去尾的空格
var aClass=classStr.split(/ +/);//用空格吧传进来的字符串分割成数组;
var eles=context.getElementsByTagName("*");//获得所有的tagName,这个方法是兼容的;
for(var i=0;i<aClass.length;i++){
var str=aClass[i];
var reg=new RegExp("(^?:| )"+str+"?: |$");//创建一个正则,用的是aClass其中的一项作为关键字;

var a=[];
for(var j=0;j<eles.length;j++){
var ele=eles[j];//把eles其中一项拿出来试;
if(reg.test(ele.className)){//只有满足我们定义正则的规则;才是我们想要的className;
a.push(ele);//把目标className推到a数组中;
}
}
eles=a;//重新更新一下eles;这时候里面的数组,就是我们想要的目标数组了;
}
return eles;
}
};

//获取元素的索引值;
brosbox.getIndex=function(ele){
var n=0;//假设当前这个ele就是第一个索引; 用的是假设法;
var prev=ele.previousSibling;//获取他上一个哥哥节点;
while(prev){//如果当前ele有上一个哥哥节点.那么循环;如果上一个哥哥节点是空,即false,循环中断;
if(prev.nodeType===1){//如果上一个哥哥的节点属性值是1;说名是元素节点;就是我们的目标;
n++;//让n加1;把n向后降一位;这样一个一个向后查找即可;
}
prev=prev.previousSibling;//让prev自增,相当于i++;JS循环中条件必须要有改变的,否则就是死循环了;
}
return n;
};

//获取元素的所有兄弟节点们:
//import:目标元素
//return:一个目标数组;
brosbox.siblings=function(ele){
var allEles=ele.parentNode.childNodes;//获取当前元素节点所在父级下的所有子节点;
var a=[];
for(var i=0;i<allEles.length;i++){
var thisEle=allEles[i];
if(thisEle.nodeType===1&&thisEle!=ele){//如果一个节点不是elel,并且是一个元素节点;(就是需要的目标了)
a.push(thisEle);//收集目标节点;
}
}
return a;
};

//添加元素的class值;
//import:操作的目标对象和需要添加的class字符串;
brosbox.addClass=function(ele,classStr){
var reg=new RegExp("(?:^| )"+classStr+"(?: |$)");//规定class值的格式;
if(!reg.test(ele.className))//当本身的elel没有传入的classStr的时候;这个好像有BUG,需要研究下;
ele.className+=" "+classStr;//给他的class属性上加一个传入的字符串(前面加空格是为了CSS的格式;);
};

//删除元素中指定的class值;
//import:操作的目标对象和需要删除的class字符串
brosbox.removeClass=function(ele,classStr){
var reg=new RegExp("(?:^| )"+classStr+"(?: |$)");//规定class值的格式;
ele.className=ele.className.replace(reg," ");
};

//获取ele相邻的第一个弟弟元素;
brosbox.brosNextSiling=function(ele){
if(ele.nextElementSibling){
return ele.nextElementSibling;//如果存在elel.nextElementSibling这个方法,就直接返回这个方法;
}
var n=ele.nextSibling;
while(n){
if(n.nodeType===1){
return n;//返回需要的目标;
}
n= n.nextSibling;//自增条件;
}
return null;
};

//获取元素的子节点;
brosbox.broschildren2=function(parent,tagName){
var childNodes=parent.childNodes;
if(typeof tagName=="undefined"){
var reg=/^[A-Z]\w*$/;//如果没有传第二个元素,则把所有的子元素都取到;
}else if(typeof tagName=="string"){
var reg=new RegExp("^"+tagName.toUpperCase()+"$");//因为reg.test返回值是一个大写的字符串;所以要转成大写的;
}
var a=[];
for(var i=0;i<childNodes.length;i++){
var child=childNodes[i];
if(reg.test(child.nodeName)){
a.push(child);
}
}
return a;
};














 

brosTools里的changeTab写出下面的就更清晰了;

brosTools.changeTab=function(){
//下面目的是清除li的selectTab属性
var siblings=brosbox.siblings(this);//获取当前元素的兄弟们(不包括当前元素);
for(var i=0;i<siblings.length;i++){
brosbox.removeClass(siblings[i],"selectTabHead");//清除当前选中tabHead兄弟们的selectTabHead属性;
};
//下面目的是清除DIV的selectTab属性
var parent=this.parentNode;//获取当前元素的父级节点;
var sconentGroup=brosbox.brosNextSiling(parent);//获取当前元素父级节点的下一个兄弟节点;
var contents=brosbox.broschildren2(sconentGroup,"div");//获取当前元素父级节点的下一个兄弟节点内的所有元素子节点;
for(var i=0;i<contents.length;i++){
brosbox.removeClass(contents[i],"selectTabContent");//删除节点的selectTabContent属性;
}

//下面的目的是添加li和DIV的selectTab属性
brosbox.addClass(this,"selectTabHead");//被点击元素添加tabSelectHead的class字符串;
var n=brosbox.getIndex(this);//获取当前元素的索引号;
brosbox.addClass(contents[n],"selectTabContent");//内容区的selectTabContent添加;
};

———-