js--模仿jQuery的选择器-CSDN博客

之前刚好想要简单的模仿jQuery的选择器，今天就刚好学到了，简单点，功能也没有jQuery的完美，实用方便，但是勉强还可以用。

<!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 class="dome"></div>
<div></div>
<div class="test"></div>
<div></div>
<div class="dome test"></div>
<div></div>
<div></div>
<div></div>
<div class="dome"></div>
<div></div>
<script>


        $(".dome")[0].style.backgroundColor = "blue";


    function $(str){
        var s = str.charAt(0);
        var ss = str.substr(1);

        switch(s){
            case "#":
                return document.getElementById(ss);
                break;
            case ".":
                return getClass(ss);
                break;
            default :
                return document.getElementsByTagName(ss);
        }

    }

    function getClass(className){
        //如果浏览器支持着，则直接返回
        if(document.getElementsByClassName){
            return document.getElementsByClassName(className);
        }
        //不支持的浏览器
        var  arr = [];
        var dom = document.getElementsByTagName("*");

        for(var i=0; i < dom.length; i++){
//                if(dom[i].className == className){
//                    arr.push(dom[i]);
//                }i
            //改进后的class

            var  txt = dom[i].split(" ");//["dome","test"]
            for(var j=0; j < txt.length; j++){
                if(txt[j] == className){
                    arr.push(dom[i]);
                }
            }
        }
        return arr;
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/jiang-z/p/7482681.html