首页 > 在书上看到这样一句:$('tt')获取的永远是对象... 怎么理解

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

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


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


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

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


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

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


囧..

大概是这个.

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

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


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


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 属性,自行参考源码,不赘述)。

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

插图仅作演示。

如图,简单说:$(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 HTMLDivElement]

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

附: jQuery 源码分析


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

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


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

if ($('tt').length) {...}
【热门文章】
【热门文章】