一株搔、JavaScript 的分層概念 和 JavaScript 庫(kù)
JavaScript分層（從下往上）
①base層：
位于最低端灶搜，負(fù)責(zé)封裝不同瀏覽器下JavaScript的差異湿故，提供統(tǒng)一接口妄辩；也可以給上兩層提供接口瑞眼。
②common層：
位于中間端触徐，依賴(lài)base層提供的接口，功能是給上一層提供組件。
③page層：
位于最頂端神得，功能是來(lái)完成頁(yè)面內(nèi)的功能需求。
base層（查看 IE 和 Firefox 的區(qū)別）
1.以下IE會(huì)彈出 item2偷仿，F(xiàn)irefox 會(huì)彈出 undefined 哩簿；兩行注釋IE會(huì)彈出 1 和 3；Firefox會(huì)彈出 3 和 7
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
</ul>
<script>
var item1 = document.getElementById("item1");
alert(item1.nextSibling.id);
// alert(item1.nextSibling.nodeType); 彈出 類(lèi)型為文本節(jié)點(diǎn)3
// alert(document.getElementsByTagName("ul")[0].childNodes.length); 彈出ul的全部子節(jié)點(diǎn) 7
</script>
2.以下把空格和換行去掉會(huì)彈出一致的 item2
<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li></ul>
<script>
var item1 = document.getElementById("item1");
alert(item1.nextSibling.id);
</script>
3.以下用來(lái)判斷瀏覽器的類(lèi)型
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
</ul>
<script>
var item1 = document.getElementById("item1");
var nextNode = item1.nextSibling;
// Firefox 支持 document.all 這里用以判別瀏覽器的類(lèi)型
if(!document.all){
while(true){
if(nextNode.nodeType == 1){
break
}else {
if(nextNode.nextSibling){
nextNode = nextNode.nextSibling;
}else{
break;
}
}
}
}
alert(nextNode.id);
</script>
base層封裝函數(shù)
var GLOBAL = {};
GLOBAL.namespace=function(str){
var arr=str.split("."),o=GLOBAL;
for(i=(arr[0]=="GLOBAL")? 1:0; i<arr.length; i++){
o[arr[i]]= o[arr[i]] || {};
o=o[arr[i]];
}
};
兼容 / 阻止冒泡事件
//IE 和 Firefox 兼容
GLOBAL.Event.getEventTarget = function (e) {
e = window.event || e;
return e.srcElement || e.target;
};
//阻止冒泡事件
GLOBAL.Event.stopPropagation = function (e) {
e = window.event || e;
if(document.all){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
};
透明度
//設(shè)置透明度(id酝静，透明度)
GLOBAL.Dom.setOpacity = function (nodeElement,level){
if (document.all){
nodeElement.style.filter = 'alpha(opacity='+ level +')';
}else{
nodeElement.style.opacity = level / 100 ;
}
};
// 調(diào)用
GLOBAL.Dom.get("test1");
GLOBAL.Dom.setOpacity(test1,30);
GLOBAL.Dom.get("test2");
GLOBAL.Dom.setOpacity(test2,50);
監(jiān)聽(tīng)click事件
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div id="box">
<input type="button" value="提交" id="btn"/>
</div>
<script>
var btn = document.getElementById("btn");
if(document.all){
btn.attachEvent("onclick",function(){
alert(1);
});
} else{
btn.addEventListener("click",function(){
alert(1);
},false);
}
if(document.all){
btn.attachEvent("onclick",function(){
alert(2);
});
} else {
btn.addEventListener("click", function () {
alert(2)
}, false);
}
</script>
監(jiān)聽(tīng)封裝函數(shù)
//監(jiān)聽(tīng)click事件
GLOBAL.Event.on = function (nodeElement,eventType,handler){
if(document.all){
nodeElement.attachEvent("on" + eventType,handler);
}else{
nodeElement.addEventListener(eventType,handler,false);
}
};
Tab組件的擴(kuò)展
<div class="tab">
<ul class="tab-menu" id="tab-menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<div class="tab-content" id="tab-content">
<div>content1</div>
<div style="display: none">content2</div>
<div style="display: none">content3</div>
<div style="display: none">content4</div>
</div>
</div>
<script>
var tabMenu = document.getElementById("tab-menu").getElementsByTagName("li"),
tabContent = document.getElementById("tab-content").getElementsByTagName("div");
// 兩種解決for循環(huán)的Bug
// 1.利用命名空間閉包
for(var i=0;i<tabMenu.length;i++){
(function(_i){
tabMenu[_i].onclick = function(){
// 遍歷數(shù)組节榜，隱藏所有 tabContent
for(var j=0;j<tabContent.length;j++){
tabContent[j].style.display = "none";
}
tabContent[_i].style.display = "block";
}
})(i);
}
// 2.給DOM節(jié)點(diǎn)添加 _index 屬性，屬性等于索引
// for(var i=0;i<tabMenu.length;i++){
// tabMenu[i]._index=i;
// tabMenu[i].onclick = function(){
// // 遍歷數(shù)組别智，隱藏所有 tabContent
// for(var j=0;j<tabContent.length;j++){
// tabContent[j].style.display = "none";
// }
// tabContent[this._index].style.display = "block";
// }
// }
</script>
