jQuery / JavaScript，为什么我需要将变量包装在 $() 中才能使用它们？答案

【问题标题】：jQuery / JavaScript, why do I need to wrap variables in $() to use them?jQuery / JavaScript，为什么我需要将变量包装在 $() 中才能使用它们？
【发布时间】：2014-11-07 11:42:23
【问题描述】：

假设我有一个元素数组上的地图。回调函数获取数组中该位置的索引和值。

如果我将回调接收到的数组元素包装在 $() 中，它的行为与我预期的一样。如果我使用它而不将其包装在 $() 中，则会出现错误。

var nonHiddenElements = $( "form :input" ).not(':hidden');

nonHiddenElements.map(function(index, element){

    input_id = $(element).attr('id');  // this works

    input_id = element.attr('id') ;    // this gives an error

})

谁能解释一下这是如何工作的。这是 jQuery 的怪癖，还是 JavScript 的东西？

我的 nonHiddenElements 数组究竟包含什么类型的对象？传递给回调的元素是什么？主要是 $() 在做什么？

【问题讨论】：

可能是因为返回的元素是 name 或其他类型的标识符，而不是实际的 DOM 对象本身。
好的，有道理。我在哪里可以读到这种东西。似乎暗示我在阅读每个教程之前就知道这些事情。
你试过 element.id 吗？ .attr() 是一个 jquery 关键字。为了使用它，您需要使用 $(element) 调用 jquery。
@wobbily_col 我很确定它在相应 jQuery 函数的文档中。
$(element) 返回一个包装DOM element 的jQuery 对象。 api.jquery.com/jquery

标签： javascript jquery

【解决方案1】：

您需要了解 jQuery 的实际工作原理。我将尝试简要解释一下。

$ 只是一个普通的 javascript 函数。 jQuery === $，只是一个名字花哨的函数。这个函数做了很多不同的事情，这取决于你传入的内容。例如，如果您传递一个字符串，它将被视为 CSS 选择器，并且 jQuery 内部将尝试查找相应的 DOM 元素。或者如果你传递一个以< 开头并以> 结尾的字符串，jQuery 将通过提供的 HTML 字符串创建一个新的 DOM 元素。

现在，如果您传递一个 DOM 元素或 DOM 元素的 NodeCollection，它/它们将被包装到 jQuery 实例中，以便它们可以拥有 jQuery 原型方法。 jQuery 提供了许多原型方法。例如text、css、append、attr——这些都是jQuery原型的方法。它们基本上是这样定义的（简化）：

jQuery.prototype.text = function() { ... }

普通的 DOM 元素没有 jQuery 提供的那些方便的方法。在 map 或 each 之类的方法中，如果您像检查 this 值或 element 参数一样，您会发现它们实际上不是 jQuery 实例：

element instanceof jQuery // => false

当然你不能在没有实例的情况下使用实例方法。

所以为了使用 jQuery 原型方法，你需要一个 jQuery 实例，你可以通过传入 DOM 元素调用 jQuery 函数来获得：

$(element) instanceof jQuery // true

【讨论】：

谢谢。我可以阅读有关这些内容的更多文档吗？似乎暗示你会提前知道所有这些东西。
我建议通过jQuery learning center。并且还要熟悉原生 javascript prototypical inheritance 概念。

【解决方案2】：

Javascript 是一种编程语言。

jQuery 是一个 JavaScript 库。

使用 jQuery：

$("some element")

在原生 JavaScript 中，你必须做这样的事情。

getElementById('elementByID')

这里详细解释：https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

MDN 对于初学者来说是一个很好的资源。 https://developer.mozilla.org/en-US/docs/Web/JavaScript

【讨论】：