📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials jQuery in Practice Document Ready

Document Ready

4 min read Quiz at the end
Wrap your code in $(function(){...}) to ensure the DOM is ready before running. This fires when HTML is parsed but before images finish loading. Without it, selectors may find nothing because elements do not exist yet.

Document Ready

Run code only after the DOM is fully loaded:

// Long form
$(document).ready(function() {
  console.log('DOM ready');
});

// Short form
$(function() {
  console.log('DOM ready');
});

// ES6 arrow
$(() => {
  console.log('DOM ready');
});
Topic Quiz · 5 questions

Test your understanding before moving on

1. What does $(document).ready() do?
💡 $(document).ready() ensures your code runs after the HTML is fully parsed.
2. Which is the short form of $(document).ready(fn)?
💡 $(fn) or $(() => {}) is the shorthand for document ready.
3. Why use document ready?
💡 Without document ready, your script might run before elements are in the DOM.
4. Can you have multiple $(document).ready() calls?
💡 You can have multiple document ready blocks — they all execute.
5. What replaces $(document).ready() in jQuery 3?
💡 In jQuery 3, the preferred shorthand is simply $(fn).