之前刚好想要简单的模仿jQuery的选择器，今天就刚好学到了，简单点，功能也没有jQuery的完美，实用方便，但是勉强还可以用。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div class="dome"></div>
<div></div>
<div class="test"></div>
<div></div>
<div class="dome test"></div>
<div></div>
<div></div>
<div></div>
<div class="dome"></div>
<div></div>
<script>
$(".dome")[0].style.backgroundColor = "blue";
function $(str){
var s = str.charAt(0);
var ss = str.substr(1);
switch(s){
case "#":
return document.getElementById(ss);
break;
case ".":
return getClass(ss);
break;
default :
return document.getElementsByTagName(ss);
}
}
function getClass(className){
//如果浏览器支持着，则直接返回
if(document.getElementsByClassName){
return document.getElementsByClassName(className);
}
//不支持的浏览器
var arr = [];
var dom = document.getElementsByTagName("*");
for(var i=0; i < dom.length; i++){
// if(dom[i].className == className){
// arr.push(dom[i]);
// }i
//改进后的class
var txt = dom[i].split(" ");//["dome","test"]
for(var j=0; j < txt.length; j++){
if(txt[j] == className){
arr.push(dom[i]);
}
}
}
return arr;
}
</script>
</body>
</html>
时间： 2024-08-02 10:59:20