javascript - 在书上看到这样一句：$('tt')获取的永远是对象... 怎么理解

Question

书上说" $('tt')获取的永远是对象,因此要用jQuery检查某个元素在网页上是否存在时，不能用以下代码“if($("#tt")){do something...} 然后我把do something换成了alert($("#tt"))弹出的是"object Object" 如果是这...

PHP中文网 · Answer

jQuery 源码: -> http://code.jquery.com/jquery-2.1.1.js

1. 为什么 `$(selector)` 返回的永远是对象：

看下 jQuery 源码，你会发现：

// 第 73 行
var jQuery = function(selector, context) {
    return new jQuery.fn.init( selector, context );
}

2. 为什么不能用 `if($(selector))` 判断某个元素是否存在：

这里做了一次 Boolean 转换操作，因为 if() 等其他流程控制语句判断条件 true/false 的时候自动执行相应的 Boolean 转换操作。也就是 ToBoolean。

只有这些 false, '', undefined, null, 0(包括 +0, -0) 这些在 ToBoolean 的时候转换为 false。其他情况都转换为 true，所以这里对象 $('#tt') 也会转换为 true，因此走不通。

既然走不通，另辟蹊径吧，比如检查 $(selector).length...(PS：为什么这个对象有 length 属性，这是一个用 jQuery 包装过的类数组对象，默认扩展的有 length 属性，自行参考源码，不赘述)。

参考对照表
ToBoolean

3. 为什么 `alert($('#tt')[0])` 弹出的是 `object HTMLpElement`：

插图仅作演示。

如图，简单说：$(selector) 提取到的对象是一个类数组对象。就是把下面的 document.getElementById('box') 用 jQuery() 做了一次包装。这种类数组对象可以用索引的方式提取对应的实际元素(这里也就是document.getElementById('box'))。

update: 这里之所以这么说，是基于 jQuery 的背景而言。

至此，$('#box')[0] 提取到的是 document.getElementById('box')。

那么 alert($('#box')[0]) 就等价于 alert(document.getElementById('box'))。

而 alert() 本身接受的是字符串参数，对于不是字符串的参数会作 ToString 转换。刚好这里的转换结果是 [object HTMLpElement]。

相关信息自行查阅，参考。或者读读 jQuery 源码理解相关知识点。

附: jQuery 源码分析

PHP中文网 · Answer

用jQuery去检索元素，即使没找到，也会返回一个包装集为document(根元素)的jQuery对象，既然是对象，if判断就为true，要判断元素是否存在，请：

if ($('tt').length) {...}

天蓬老师 · Answer

$美元符号函数返回的是jQuery对象的封装，记住jQuery对象也是对象。而$()[0]获取的是单个元素，则是浏览器JS自支持的HTML对象，当然，它也还是对象就是。在JS中有一句话叫做“一切皆为对象”。

黄舟 · Answer

jQuery对象即为javascript对象的一个数列，而数列本身也是javascript对象的一种。
以上确实错了，主要是没仔细看过jQuery源码的原因。。。

update:
jQuery对象即为javascript对象的一个类数组对象，而类数组对象本身也是javascript对象的一种。

黄舟 · Answer

上面两位讲了 js的原理，我觉得你的疑问是在 if($("#tt")){do something...} 为什么不能用这个判断。

是因为jQuery的原因，每次jQuery操作完毕之后，返回的不是一个单纯的你所想的字符串一样的东东，而是一个jQuery对象。这个对象会包含很多东西，包括你后面用的$("#tt")[0]。是原始HTML对象元素。还有其他很对，这个你可以 console.log($('#tt')) 来看看。所以你如果想判断当前元素有没有加载进来。可以用$('#tt').length。

巴扎黑 · Answer

jquery的一种预防报错的机制,防止获取到不存在的元素的时候会报错,默认的一种方式,如果要判断是否有这个元素,侧需要判断这个元素的长度

高洛峰 · Answer

jQuery对象可以看做数组的封装。
即使没有#tt，也会返回一个jQuery对象，只不过这个jQuery对象是空的罢了。
所以你取它的length属性就可以知道有没有。

有的函数则不是，例如找不到结果的时候返回undefined而不是一个空数组。

大家讲道理 · Answer

囧..

大概是这个.

好像以前听人说过, jquery很乖的, 他返回的不是单纯的节点, 而是在节点外面又加了一层自己的包装.
包装的[0] 位置, 放的才是真的想要的.

大概就是, 船上拉的都是集装箱, 就这么理解就差不多了.

1. 为什么 $(selector) 返回的永远是对象：

2. 为什么不能用 if($(selector)) 判断某个元素是否存在：

3. 为什么 alert($('#tt')[0]) 弹出的是 object HTMLpElement：

1. 为什么 `$(selector)` 返回的永远是对象：

2. 为什么不能用 `if($(selector))` 判断某个元素是否存在：

3. 为什么 `alert($('#tt')[0])` 弹出的是 `object HTMLpElement`：