jQuery $(document).ready() is a basic part of using jQuery. The jQuery document ready function executes when the DOM (Document Object Model) is completely loaded in the browser. jQuery document ready is used to initialize jQuery/JavaScript code after the DOM is ready, and is used most times when working with jQuery.
The Javascript/jQuery code inside the $(document).ready() function will load after the DOM is loaded, yet before the page contents load. This is important for “events” to work correctly. Using $(document).ready(), your events can happen before the window loads.
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js '></script>jQuery Document Ready Snippet
$(document).ready(function() {
// Put javascript here
});*jQuery document ready can be used multiple times per document, although it’s not a best practice.
*You must reference external stylesheets before referencing the scripts that depend on the value of CSS style properties.
jQuery Document Ready Shorthand Snippet
$(function(){
// Put javascript here
});4 Other ways to write jQuery Document Ready:
They achieve the same result.
$(document).ready(function() { ... });
$(function() { ... });
jQuery(document).ready(function() { ... });
jQuery(function() { ... });jQuery Document Ready with noConflict – fix “$ is not defined” error
Call $.noConflict() to avoid namespace difficulties ($ shortcut is no longer available). Why? Ever receive the “$ is not defined” error (perhaps when using WordPress)? Basically, replace “$” with “jQuery” when you receive the error, “$ is not defined.”
jQuery.noConflict(); // Reverts '$' variable back to other JavaScript libraries, avoiding namespace difficulties
jQuery(document).ready( function(){
// Put javascript here to when DOM is ready with no conflicts
}); jQuery’s Document Ready vs. Window load
jQuery’s document ready is similar to JavaScript’s “load” function, but it doesn’t trigger until after assets such as images are received.
Why use $(window).load()?
To manipulate pictures use the window load function instead of $(document).ready() because it will wait until the images finish loading. Then you should initialize the jQuery alignment function.
$(window).load(function(){
//initialize after images load
}); jQuery $(document).ready() Key Points
- First download or link to Googles CDN (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js)
- Used to execute JavaScript when the DOM is completely loaded. Put event handlers here.
- Can be used multiple times.
- Replace “$” with “jQuery” when you receive “$ is not defined.”
- NOT used if you want to manipulate images
- Use $(window).load() instead.
jQuery $(document).ready() Example
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
alert('DOM is loaded.'); // This alert happens immediatley when the DOM is ready, but before the next line alters it.(So it wont look instantaneous.)
$("p").text("The DOM is ").append("<span style='color:black;'>now loaded,</span>").append(" thus can be manipulated.");// append is used due to some issues with javascript concatenation and web-kit Chrome/Safari
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<p>
<p>
</body>
</html>
