$的符号封装

<!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{
            width: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>

  

posted @ 2019-07-22 21:53  shanlu  阅读(143)  评论(0编辑  收藏  举报