首页 > 其他分享> > JQuery选择器实现原理

JQuery选择器实现原理

2020-02-02 17:51:33 作者：互联网

web页面动态的效果最原始的实现是通过JS + DOM来实现的，往往这种做法比较复杂，且繁琐。

那在使用jquery时，通过一些选择器调用相关函数函数就可实现相应的操作方法：

　　jquery选择器：

　　　　　$("#ID选择器")

　　　　$(".Iclass选择器")

　　　　$("p元素选择器")

　　　　$("*") 选中全部元素

范例：观察选择器$("*") 的使用。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("*").attr("class","txt") ;
        })
    </script>
    <style type="text/css">
        .txt{
                background-color: #ddd ;
                font-weight: bold ;
                border: 5px red solid ;
            }
    </style>
</head>
    <body>
        <div id="divH">
            <span id="spanMsg"><h1>Hello Word</h1></span>
        </div>
        <span class="temp">Hello Span</span>
        <p>Hello P</p>
        <hr/>
        <div>Hello Div</div>
        <h2>Hello H2<h3>ddd</h3></h2>
    </body>
</html>

显示效果：

原始做法，通过JS + DOM实现

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
    <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(rootElement){
            if(rootElement.hasChildNodes()){ // 如果元素下有子元素
                var childElement = rootElement.childNodes; // 列出所有的子元素
                for(var x = 0 ; x < childElement.length ; x ++){ // 循环列出所有的子元素
                    if(childElement[x].nodeType == 1){ // 现在是一个元素
                        getAllElements(childElement[x]) ; // 继续找到元素
                    }
                }
            }
            elementsList[foot ++] = rootElement ; // 保存元素
        }
    </script>
    <style type="text/css">
        .txt{
                background-color: #ddd ;
                font-weight: bold ;
                border: 5px red solid ;
            }
    </style>
</head>
    <body>
        <div id="divH">
            <span id="spanMsg"><h1>Hello Word</h1></span>
        </div>
        <span class="temp">Hello Span</span>
        <p>Hello P</p>
        <hr/>
        <div>Hello Div</div>
        <h2>Hello H2<h3>ddd</h3></h2>
    </body>
</html>

标签：JQuery,rootElement,元素,Hello,elementsList,var,原理,选择器
来源： https://www.cnblogs.com/tjava/p/12252967.html