js--模仿jQuery的选择器

Posted _江江江江

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js--模仿jQuery的选择器相关的知识，希望对你有一定的参考价值。

之前刚好想要简单的模仿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>

　　

以上是关于js--模仿jQuery的选择器的主要内容，如果未能解决你的问题，请参考以下文章

jquery中的$的特殊用法

jQuery的选择器

jQuery 的选择器在 iframe 中不起作用

jQuery框架-1.基础知识

jquery 选择器，模糊匹配

初识JQuery-选择器