CODEWITHSUNDEEP
javascriptjquery
Steve Knabe
Steve Knabe

Reputation: 120

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
}

Upvotes: 0

Views: 160

Answers (2)

Eric Bonin
Eric Bonin

Reputation: 63

jQuery being a library of Javascript functions, a reference to your imported jQuery object that contains all of jQuery's functions exists on the current page you are on. This jQuery object is often referenced to as $ (the dollar symbol). To use any jQuery-related function, you need to use this symbol or the word jQuery.

Using $(document) means you want to use the current document (the whole page you are on, the DOM) and maybe do something with it. The $(document).ready() call means you want to do something right after the document (the DOM) has been completely loaded. This function would be used like this in your Javascript file:

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

You see, in Javascript, you can pass functions as parameters to a function. ready() is a function called on the document object and its parameter is an anonymous function (a function that has no name and that can only be used once, since it doesn't have a name) in which you write the code you want to execute.

This is similar for the first block of code you mentioned:

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

Here, the ajaxStop() function is called on the document object and an anonymous function is passed as a parameter. Inside this anonymous function, there are two functions to be executed: $(this).unbind("ajaxStop") and initialize().

Upvotes: 0

jfriend00
jfriend00

Reputation: 707328

$ 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.

Upvotes: 2

Related Questions