Question

我一直在学习js对象的工作，所以我决定看看如果我试图将jQuery对象分解为其组件会发生什么。我想知道是否有更好更细粒度的方法来做到这一点，或者是否有一些其他技巧可以教育：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>JQuery Dump</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
            ol li {
                font-weight:bold
            }
            ol li ul {
                margin-bottom:0px
            }
            ol li ul li {
                display:inline-block;
            }
            ol li ul li {
                font-weight:normal;
                list-style:none;
                margin-right:8px;
            }
        </style>
    </head>

    <body>
        <ol>
            <script>
                var x = "";
                for(var i in jQuery) {
                    x += ("<li>" + i + "<ul>");
                    for(var j in jQuery[i]) {
                        x += ("<li><pre>" + j + "</pre></li>");
                    }
                    x += ("</ul></li>");
                }
                document.write(x);
            </script>
        </ol>
    </body>

</html>

Answer 1

这是学习递归函数的绝佳机会。这是一个简洁的例子我已经调整this answer以更好地匹配您的问题（demo）。

<div id="Tree"></div>

使用以下JavaScript：

var tree = $('#Tree');
function r(obj) {
    var html = "<ul>";
    if (obj)
        for (var key in obj) {
            if (typeof obj[key] == "object")
                html += '<li>'+key+':'+r(obj[key])+'</li>';
            else if (typeof obj[key] != "function")
                html +='<li>'+key+':'+obj[key]+'</li>';
            else
                html +='<li>'+key+'()</li>';
        }
    html += "</ul>";
    return html;
} 

$('#Tree').html(r(jQuery));

r(jQuery);

Answer 2

如果您只想查看jQuery对象，可以使用console.dir与对象进行交互。例如，打开控制台并键入console.dir($)。

https://developer.mozilla.org/en-US/docs/DOM/console.dir

Answer 3

不是编写上面的代码并在html页面上打印此代码，您只需尝试console.dir($)并查看控制台屏幕。

转储JQuery对象

3 个答案: