为什么有的时候jQuery selector返回的是比较不直观的jQuery对象数组(而非比较直观的DOM列表)?

图1:

图2:

以上两张图是在同一个页面上测试和截取的,同样的jQuery('script')返回的结果却有很大不同。在我的Chrome上,一直以来都是第一种返回结果,在这个返回结果中可以很直观地看到每一个<script>标签的内容。但是今天不知道怎么回事,我只是在正常调试网页,突然之间chrome的返回结果变成了第二种,第二种也许是更“正确”的对象表达方式,但是却非常地不直观。我在同一台电脑上,用QQ浏览器来测试,结果就是第一张图中所显示的。

我想问下大家,在你们的Chrome浏览器上究竟是哪一种结果?还有有没有人知道究竟是什么原因造成了这种突然的变化(我很纠结),然后就是我要怎么才能让这个behavior回复到第一种方式(第二种真的很不习惯也很不方便啊)

在Stackoverflow也提了相同的问题,但是可能因为语言表述的问题,已经完全被老外带偏了。

回复
阅读 2.8k
1 个回答

更新内容较多,重新编辑了一下答案


jquery返回的应该是一个jquery对象,这个对象是一个Dom列表。你的问题在于为什么会出现下面这种状况?



第一种情况

如上图并不是一个HTML Tag Content,他是一个对象,见下图

第二种情况

可以直观的看出是一个类数组对象,$('script')[0]就是第一种情况中的HTMLScriptElement,如下图

在实际的开发过程中,我们常常需要以对象的形式显示,所以我们可以使用下面的方式来强制以对象的形式显示,OObject的首字母

// Element可以是jquery对象,也可以是js原生选择器获取的js对象 
console.log('%O', Element);

为什么会出现上面的两种情况?返回的都是对象,只是展示方式不一致,这个应该是浏览器展现的原因(具体是什么时候会触发这个显示方式暂时没深入研究),浏览器本身也封装了一个$选择器,可以在不引入jQuery的前提下直接通过$('script')获取。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏