jquery $() and document.getElementById

Question

为什么会这样

var drop = document.getElementById('sidebar-left');
if(drop.addEventListener) {
    drop.addEventListener('dragenter', handleDragover, false);
    drop.addEventListener('dragover', handleDragover, false);
    drop.addEventListener('drop', dropIn, false);
}

有效，但是

var drop = $('sidebar-left')[0];
if(drop.addEventListener) {
    drop.addEventListener('dragenter', handleDragover, false);
    drop.addEventListener('dragover', handleDragover, false);
    drop.addEventListener('drop', dropIn, false);
}

不行？据我所知，两者都应该有效。

Answer 1

jQuery $函数需要一个 CSS 选择器，而不是一个 ID。

$('sidebar-left')应该$('#sidebar-left')

您可能会将其与需要 ID 的 Prototype.js $ 函数混淆。

Answer 2

jQuery 方法不起作用，因为你错过了选择器中的#：

var drop = $('#sidebar-left')[0];

目前，它正在尝试获取空jQuery对象的DOM元素，该对象将返回undefined。

要将整个代码片段转换为 jQuery，请尝试以下操作：

var $drop = $('#sidebar-left');
$drop.on('dragenter', handleDragover);
$drop.on('dragover', handleDragover);
$drop.on('drop', dropIn);

Answer 3

$('sidebar-left')

应该是

$('#sidebar-left')

Answer 4

像其他答案一样，我的答案是一样的：jQuery需要一个CSS风格的选择器（参考：Sizzle）。但是，需要注意的一件事是，如果您通过 ID（而不是类）查找某些内容，则不需要使用 [0]，因为它只会返回一个对象。除非您在多个元素上使用相同的 ID...但我不认为你会那样做...

回顾，$('#sidebar-left')

Answer 5

$('sidebar-left')

正在尝试查找所有元素，而不是具有侧边栏左 ID 的元素。你想要

$('#sidebar-left')