混淆简单变量声明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");

一切都很完美.

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

是因为"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".

可能你删除了"var"的事实通过将其变成全局变量而改变了事物.

至于"this",是的,这是JavaScript的一个棘手的方面,可能会导致你的问题.内部"焦点"和"模糊"功能中"this"的值可能与"this"外部的值不同.我不确定事件处理程序中"this"指的是什么,但它不会是同一个对象.所以你可能想做的是将"this"分配给外部函数中的变量,然后在内部引用该变量来代替"this".

Answer 2

在变量中存储jQuery选择时,通常的做法是$在变量名之前添加a ,如下所示:

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

没有必要包括美元符号 - var banner = $(‘#banner’)- 也可以.但是,美元符号会提醒您该变量包含jQuery选择,而不仅仅是数字或字符串之类的旧值.