javascript - 来自 html 的 Javascript 函数和 jquery 选择器的功能

Question

我有这个javascript函数：

function clearDiv(div_id) {
    alert(div_id);
    $(div_id).empty();
}

以及以下html：

<input value="Clear" type="button" onClick="clearDiv(div_to_clear)" />

<div id="div_to_clear">
    <!-- more html -->
</div>

为什么上面实际上会找到带有id的javascript div对象div_to_clear并使用$选择器访问它？

如果我将输入输入为：

<input value="Clear" type="button" onClick="clearDiv('div_to_clear')" />

我需要将我的功能更改为

function clearDiv(div_id) {
    alert(div_id);
    $('#' + div_id).empty();
}

有这方面的文件吗？使用一种方法或另一种方法有优势吗？

score 5 · Accepted Answer

IE（以及为了兼容性而努力的 Chrome）将在窗口上创建属性，其中包含具有 id 的元素名称，对应于这些元素。

在第一个示例中，是window.div_to_clear直接传递指向您的元素的。在第二个中，您传递一个字符串告诉 jQuery 选择哪个元素。

第一个是非标准行为，因此您不应依赖它。

score 1 · Accepted Answer

第一个实际上是一个浏览器错误（他们称之为功能），通过window.div_to_clear（全局变量）访问 DOM 节点 - 并且 jQuery 在元素周围创建了它的包装器。由于遗留原因，它仍然存在于当前浏览器中，但已被弃用。你真的应该使用选择器解决方案。

score 1 · Accepted Answer

这是因为浏览器有一种广泛实施（尽管是not最佳实践）的方法，可以自动将带有id's 的 html 元素放入它们的相关变量名中。例如：

<div id="someId"></div>

最终会伪创建someId包含该 html 元素的变量。

这些问题有类似的行为信息：

这是一个 jsperformance 测试，表明以这种方式访问 id 比使用慢：http document.getElementById: //jsperf.com/global-id-vs-document-getelementbyid

3 回答 3