jquery $（）和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')

正在尝试查找所有元素，而不是具有sidebar-left id的元素。你想要

$('#sidebar-left')