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

Question

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

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

var nav = $('nav');

nav.hide();

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

var nav = $('nav');

$(nav).hide();

从答案，

var $nav = $('nav');

$nav.hide();

从我通过Google搜索中学到的内容，您在变量中输入的内容将保存在那里以供日后使用。 然后我想到如果我在使用它时在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 = 4或var myMessage = "Hello!" 或其他任何东西。

$是jQuery提供的一个函数，它根据您传递给它的内容以不同的方式运行。 例如，如果你传递一个字符串（例如'nav' ），它将找到文档中的每个nav元素并返回一组jQuery对象（元素） - 一个用于它找到的每个DOM元素。 当你说var nav = $('nav'); ，您将这组jQuery对象分配给nav变量，以便以后可以使用它。 到现在为止还挺好。

你没有将字符串传递给$ ，而是技术上可以将jQuery对象传递回$函数，这就是当你说$(nav).hide();时你正在做的事情$(nav).hide(); 。 这样做会让人感觉不到 - 它会返回相同的jQuery对象数组， nav ，你首先放入它！

就个人而言，我喜欢用任何带有$符号的jQuery对象的变量作为前缀，即var $nav = $('nav'); 。 这只是一个允许我一眼就看出这个变量包含jQuery对象（元素）而不是本机DOM元素或整数等的约定。 如果我在代码中看到$（$ myVar），我知道这可能是睡觉的时间......

更新：除了字符串之外，还有其他一些事情可以传递到$()函数。 例如，传入DOM元素（例如说$(document) ）会创建该DOM元素的jQuery对象表示，这可能非常有用。

Answer 5

所有这些答案都是整个答案的一部分。 。 。 让我再添一块。 :)

正如其他人所说， $(...)表示法是一个返回JQuery对象的JQuery函数。 取决于“......”，确定如何完成。

一些例子：

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

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

• 如果你在那里放置DOM节点引用（例如，使用document.getElementsByTagName("div")创建的那个），它将创建一个指向引用中的节点的JQuery对象。

这一点的重点是JQuery与JQuery对象一起工作，因此这些各种函数可以帮助程序员创建它们。

现在，这是我们提出问题的地方。 。 。

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

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

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

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

var $thirdObject = $secondObject;

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

最后，你用这段代码展示了什么：

$(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元素相同的DOM元素。

编辑：

出于好奇，我在jsPerf上设置了一个快速测试， $($foo)方法比Firefox，IE9和Chrome中的.clone()快得多： http ： .clone()

Answer 6

var nav = $('nav');

$(nav).hide();

nav已经是一个jQuery对象，因此$(nav)是无用的。