javascript - Javascript/jQuery 变量，使用 var 的正确方法是什么？

Question

如果这是一个愚蠢或简单的问题，我很抱歉，但我对 Javascript/jQuery 相当陌生。在过去的一个月里，我真的开始深入研究脚本领域，并且看到了人们var在 Javascript/jQuery 中使用的两种不同的，也许是三种方式。

我使用 var 的方式是这样的，

var nav = $('nav');

nav.hide();

我看到人们使用 vars 的一种非常常见的方式，

var nav = $('nav');

$(nav).hide();

从答案来看，

var $nav = $('nav');

$nav.hide();

根据我从谷歌搜索中了解到的信息，您在变量中键入的内容将保存在那里以供以后使用。然后我想如果我在使用它时在var周围写了$（），它会复制$（）。然而，这两种方式似乎都有效，所以我知道它不会重复它，因此可以说它是同一件事。

有没有正确的使用方法，vars或者两者都一样，没关系？

如果这是一个已知的答案，我再次道歉，如果有人可以向我展示原始问题但我找不到任何内容，我很乐意将其删除。

来自我没有标记为答案但我发现非常重要的答案的大量信息。

var element = document.createElement("div");
$("body").append(element);
$(element).hide(); 

在上面的示例中，$(element) 是必需的，因为它接受一个 DOM 对象并将其转换为 jQuery 选择器。jQuery 函数仅适用于 jQuery 选择器，因此您不能简单地执行 element.hide()。

Answer 1

$()创建一个新的 jQuery 对象。如果你将一个 jQuery 对象保存到一个变量中，那么从它创建另一个 jQuery 对象是没有意义的，尽管它仍然可以工作。您经常会看到人们将以前创建为 jQuery 对象的变量包装起来$()纯粹是由于不好的做法，或者忘记它已经是一个对象......或者不了解他们刚创建的内容

或许你见过

var $nav = $('nav');

$nav.hide();

使用$前缀是一种常见的做法，表示该变量是一个 jQuery 对象，主要是为了代码可读性

Answer 2

这两个变量都存储一个 jQuery 对象，该对象可以访问 jQuery 方法。后一种方法不必要地尝试将该 jQuery 对象重新包装在另一个jQuery 对象中。前一种方法是“正确的”，因为它更有效且更少，坦率地说，很愚蠢。

Answer 3

我在很多地方都看到过这个问题。人们在不需要的时候会使用很多美元。有些人只是将其用作变量名的装饰，这增加了混乱。

首先，没有jQuery变量，只有JavaScript变量，正如你所说，变量存储信息。当右侧以 $() 开头时，您将 jQuery 函数的结果存储在变量中。在绝大多数情况下，您将存储的内容称为 jQuery选择器。

在 的情况下var nav = $('nav')，您要存储的是一个选择器，它表示 DOM 中所有作为导航标签的元素，即看起来像<nav></nav>（或等效）的元素。

正如其他人已经提到的，$(nav)正在获取存储的选择器，并从中创建一个新的选择器。它什么也没做，而且是多余的，是一种糟糕的编程实践，即使它很普遍。

但是，有一个类似的语法是有意义的：

var element = document.createElement("div");
$("body").append(element);
$(element).hide(); 

在上面的示例中，$(element)这是必要的，因为它需要一个 DOM 对象并将其转换为 jQuery 选择器。jQuery 函数只适用于 jQuery 选择器，所以你不能简单地做element.hide().

正如我在顶部提到的，有些人还使用 $ 作为变量名的修饰符，例如var $selector = $("nav"). $左边的 没有任何意义——它只是变量名中的一个字符，但他们使用它作为一种约定来提醒自己他们正在存储一个 jQuery 选择器。我会避免它，只是因为它增加了混乱，但它就在那里，所以我只想提一下。

Answer 4

var用于创建任何类型的变量。可以是var diceRoll = 4orvar myMessage = "Hello!"或其他任何东西。

$是 jQuery 提供的一个函数，它的行为方式取决于你传递给它的内容。例如，如果您向它传递一个字符串（例如'nav'），它会找到nav文档中的每个元素并返回一组 jQuery 对象（元素）——它对应于它找到的每个 DOM 元素。当您说 时var nav = $('nav');，您将这组 jQuery 对象分配给您的nav变量，因此您可以稍后使用它。到目前为止，一切都很好。

与其将字符串传递给$，从技术上讲，您可以将 jQuery 对象传递回$函数，这就是您说$(nav).hide();. 这样做没有什么意义 - 它只会返回相同的 jQuery 对象数组，nav您首先放入其中！

就个人而言，我喜欢在任何包含 jQuery 对象的变量前面加上一个$符号，即var $nav = $('nav');. 这只是一个约定，让我一眼就能看出这个变量包含一个 jQuery 对象（元素）而不是原生 DOM 元素或整数等。如果我在我的代码中看到 $($myVar)，我知道可能该睡觉了...

$()更新：除了字符串之外，还有其他一些东西传递给函数是有意义的。例如，传入一个 DOM 元素（例如 say $(document)）会创建该 DOM 元素的 jQuery 对象表示，这可能非常有用。

Answer 5

所有这些答案都是整个答案的一部分。. . 让我再补充一点。:)

正如其他人所说，$(...)符号是一个返回 JQuery 对象的 JQuery 函数。根据“...”是什么，确定如何完成。

一些例子：

• 如果您在其中放置一个选择器，例如“div”，您将获得一个 JQuery 对象，其中包含与选择器模式匹配的所有 DOM 元素。. . 在这种情况下，所有<div>元素。

• 如果您传递一个 HTML 元素的字符串表示形式（例如，"<div></div>"），您将获得一个指向新创建<div>元素的 JQuery 对象。

• 如果您在其中放置一个 DOM 节点引用（例如，通过 using 创建的document.getElementsByTagName("div")），它将创建一个指向该引用中该节点的 JQuery 对象。

整个问题在于 JQuery 与 JQuery 对象一起工作，因此这些不同的函数可以帮助程序员创建它们。

现在这是我们回答您的问题的地方。. .

每次使用 时$("...")，都会创建一个全新的对象，因此，例如以下代码将生成两个唯一的 JQuery 对象，每个对象都指向相同的 DOM 元素：

var $firstObject = $("div");
var $secondObject = $("div");

因此，如果您对它们进行比较（像这样($firstObject === $secondObject)），它们将不会被视为相等，因为它们不是同一个对象。

现在，让我对您的第二个示例稍作改动，以增加一点清晰度。如果您创建第三个变量并将其设置为等于第二个变量，如下所示：

var $thirdObject = $secondObject;

. . . 你有两个元素实际上指向同一个 JQuery 对象，所以它们实际上是相等的（即，($secondObject === $thirdObject)将评估为真）。

现在终于，你用这段代码展示了：

$(nav).hide();

. . . 只是尝试创建 JQuery 对象的另一个示例。. . 这次使用另一个 JQuery 对象。但是，使用我在上面创建的第三个变量执行此操作现在将破坏它与第二个变量的关系。. . ($secondObject === $($thirdObject)). . . 它们不再相等，因为比较的两侧不再指向同一个对象。$firstObject与之前的比较非常相似$secondObject，该比较使用两个唯一的 JQuery 对象。

然而 。. .

与其他一些答案不同，我不同意这是一种完全不正确的编码形式。. . 虽然我永远不会在您在示例中提供的情况下使用它，但将 JQuery 对象传递给$(...)函数与使用.clone(). 下面的两个$bar赋值在功能上是等效的：

var $foo = $("<div></div>");

var $bar = $($foo);
var $bar = $foo.clone();

JQuery API 甚至提出了同样的观点（http://api.jquery.com/jQuery/）：

克隆 jQuery 对象

当一个 jQuery 对象被传递给 $() 函数时，会创建一个对象的克隆。这个新的 jQuery 对象引用了与初始对象相同的 DOM 元素。

编辑 ：

出于好奇，我在 jsPerf 上设置了一个快速测试，该$($foo)方法比.clone()在 Firefox、IE9 和 Chrome 中快得多：http: //jsperf.com/clone-technique-test

Answer 6

var nav = $('nav');

$(nav).hide();

nav已经是一个 jQuery 对象，所以$(nav)没用。