对简单变量声明 jQuery “$variable” 与 javascript “var” 的混淆

Question

我有这个简单的幽灵文本实现：

HTML 代码：

<div id="searchPanel">
     <form method="get" id="searchBox" action="somePage.php">
     <input class="ghText" type="text" name="query" value="search here"/>
     </form>
</div>

jQuery 代码：

$(document).ready(function(){
        $txtField = "#searchPanel form input.ghText";
        var value = $($txtField).val();
        $($txtField).focus(function(){
            if($(this).val() == value)
                $(this).val("").removeClass("ghText");
        });
        $($txtField).blur(function(){
            if($(this).val()==""){
                $(this).val(value).addClass("ghText");
            }
        });
});

上面的例子是行不通的。 当用户将 cursor 聚焦在搜索栏上时，class “ghText”不会因为某种原因被删除。

但是，现在如果我用“$value”更改“var value”（变量初始化）和“value”，如下所示：

$value = $($txtField).val(); 
$(this).val($value).removeClass("ghText");
$(this).val($value).addClass("ghText");

一切正常。

我可以只是 go 睡觉而不用太担心它..但我很好奇为什么会发生这样的事情？

是因为“this”没有引用正确的 object，还是因为我尝试将 jQuery object 存储在非 jQuery 变量中，或者是其他什么问题？ 我一直认为“var x”和“$x”是一样的..？

Answer 1

您似乎对 JavaScript 变量感到困惑。 没有“jQuery 变量”和“非 jQuery 变量”之类的东西。 一些具体案例：

• 使用var声明的变量与没有声明的变量不同。 “var x”是一个局部变量，因此它不会与其他也有一个名为“x”的变量的函数共享一个值。 这几乎总是一件好事，所以你几乎应该总是用“var”声明变量。
• jQuery 中的 $ 有点特殊。 没那么特别。 只是 jQuery 声明了一个名为“$”的变量，它执行了一些花哨的操作。
• 以“$”开头的变量没有什么特别之处。 换句话说，“$x”只是一个变量名。 它是与“x”不同的变量，它不是“jQuery 变量”。 它只是一个名为“$x”的 JavaScript 变量。 （这与 PHP 不同，其中 $ 实际上是一种特殊的变量语法。）

因此，您可以将其称为“值”而不是“$ 值”。

可能您删除“var”这一事实通过将其变为全局变量而改变了事情。

至于“这个”，是的，这是 JavaScript 的一个棘手方面，可能会导致您的问题。 内部“焦点”和“模糊”函数内部的“this”值可能与外部“this”的值不同。 我不确定事件处理程序中的“this”到底指的是什么，但它与 object 不同。 因此，您可能想要做的是将“this”分配给外部 function 中的变量，然后在内部引用该变量来代替“this”。

Answer 2

在变量中存储 jQuery 选择时，通常的做法是在变量名称前添加$ ，如下所示：

var $banner = $('#banner');

不必包含美元符号 - var banner = $('#banner')也可以。 但是，美元符号提醒您该变量包含 jQuery 选择，而不仅仅是数字或字符串等任何值。

Answer 3

@mgiuca 关于 Javascript 变量是完全正确的——它们前面的“$”只是一个命名约定，大多数用于标识jQuery 对象。 我添加这个是因为你说

因为我尝试将 jQuery object 存储在非 jQuery 变量中

但这是错误的。 $txtField是您用于 select 和 object 的字符串。 如果你想存储 object 本身，你应该这样做$txtField = $(#searchPanel form input.ghText)然后使用它$txtField.val() 。

话虽如此，您的代码对我来说没有改变。 我已经设置了一个可以在 Chrome 上运行的演示- 这是你代码的精简版吗？

Answer 4

所以 $x 毕竟是一个 jQuery 变量:)...好吧，无论如何，这是一个例子，当 $ 或不 $ 确实对我的代码产生很大影响时：

...加载（“whatever.php”，{par1：var1，par2：var2}）

至少在 $(obj).attr() 分配中不起作用，除非使用了 $var1, $var2 。 这有效：

$(obj).attr("onClick",$("#wherever").load("whatever.php", {par1: $var1, par2: $var2})...

Answer 5

除了@mgiuca's answer here之外，还有一个更详细的方法来解决您的问题，它也显示了一些 jQuery 概念：

$(document).ready(function () { 
  // define two helper functions
  var removeDefault = function () {
    if( $(this).val() == $(this).data("defaultValue") ) {
      $(this).val("").removeClass("ghText");
    }
  };
  var setDefault = function () {
    if( $(this).val() == "" ) {
      $(this).val( $(this).data("defaultValue") ).addClass("ghText");
    }
  };
  // the following works on all input elements
  $("#searchPanel form input.ghText").each(function () {
    $(this)
    .data("defaultValue", $(this).val())
    .focus(removeDefault)
    .blur(setDefault);
  });
}); 

笔记

• 使用.data()将值与特定元素相关联。
• 使用.each()将相同的行为应用于任意数量的元素
• 使用 function 引用.focus()和.blur() - jQuery 将始终自行this设置
• 看到它在这里工作http://jsfiddle.net/xsXxn/