javascript - 混淆简单变量声明 jQuery "$variable"vs 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");
            }
        });
});

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

但是现在如果我更改“var value”(变量初始化)和“value” "$value"如:

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

一切正常。

我可以去 sleep ，不用太担心..但我很好奇为什么会发生这样的事情？

是因为“this”没有引用正确的对象，还是因为我尝试将 jQuery 对象存储在非 jQuery 变量中，或者是关于其他的东西……有人能指出我哪里出了问题吗？我一直认为“var x”和“$x”是一样的..?

Answer 1

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

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

所以你可以称它为“value”而不是“$value”。

可能是您删除了“var”这一事实改变了一切，将其变成了一个全局变量。

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