10

在 jQuery 1.4.4 中，如果我在 Google Chrome 的控制台中执行此操作：

var divs = $('div');

...我得到的似乎是一个 DOM 元素数组。但我知道它一定是一个 jQuery 对象，因为我可以在它上面链接 jQuery 方法：

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

我想看到的是 jQuery 对象，它的.fn属性列出了它的所有方法等。我很确定我曾经能够看到这个。

如果我制作自己的对象，如下所示：

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 会像记录非数组对象一样记录它（即具有可扩展的属性树）。

使其不像数组的一种方法是给length属性一个非数字值：

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

ps 您可能希望在length再次使用之前将对象设置回其原始值。

于 2011-01-17T18:37:57.070 回答
0

我有一次在网上发现了这个检查功能，再也没有回头。虽然它不是 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 回答