Question

Ive been starting to do javascript and jQuery recently and one thing I constantly find myself wondering is when to use “$” I know that indicates jQuery but it just doesn’t always seem to be that way. I’ll give some examples:

These are two scripts I’ve written:

First:

$(function() {
    var newHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;">Login</span>';
    var oldHTML = '<span style="font-size: 32px; line-height: 18px;">+</span><span style="font-size: 14px; float: left;">Add to watchlist</span>';

    // on mouse over
    $("a.bid-addwatchlist").hover(
    function () {
        (this).innerHTML = newHTML;
    },
    // on mouse out
    function () {
        (this).innerHTML = oldHTML;
    });
});

Second:

(function(){
    $("#container a").click(function(){
        if ($(this).html() == "Stop Listening")
        {
            $(this).html("Listen");
        }
        else if ($(this).html() == "Listen")
        {
            $(this).html("Stop Listening");
        }
    });
});

Why is it that in the first script it wouldn’t work if I had a $ before “this” but the second script needed it?

Note: I did already look here: When to use $ and when not to

But that answer was not nearly comprehensive enough.

Answer 1

$(function(){
  // ...
});

is equivalent to:

$(document).ready(function () {
  // ...
});

This is because jQuery itself will execute the function on the ready event.

On the other hand the below creates an anonymous function that isn’t executed:

(function(){
  // ...
});

What you’d need instead is:

(function(){
  // ...
})();

and that would execute the function immediately.

The first script doesn’t actually need the $(this) unless you want to use jQuery functions as the second function one does.
Although it is good to note that the second function isn’t executed as stated above unless you have other code that isn’t shown here.