<script>
//function $(id) {return document.getElementById(id)}
//id選擇器
//----------封裝類(多各類並用)---------------------
//$('.one .two .three')
//<div class="one two three"></div>
function getClass(classname){
if(document.getElementsByClassName) { //判斷支持與否
return document.getElementsByClassName(classname);
}
var arr = []; //存儲返回的數組
var dom = document.getElementsByTagName("*");
for(var i = 0; i < dom.length; i++) //遍歷所有盒子
{
var txtArr = dom[i].className.split(" "); //用空格分割類名 轉換爲數組 存儲
for(var j = 0; j < txtArr.length; j++) //遍歷 通過類名分割的數組
{
if(txtArr[j] == classname) {
arr.push(dom[i]); //將最終目標div存儲到arr中
}
}
}
return arr;
}
//-------------------封裝類(Id、類、標籤混用)---------------------
//---------------$("#demo") $(".btn") $("div")----------------
function $(str) {
var pre = str.charAt(0); // 返回 # .
var suf = str.substr(1); // 截取第二個之後的所有字符串,截取 # . 之後的字符串(div截取之後結果爲iv)
switch(pre) { //分支樹語句
case "#":
return document.getElementById(suf);
break;
case ".":
return getClass(suf);
break;
default:
return document.getElementsByTagName(str);
}
}
$("#demo").style.backgroundColor = "purple";
var aBtn = $(".btn"); // 相同類在不同div中時,需要遍歷添加樣式
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].style.backgroundColor = "blue";
}
</script>
封裝Id、類混用,多個類並用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.