0

私は仕事用の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>
4

3 に答える 3

4

これは、再帰関数について学ぶ絶好の機会です。これは、私があなたの質問（デモ）によりよく一致するように適応させたこの回答から取られた簡潔な例 です。

<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);
于 2013-03-26T06:52:11.933 に答える
2

jQueryオブジェクトをのぞき見するだけの場合は、オブジェクトを操作するために使用できconsole.dirます。たとえば、コンソールを開いて「。」と入力しconsole.dir($)ます。

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

于 2013-03-26T06:53:06.883 に答える
1

console.dir($)上記のコードを記述してこのコードをhtmlページに印刷する代わりに、コンソール画面を試してみてください。

于 2013-03-26T09:50:37.560 に答える