jquery - 为什么 .scrollHeight 会这样工作？

Question

$('#div1').scrollTop($('#div1')[0].scrollHeight)

我的意思是，为什么我们需要在所选元素后面指定 [0]。它说明什么？它似乎没有指示 div 元素的子元素，因为即使有更多子元素， [1] 也未定义。如果我警告(('#div1')[0])它会说[object HTMLDivElement]。实际上我从未在 jQuery 中见过这种索引。所以我想知道这个索引零表示什么以及在其他什么情况下使用它？我将不胜感激任何帮助。

Answer 1

.scrollHeight 不是 jQuery 的方法:http://api.jquery.com/scrollHeight/
Element.scrollHeight 是一个 JavaScript 方法，返回

the height of an element's content, including content not visible on the screen due to overflow

由于您要将选择器 "#div1" 传递给 jQuery 对象 $( )，
它将返回 HTMLElements 的数组对象集合。

$('#div1') // [object Object] { 0: [object HTMLDivElement] { ...obj props...}}
              ^--Object Array   ^--key 0   ^--Element Obj. ^--Obj. properties

因此

[object Object].scrollHeight    // undefined

但是如果您从该数组中到达代表 HTMLDivElement 的第 [0]键:

[object Object][0].scrollHeight // 800

您可以访问该特定元素所需的对象属性{...obj props...}，其中scrollHeight是其中之一。

回顾一下，

(JS):

var el = document.getElementById("div1"); // HTMLDivElement
var sh = el.scrollHeight;                 // 800

(jQuery)

var el = $("#div1");                      // Object Array (note the difference)
var sh = el.scrollHeight;                 // undefined
var sh = el[0].scrollHeight;              // 800

要在普通 jQuery 中获取元素的 scrollHeight ^(v.1.6+) 你可以这样做

var sh = $("#div1").prop('scrollHeight'); // 800