$符号的封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            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>