JQuery Syntax Explaination

Being a Java Programmer, I have recently been looking at JavaScript in order to make a website. I know there are methods such as the following in JavaScript:

function a(){
  //Do something
}

However, I'm not quite sure what the following does:

 $(document).ajaxStop(function() {
  $(this).unbind("ajaxStop"); //prevent running again when other calls finish
  initialize();
});

I'm guessing that $(document) is accessing some sort of variable, but from where? Could someone please enlighten me what exactly $(document) is? In java the typical syntax is Object.MethodName(); This is slightly similar, but I'm not sure what the "$( document )" is.

In another example:

$( document ).ready()

It appears to be an object being invoked by a method, however, I'm not sure where these objects are coming from. Could someone explain how and what this is doing? I'm only familiar with object oriented programming and this type of referenced/method with the $ is confusing. If I can help clarify anything please tell me.

TL;DR

Why is there parenthesis and a dollar sign around:

$( document ).ready()

and not

function a(){
  //Do something
}

Solution

$ is a function that the jQuery add-on library defines that creates jQuery objects. It's just a normal Javascript function, but it is not built into Javascript - it is present only when the jQuery library is loaded first and that library assigns a specific function to that symbol. It's actually an alias/shortcut for a function named jQuery. So, $(document) is the same as jQuery(document).

document is a global variable defined by the browser so available globally in browser Javascript.

While, it may look like special language syntax, $ is just a normal symbol in Javascript that can be defined to be anything that any other symbol can be defined as. In the case of the jQuery library, it is defined to be a function that creates a jQuery object.

$(document) calls the $ function and passes it one argument (the document object) and that function call creates a jQuery object that contains one DOM node (the document element). A jQuery object is a Javascript object that contains both instance data and a bunch of methods. The instance data for a jQuery object is primarily a list of DOM elements. The methods of the object typically carry out operations on the list of DOM elements that it contains.

$(document).ajaxStop(...) creates the above jQuery object and then calls the ajaxStop() method on that object. You can read the jQuery documentation for that method here. The short summary of that method is: Register a handler to be called when all Ajax requests have completed.

You could think of it like this:

var obj = $(document);
obj.ajaxStop(...);

But, if the underlying jQuery object is only needed once, then it can be done in one line like:

$(document).ajaxStop(...);

$( document ).ready(...) calls the .ready() method on a similarly created jQuery object. The doc for that method is here. The short summary of that method is: Specify a function to execute when the DOM is fully loaded.

Why is there parenthesis and a dollar sign around

The $ sign is just a Javascript function. Inside of the jQuery library, there is something like this that defines the $ as a function:

function jQuery(arg) {
    // code to process the arg and return a jQuery object
    return aJqueryObject;
}

// create an alias/shortcut for the jQuery function
var $ = jQuery;

So, $() just calls the $ function which is just another way of calling the jQuery function.