首页 > 代码库 > 封装一个通用选择器的简单写法
封装一个通用选择器的简单写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>j</title>
</head>
<body>
<div class="box">
<div class="cute">11111</div>
<div class="hh">aaaa</div>
<div class="hh">bbbb</div>
<div id="test">ccccc</div>
<p>标签名实验</p>
</div>
</body>
<script>
function $(selector){ // 对传入的selector进行判断
if(selector.charAt(0)=="."){//class选择器的查找
if(document.getElementsByClassName){
return document.getElementsByClassName(selector.slice(1));
}
else{//IE6，7以及不支持getElementsByClassName方法的浏览器的兼容写法
var results = [];
var elems = document.getElementsByTagName("*");
for(var i = 0; i<elems.length;i++){
// str.indexOf(str2)
if(elems[i].className.indexOf(selector.slice(1))!=-1){
// result的长度会随着添加而变长，也保证数组不覆盖添加
results[results.length] = elems[i];
}
}
return results;
}
}
else if(selector.charAt(0)=="#"){//id选择器的查找
return document.getElementById(selector.slice(1));
}
// 标签名获取
else {//查找标签选择器
return document.getElementsByTagName(selector);
}
}
$("#test").style.background = "red";
$(".hh")[0].style.background = "blue";
$("p")[0].style.background = "green";
</script>
</html>
封装一个通用选择器的简单写法