Mastering JavaScript

Chapter 8
You can't use jQuery before the page is completely loaded. As jQuery will need to
know all the nodes of the DOM structure, the entire DOM has to be in-memory.
To ensure that the page is completely loaded and in a state where it's ready to be
manipulated, we can use the $(document).ready() function. Here, the IIFE is
executed only after the entire documented is ready:
$(document).ready(function() {
$('#greeting').html('Hello World Martian');
});
This snippet shows you how we can associate a function to jQuery's .ready()
function. This function will be executed once the document is ready. We are using
$(document) to create a jQuery object from our page's document. We are calling the
.ready() function on the jQuery object and passing it the function that we want to
execute.
This is a very common thing to do when using jQuery—so much so that it has its
own shortcut. You can replace the entire ready() call with a short $() call:
$(function() {
$('#greeting').html('Hello World Martian');
});
The most important function in jQuery is $(). This function typically accepts a
CSS selector as its sole parameter and returns a new jQuery object pointing to the
corresponding elements on the page. The three primary selectors are the tag name,
ID, and class. They can be used either on their own or in combination with others.
The following simple examples illustrate how these three selectors appear in code:
Selector CSS Selector jQuery Selector Output from the selector
Tag p{} $('p') This selects all the p tags
from the document.
Id #div_1 $('#div_1') This selects single elements
that have a div_1 ID. The
symbol used to identify the
ID is #.
Class .bold_fonts $('.bold_fonts') This selects all the elements
in the document that have
the CSS class bold_fonts.
The symbol used to identify
the class match is ".".
[ 187 ]
www.it-ebooks.info