The $
in the variable name is only part of the name, but the convention is to use it to start variable names when the variable represents a jQuery object.
var $myHeaderDiv = $('#header');
var myHeaderDiv = document.getElementById('header');
Now later in your code, you know the $myHeaderDiv
is already a jQuery object, so you can call jQuery functions:
$myHeaderDiv.fade();
To get from the DOM-variable to the jQuery variable:
var $myHeaderDiv = jQuery(myHeaderDiv); //assign to another variable
jQuery(myHeaderDiv).fade(); //use directly
//or, as the $ is aliased to the jQuery object if you don't specify otherwise:
var $myHeaderDiv = jQuery(myHeaderDiv); //assign
$(myHeaderDiv).fade(); //use
To get from the jQuery variable to the DOM-variable.
var myHeaderDiv = $myHeaderDiv.get(0);