Confusion over a simple jQuery variable declaration "$ variable" vs javascript "var"

Question

I have this simple implementation of ghost text:

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 Code:

 $(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"); } }); }); 

The above example will not work. When the user focuses the cursor on the search bar, the "ghText" class is not deleted for some reason.

However, now, if I changed the value of "var" (variable initialization) and "value" with "$ value", as in:

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

everything works perfectly.

I can just fall asleep and not worry too much about it ... but I'm very curious why something like this could happen?

is it because "this" does not refer to the right object, or is it because I tried to save the jQuery object in a variable other than jQuery, or is it about something else. Can anyone point me to what was wrong? I always thought that "var x" matches "$ x" ..?

Answer 1

You seem confused by JavaScript variables. There is no such thing as "jQuery variables" and "variables without jQuery." Some specific cases:

• A variable declared with var is different from a variable without it. "var x" is a local variable, so it will not use the value with other functions that also have a variable called "x". This is almost always good, so you should almost always declare variables with "var".
• $ in jQuery is kind of special. This is not so important; it's just that jQuery declared a variable called "$" that does some fancy operations.
• There is nothing special about variables starting with "$". In other words, $ x is just the name of the variable. This is an "x" variable, and it is not a "jQuery variable". This is just a JavaScript variable called "$ x". (This is different from PHP, where $ is actually the special syntax of the variable.)

Thus, you can simply name this "value" instead of "$ value".

Perhaps the fact that you deleted "var" changed the situation by turning it into a global variable.

Regarding "this," yes, this is a complex aspect of JavaScript and may cause your problem. The value of "this" inside the internal functions "focus" and "blur" is likely to differ from the value of "this" on the outside. I'm not sure exactly what this refers to an event handler, but it will not be the same object. So, what you probably want to do is assign the variable "this" to the variable in the external function, and then refer to this variable internally instead of "this".

Answer 2

When storing a jQuery selection in a variable, its normal practice is to add $ before the variable name as follows:

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

It is not necessary to include a dollar sign - var banner = $('#banner') - will work just as well. However, the dollar sign reminds you that the variable contains a jQuery selection, and not just any old value, such as a number or a string.

Answer 3

@mgiuca is completely right about Javascript variables - the preceding "$" is just the naming convention most commonly used to identify jQuery objects. I add this because you say

because i tried to save jQuery object in non-jQuery variable

But it's not right. $txtField is the string you use to select an object. If you want to save the object itself, you must do $txtField = $(#searchPanel form input.ghText) and then use it this way $txtField.val() .

Having said that your code works fine for me unchanged. I set up a demo that works in Chrome - is this a cut-off version of your code?

Answer 4

In addition to @mgiuca, the answer here is a slightly more thoughtful approach to your problem, which also shows some of 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); }); }); 

Note

• using .data() to bind a value to a specific element.
• using .each() to apply the same behavior to any number of elements
• usage function references for .focus() and .blur() - jQuery will always install this its own
• See how it works here http://jsfiddle.net/xsXxn/

Answer 5

So, $ x is the jQuery variable in the end :)) Well, anyway, here is one instance when $ or not $ made a big difference in my code:

... load ("whatever.php", {par1: var1, par2: var2})

didn't work, at least not inside the destination $ (obj) .attr () unless the variable $ var1, $ var2 was used. This worked:

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