Question

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

HTML code：

<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”是 local 变量，因此它不会与其他函数共享一个值，这些函数也有一个名为“x”的变量。这几乎总是一件好事，所以你几乎总是用“var”声明变量。
jQuery中的$有点特别。特殊;只是jQuery声明了一个名为“$”的变量，它做了一些奇特的操作。
以“$”开头的变量没什么特别之处。换句话说，“$ x”只是一个变量名。它是“x”的不同变量，它不是“jQuery变量”。它只是一个名为“$ x”的JavaScript变量。（这与PHP不同，其中$实际上是一种特殊的变量语法。）

所以你可以称之为“价值”而不是“$ value”。

可能你删除了“var”的事实通过将它变成一个全局变量来改变它。

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

Answer 2

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

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

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

Answer 3

@mgiuca对Javascript变量是完全正确的 - 在它们之前的'$'只是一个命名约定，大多数用于识别 jQuery对象。我添加这个是因为你说

因为我试过存储jQuery对象在非jQuery变量
中

但这是错误的。 $txtField是用于选择对象的字符串。如果你想存储对象本身，你应该$txtField = $(#searchPanel form input.ghText)然后使用它$txtField.val()。

说过你的代码对我来说没问题。我设置的a demo适用于Chrome - 这是您的代码的缩减版本吗？

Answer 4

此外，@ mgiuca的回答是对你的问题有一个更精细的方法，也显示了一些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()将相同的行为应用于任意数量的元素
.focus()和.blur()的使用函数参考 - jQuery将始终正确设置this
看到它在这里工作http://jsfiddle.net/xsXxn/

Answer 5

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

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

不起作用，至少在$（obj）.attr（）赋值内，除非使用$ var1，$ var2。这很有效：

$（obj）.attr（“onClick”，$（“＃wherever”）。load（“whatever.php”，{par1：$ var1，par2：$ var2}）...

混淆简单变量声明jQuery“$ variable”vs javascript“var”

5 个答案: