代码改变世界

jQuery数组遍历

2020-04-09 21:27  默默不语  阅读(316)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="d1">
                我是div1
        </div>
        <div class="d2">
            <p>哈哈</p>
        </div>
        <button type="button" id="b1">DOM获取</button>
        <button type="button" id="b2">jQuery获取</button>
    </body>
    <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        /* 获取页面所有元素 */
        document.getElementById("b1").onclick = function(){
            var all = document.getElementsByTagName("*");
            alert(all.length);
            for(var i=0;i<all.length;i++){
                alert(all[i].nodeName);
            }
            
        }
        
        document.getElementById("b2").onclick = function(){
            var $all = $("*");
            alert($all.length);
            /* each函数遍历 */
            /* jQuery对象本身就是一个DOM对象数组，其中包含n个DOM对象 */
            $all.each(function(index,item){
                alert("下标为：" + index + "元素为：" + item)
            })
            /* $all.get(i)与$all[i]等价 */
            var one = $all.get(3);
            var two = $all[3];
            
        }
    </script>
</html>