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

时间:2013-11-05 19:52:55

标签: javascript jquery variables var

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

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

var nav = $('nav');

nav.hide();

我看到人们使用变种的一种非常常见的方式,

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   object并将其转换为jQuery选择器。 jQuery仅用于函数   在jQuery选择器上工作,所以你不能简单地做element.hide()。

6 个答案:

答案 0 :(得分:9)

$()创建一个新的jQuery对象。如果将jQuery对象保存到变量中,从它创建另一个jQuery对象是没有意义的,尽管它仍然有效。您经常会看到人们将先前在$()中创建为jQuery对象的变量包装为纯粹由于不良实践而忘记它已经是对象......或者不了解它们刚刚创建的对象

也许你可能已经看过

var $nav = $('nav');

$nav.hide();

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

答案 1 :(得分:4)

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

答案 2 :(得分: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选择器。我会避免它,只是因为它增加了混乱,但它就在那里,所以我只是想提一下。

答案 3 :(得分:2)

var用于创建任何类型的变量。可以是var diceRoll = 4var 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元素(例如说$(document))会创建该DOM元素的jQuery对象表示,这可能非常有用。

答案 4 :(得分:2)

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

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

一些例子:

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

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

    < / LI>
  • 如果你在那里放置一个DOM节点引用(例如,使用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元素相同的DOM元素。

编辑:

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

答案 5 :(得分:1)

var nav = $('nav');

$(nav).hide();

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