JQ选择器的JS实现方式 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/JQ3.3.1.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript">
            window.onload = function() {
                var rootElement = document.getElementsByTagName("html")[0]; //获取根元素
                getAllElements(rootElement); //从根元素开始触发
                for(var x = 0; x < elementsList.length; x++) {
                    elementsList[x].setAttribute("class", "txt");
                }
            }

            var elementsList = new Array(); //定义一个保存元素的数组
            var foot = 0; //定义一个数组操作的角标
            function getAllElements(element) {
                if(element.hasChildNodes()) { //当前元素有子元素
                    var childElement = element.childNodes; //列出所有的子元素
                    for(var x = 0; x < childElement.length; x++) { //循环所有子元素
                        if(childElement[x].nodeType == 1) { //现在是一个元素
                            getAllElements(childElement[x]); //继续找元素

                        }

                    }
                }
                elementsList[foot++] = element; //保存元素
            }
        </script>
    </head>

    <body>
        <div id="showMsg">
            <h1>test</h1></div>
        <div id="showMsg">
            <h1>test</h1></div>
        <span class="temp">test</span>
        <span>test</span>
        <p class="temp">test</p>
        <p>test</p>
    </body>

</html>

 

posted on 2018-04-18 18:25  三盛乙烯  阅读(160)  评论(0)    收藏  举报

导航