仿jquery的$("#demo"),$(".className"),$("div")

最新推荐文章于 2021-03-18 14:38:42 发布

原创最新推荐文章于 2021-03-18 14:38:42 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

web前端同时被 2 个专栏收录

128 篇文章

订阅专栏

javaScript

87 篇文章

订阅专栏

本文介绍了一种仿jQuery的选择器实现方法，通过自定义函数获取DOM元素，支持ID、类名及标签名选择。示例代码展示了如何使用这些自定义函数来操作HTML文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿jquery的$</title>
    <style></style>
</head>
<body>
    <div id="demo" class="demoClass">123</div>
    <script>    
        function getClass(className){ 
            if(document.getElementsByClassName){ //判断浏览器是否支持
                    return document.getElementsByClassName(className);              
            }
            else{
                var dom = document.getElementsByTagName("*");

                var arr = [];   //存放满足类名的对象
                for(var i = 0;i<dom.length;i++){
                    if(isContain(dom[i].className,className)){
                        arr.push(dom[i]);
                    }
                }
                return arr;
            }
        }
        /*var str="#demo" ".demo" "div";*/
        function $(str){
            var c = str.charAt(0);
            var name= str.substr(1);
            switch(c){
                case "#":
                    return document.getElementById(name);
                    break;
                case ".":
                    return getClass(name);
                    break;
                default:
                    return document.getElementsByTagName(str);
                    break;
            }
        }

        $("#demo").innerHTML=$("#demo").innerHTML+" +#demo";
        $(".demoClass")[0].innerHTML=$("#demo").innerHTML+" +.demoClass";
        $("div")[0].innerHTML=$("#demo").innerHTML+" +div";
    </script>
</body>
</html>