<!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 id="demo"></div><div></div><div></div><div class="one"></div><div class="one"></div><div class="one"></div><div></div><div></div><div></div><div id="last"></div></body></html><script> //function $(id) {return document.getElementById(id)} //id选择器 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(" "); // 分割类名 并且 转换为数组 // ["demo","test"]; for(var j=0;j<txtarr.length;j++) // 遍历 通过类名分割的数组 { if(txtarr[j] == classname) { arr.push(dom[i]); // 我们要的是 div } } } return arr; } // $("#demo") $(".one") $("div") //封装自己的$ function $(str) { var s = str.charAt(0); // 一个s 的变量 存放是 符号 # . var ss = str.substr(1); // demo switch(s) { case "#": return document.getElementById(ss); break; case ".": return getClass(ss); break; default : return document.getElementsByTagName(str); } } $("#demo").style.backgroundColor = "purple"; $("#last").style.backgroundColor = "purple"; var test = $(".one"); for(var i=0;i<test.length;i++) { test[i].style.backgroundColor = "blue"; }</script>
转载于:https://www.cnblogs.com/yiwangdeyidianyuan/p/5777751.html
相关资源：数据结构—成绩单生成器