First steps in jQuery

The structure of jQuery is based on the factory function $(). This function creates our working basis. The factory function contains an argument which it operates with. The factory function equips the selected object with new abilities - this process is called Wrapping. The newly generated object is referred to as a JQuery-object.


JQuery objects infographic


Once a new jQuery object is generated, new methods and properties can be assigned to it. One of these methods is .ready(). This method is especially used when the jQuery-object is formed from a document-object (yes, this is a special case).


jQuery objects/methods infographic


Code Example

First of all we ask whether the document is loaded:

 

$(document).ready();


Now we add an anonymous function:

 

$(document).ready(function(){

});


This function says that a new jQuery-object is formed from all paragraphs in the document.

 

$(document).ready(function(){
$("p")
});


Now we can add a method. In the following example we add the class red to all paragraphs.

 

$(document).ready(function(){
$("p").addClass("red");
});


Even if this looks a bit complicated it's easier than you think. Just continue reading. We'll explain everything.

Which values can $() have?

jQuery supports CSS selectors from CSS 1.0 to CSS 3.0. There are also special jQuery/JavaScript values like document. We'll begin with CSS selectors and document.

More details on .ready()

Ready is a basic method in the event-module of jQuery: a function which is passed to .ready is executed once the document is loaded.

Why do we need .ready()

If we executed $("p").addClass("test"); immediately we wouldn't get any results, because at the moment there wouldn't be a document (It's not loaded yet).



Continue to part 3





Comment