<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> div{ 100px; height:100px; margin:10px; background-color: pink; } </style> <script> window.onload=function() { function $(str) { var s = str.charAt(0);//存储符号 .根据位置返回符号,charAt(),根据符号返回位置是indexOf() var ss = str.substr(1);//从第一个位置取到最好 demo switch (s) { case".": return document.getElementsByClassName(ss); break; case"#": return document.getElementById(ss); break; default: return document.getElementsByTagName(str); } } // $("#lalala").style.backgroundColor="blue"; // for(var i=0;i<$(".demo").length;i++) //有两个.demo,可以用数组遍历的方式让它们都变成绿色。 // { // $(".demo")[i].style.backgroundColor="green"; // } var text=$("div"); for(var j=0;j<text.length;j++) { $("div")[j].style.backgroundColor="gray"; } } </script> </head> <body> <div class="demo"></div> <div class="text"></div> <div class="one"></div> <div id="xxx"></div> <div id="txtx"></div> <div></div> <div id="lalala"></div> <div></div> <div class="demo"></div> <div id="hhh"></div> </body> </html>