混淆简单变量声明jQuery“$ variable”vs javascript“var”
我有这个简单的鬼文本实现：
HTML代码：
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”相同..？
您似乎对JavaScript变量感到困惑。 没有“jQuery变量”和“非jQuery变量”之类的东西。 一些具体案例：
- 用var声明的变量与不带变量的变量不同。 “var x”是一个局部变量，因此它不会与其他函数共享一个值，这些函数也有一个名为“x”的变量。 这几乎总是一件好事，所以你几乎总是用“var”声明变量。
- jQuery中的$有点特别。 它并不那么特别; 只是jQuery声明了一个名为“$”的变量，它做了一些奇特的操作。
- 以“$”开头的变量没什么特别之处。 换句话说，“$ x”只是一个变量名。 它是“x”的不同变量，它不是“jQuery变量”。 它只是一个名为“$ x”的JavaScript变量。 （这与PHP不同，其中$实际上是一种特殊的变量语法。）
所以你可以称之为“价值”而不是“$ value”。
可能你删除“var”的事实通过将其变成全局变量而改变了事物。
至于“this”，是的，这是JavaScript的一个棘手的方面，可能会导致你的问题。 内部“焦点”和“模糊”function中“this”的值可能与“this”外部的值不同。 我不确定事件处理程序中“this”指的是什么，但它不会是同一个对象。 所以你可能想要做的是将“this”分配给外部函数中的变量，然后在内部引用该变量来代替“this”。
在变量中存储jQuery选择时，通常的做法是在变量名之前添加$ ，如下所示：
var $banner = $('#banner');
没有必要包括美元符号 – var banner = $('#banner') – 也可以。 但是，美元符号会提醒您该变量包含jQuery选择，而不仅仅是数字或字符串之类的任何旧值。
@mgiuca完全正确的Javascript变量 – 它们之前的’$’只是一个大多数用于识别jQuery对象的命名约定。 我添加这个因为你说
因为我试过在非jQuery变量中存储jQuery对象
但这是错误的。 $txtField是用于选择对象的字符串。 如果你想存储对象本身你应该做$txtField = $(#searchPanel form input.ghText)然后使用它$txtField.val() 。
说你的代码对我来说没问题。 我已经设置了适用于Chrome 的演示 – 这是您的代码的缩减版本吗？
另外，@ 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将始终自行设置它 - 看到它在这里工作http://jsfiddle.net/xsXxn/
所以$ x毕竟是一个jQuery变量:) …好吧，无论如何，这是一个实例，当$或$ $确实在我的代码中产生了很大的不同：
… load（“whatever.php”，{par1：var1，par2：var2}）
不起作用，至少在$（obj）.attr（）赋值内，除非使用$ var1，$ var2。 这工作：
$（obj）.attr（“onClick”，$（“＃wherever”）。load（“whatever.php”，{par1：$ var1，par2：$ var2}）…