zoukankan      html  css  js  c++  java
  • $的符号封装

    <!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>
    

      

  • 相关阅读:
    从零自学Java-10.充分利用现有对象
    读书笔记-读《代码大全》有感
    从零自学Java-9.描述对象
    从零自学Java-8.创建第一个对象
    随机森林理解
    百度 前端 rem 适配 和 阿里 前端 rem 适配
    移动端 轮播
    楼层 跟随 js与jq
    js 滚动到指定位置(带step 速度)
    js 事件流
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11228726.html
Copyright © 2011-2022 走看看