10

jQuery 1.4.4 で、Google Chrome のコンソールでこれを行うと:

var divs = $('div');

...返されるのは、DOM要素の配列のようです。しかし、jQuery メソッドをチェーンできるため、jQuery オブジェクトでなければならないことはわかっています。

divs.hide('slow').show('slow'); // etc

私が見たいのは、.fnすべてのメソッドをリストするプロパティなどを持つ jQuery オブジェクトです。以前はこれを見ることができたと確信しています。

次のように、独自のオブジェクトを作成する場合:

var foo = {species: 'marmot', flavor: 'lemon'}

...コンソールでそのプロパティを掘り下げることができます。

コンソールで jQuery オブジェクトを調べるにはどうすればよいですか?

また、これを配列のように見せるためにどのような魔法が行われていますか?

更新 - 変更されました

古いバージョンの jQuery をロードした場合 - たとえば、これをコピーしてコンソールの空白のタブに貼り付けます。

http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js

...そして、私はこれを行います:

var divs = $('div');

...jQuery.fn.jQuery.initコンソールで掘り下げることができます。それ以来、何かが確実に変わりました。

4

3 に答える 3

5

このサイトはあなたが探しているものを詳細に説明していると思いますが、要約すると（リンクから）：

jQuery オブジェクトの興味深い点は、そのデータ型がオブジェクトである一方で、配列のような特徴を持っていることです。

  • そのプロパティ名 (少なくとも DOM 要素を参照するもの) は
    数値です。
  • 長さのプロパティがあります

そして:$('div').toSource(); 編集: FF でのみ機能し
ます オブジェクトのプロパティを表示するために必要なものです。

クロムの場合: 代替テキスト

基本的に、Chrome の Javascript コンソールに移動します。[スクリプト] タブ (#1) をクリックします。コードをチェックしたい場所にブレークポイントを置きます (#2)。次に、スクリプトを実行し、その場所で壊れたら、スコープ変数を確認します (#3)。具体的には__proto__セクション。

于 2011-01-17T18:14:58.047 に答える
1

これは非常に満足のいく方法であなたの質問に答えるものではありませんが、あなたが何を求めているかによっては、あなたを助けるかもしれません:

オブジェクトを「配列のようなもの」にしないと、Chrome は非配列オブジェクトの場合と同じようにログに記録することに気付きました (つまり、展開可能なプロパティ ツリーを使用)。

配列のようにならないようにする 1 つの方法は、lengthプロパティに数値以外の値を与えることです。

var divs = $('div');
divs.length = "foo";
console.log(divs);

lengthps オブジェクトを再度使用する前に、オブジェクトを元の値に戻した方がよいでしょう。

于 2011-01-17T18:37:57.070 に答える
0

この検査機能をオンラインで見つけたのは 1 度だけで、二度と振り返ることはありませんでした。ただし、jQueryではありません:/

function inspect(obj, maxLevels, level)
{
  var str = '', type, msg;

    // Start Input Validations
    // Don't touch, we start iterating at level zero
    if(level == null)  level = 0;

    // At least you want to show the first level
    if(maxLevels == null) maxLevels = 1;
    if(maxLevels < 1)     
        return '<font color="red">Error: Levels number must be > 0</font>';

    // We start with a non null object
    if(obj == null)
    return '<font color="red">Error: Object <b>NULL</b></font>';
    // End Input Validations

    // Each Iteration must be indented
    str += '<ul>';

    // Start iterations for all objects in obj
    for(var property in obj)
    {
      try
      {
          // Show "property" and "type property"
          type =  typeof(obj[property]);
          str += '<li>(' + type + ') ' + property + 
                 ( (obj[property]==null)?(': <b>null</b>'):('')) + '</li>';

          // We keep iterating if this property is an Object, non null
          // and we are inside the required number of levels
          if((type == 'object') && (obj[property] != null) && (level+1 < maxLevels))
          str += inspect(obj[property], maxLevels, level+1);
      }
      catch(err)
      {
        // Are there some properties in obj we can't access? Print it red.
        if(typeof(err) == 'string') msg = err;
        else if(err.message)        msg = err.message;
        else if(err.description)    msg = err.description;
        else                        msg = 'Unknown';

        str += '<li><font color="red">(Error) ' + property + ': ' + msg +'</font></li>';
      }
    }

      // Close indent
      str += '</ul>';

    return str;
}

console.log(obj) もクールですが、最近別の非常にクールな関数を見つけました。console.dir(obj) を試すと、コンソールで、obj がすべての深さレベルで見ることができる素敵な小さなノード タイプの構造であることがわかります。試す

console.dir(String)
// or  
obj = {'this' : 'that', 'one' : [2,3,4,5], 'A' : {} }; console.dir(obj)
于 2012-07-20T05:02:17.733 に答える