<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、类混用,多个类并用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.