Chapter 3. jQuery Basics
Prev Part II. jQuery: Basic Concepts Next

Chapter 3. jQuery Basics

Table of Contents

$(document).ready()
Selecting Elements
Working with Selections
CSS, Styling, & Dimensions
Attributes
Traversing
Manipulating Elements
Exercises

$(document).ready()

You cannot safely manipulate a page until the document is “ready.” jQuery detects this state of readiness for you; code included inside $(document).ready() will only run once the page is ready for JavaScript code to execute.

Example 3.1. A $(document).ready() block

$(document).ready(function() {
    console.log('ready!');
});

There is a shorthand for $(document).ready() that you will sometimes see; however, I recommend against using it if you are writing code that people who aren't experienced with jQuery may see.

Example 3.2. Shorthand for $(document).ready()

$(function() {
    console.log('ready!');
});

You can also pass a named function to $(document).ready() instead of passing an anonymous function.

Example 3.3. Passing a named function instead of an anonymous function

function readyFn() {
    // code to run when the document is ready
}


$(document).ready(readyFn);


Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.


Prev Up Next
Part II. jQuery: Basic Concepts Home Selecting Elements