How I understand jQuery

The DOM

Wikipedia defines the DOM as a "cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents." In plain speak, the DOM makes it possible through its API to programmatically work with HTML documents. Thus, you can select elements by using XPath or CSS selectors, and manipulate them and their attributes.

Unfortunately, the DOM API available in JavaScript isn't that great, so this is where jQuery comes in. With jQuery you can easily select an element by using a language mostly based on CSS selectors:

$("ul#phrases");

... change its class:

$("ul#phrases").attr("class", "visited");

... or add a new element to it:

$("ul#phrases").append("<li>It's raining cats and dogs.</li>");

Events

Since a web page provides a user interface, it needs to represent and handle the actions taken by the user and it does that through the use of events. Examples of events are when a user presses the Return key or clicks on the mouse's left button or hovers over a button and many others. These events are usually connected to an element in the DOM (a button, a paragraph, a div) and have an action attached to them that is performed when the event is triggered.

Again, using jQuery is easy to add an action (or a handler, using specific terminology) to an event. For example, this shows an alert window when a button is pressed:

$("#alert-button").click(function(event) {
    event.preventDefault();
    alert("You've pressed the Alert button!');
});

There is one important thing to mention about events, namely that they're handled asynchronously. This means that, when an event is triggered, the browser doesn't wait for it to finish before handling other events. Instead, it handles all events in parallel. This introduces two concepts implemented by jQuery as well: callbacks and deferreds.

A callback is the action performed when the event is triggered. In our example above, the callback is the function that calls the alert() function. A deferred is an object that represents the state of an action and it is useful, because you can attach different handlers to the different outcomes of the action. The best example uses jQuery's AJAX functionality:

var deferred = $.get('/phrases');
// attaching a handler if the request succeeds
deferred.done(function() { alert('Request succeeded.'); });
// and one if the request fails
deferred.fail(function() { alert('Request failed.'); });

AJAX

jQuery also makes it easy to work with AJAX and it does this, just like with all the other functionality, in a cross-platform way. I already provided an example above just with GET requests but POST requests are just as simple.

Basically, all the functionality that jQuery provides is related to these 3 concepts. It may not sound much, but it's actually a lot and what's even more important is that all major browsers are supported.

Constructive feedback is highly appreciated.