These are the different types of Document Ready functions typically used in jQuery (aka jQuery DOM Ready). A lot of developers seem to use them without really knowing why. So I will try to explain why you might choose one version over another. Think of the document ready function as a self-executing function which fires after the page elements have loaded.

See Where to Declare Your jQuery Functions for more information on how to use the Document Ready Functions.

Document Ready Example 1

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

Document Ready Example 2

$(function(){ 
	//jQuery code here 
});

This is equivalent to example 1… they literally mean the same thing.

Document Ready Example 3

jQuery(document).ready(function($) {
	//do jQuery stuff when DOM is ready
});

Adding the jQuery can help prevent conflicts with other JS frameworks.

Why do conflicts happen?
Conflicts typically happen because many JavaScript Libraries/Frameworks use the same shortcut
name which is the dollar symbol $. Then if they have the same named functions the browser gets
confused!

How do we prevent conflicts?
Well, to prevent conflicts i recommend aliasing the jQuery namespace (ie by using example 3 above).
Then when you call $.noConflict() to avoid namespace difficulties (as the $ shortcut is no longer available)
we are forcing it to wrtie jQuery each time it is required.

jQuery.noConflict(); // Reverts '$' variable back to other JS libraries
jQuery(document).ready( function(){ 
         //do jQuery stuff when DOM is ready with no conflicts
   });  

//or the self executing function way
 jQuery.noConflict();
 (function($) { 
    // code using $ as alias to jQuery
})(jQuery);

Document Ready Example 4

(function($) { 
	// code using $ as alias to jQuery
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

This way you can embed a function inside a function that both use the $ as a jQuery alias.

Document Ready Example 5

$(window).load(function(){  
		//initialize after images are loaded  
   });

Sometimes you want to manipulate pictures and with $(document).ready() you won’t be able to do that
if the visitor doesn’t have the image already loaded. In which case you need to initialize the
jQuery alignment function when the image finishes loading.

You could also use plain JavaScript and append a function call the the body tag in the html, use this only if your not using a JS framework.

Read more: http://api.jquery.com/ready/

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Avi

    good one man
    thanks

  • Slmdawod

    I can’t waiting to read this greate post to tell you that your blog is very amazing and your method in explaining informations and ideas is very simple and obvious i’ll subscribr in your RSS
    thanks

  • Slmdawod

    I can’t waiting to read this greate post to tell you that your blog is very amazing and your method in explaining informations and ideas is very simple and obvious i’ll subscribr in your RSS
    thanks

    • http://jquery4u.com/ jQuery4u

      @78ac0b8d4535b57edeb048296ede9f20:disqus @bdf088d075cba827a6df465a8e26440d:disqus 
      Thanks guys, very much appreciated!
      Sam

  • Pingback: Useful jQuery Function Demos For Your Projects | Layout to HTML()

  • Pingback: Useful jQuery Function Demos For Your Projects()

  • Grammar Polizei

    spellcheck

  • kaurismaki

    No. 6
    jQuery(function ($) {
    //jQuery code here
    });

  • Jason

    Thanks, example 5 sorted out my nightmare

  • http://www.facebook.com/hament754 Shekhar Bisth

    So nice..

  • http://www.fromdev.com/ Java Developer

    Awesome, did not know about the no conflict function, thanks for sharing.

  • Pingback: 50 jQuery Function Demos for Aspiring Web Developers - Smashing Coding()

  • Amod

    Extremely helpful, thanks mate

  • Pingback: Useful jQuery Function Demos For Your Projects - Internet Business()

  • StevieTheScotsman

    Great Explanation.
    Thanks for taking the trouble to write this post
    Cheers
    Steve

  • Dinky

    very helpful, thanks mate!

  • http://josephfus.co/ Joseph Fusco

    Very informative. Thanks!

  • http://www.frenchtouchseduction.com/ FK

    Thanks a lot, very clear and helpful !

  • Tajmul Ansari

    jQuery(function ($) {
    //jQuery code here
    });

  • http://samdeering.com Sam Deering

    Thanks for love guys, much appreciated!

  • Abhishek Pandey

    hey i want some help over the ready(), because it is not executing
    this s the code that i have written but its not workng
    $(document).ready(function() {
    $(‘#enableForm’)
    .formValidation({
    framework: ‘bootstrap’,
    icon: {
    valid: ‘glyphicon glyphicon-ok’,
    invalid: ‘glyphicon glyphicon-remove’,
    validating: ‘glyphicon glyphicon-refresh’
    },
    fields: {
    first_name: {
    validators: {
    notEmpty: {
    message: ‘The first name is required and cannot be empty’
    }
    }
    },
    last_name: {
    enabled: false,
    validators: {
    notEmpty: {
    message: ‘The last name is required and cannot be empty’
    }
    }
    },
    email: {
    enabled: false,
    validators: {
    notEmpty: {
    message: ‘The email is required and cannot be empty’
    }
    }
    },
    phone: {
    enabled: false,
    validators: {
    notEmpty: {
    message: ‘The phone no. is required and cannot be empty’
    }
    }
    },

    about: {
    enabled: false,
    validators: {
    notEmpty: {
    message: ‘The please enter the massage in not mor than 500 words is required and cannot be empty’
    },

    }
    }

    });
    })

  • Abhishek Pandey

    i’m using it as validation for a form
    this is the code

    First Name (*)

    Last Name

    Enter Email

    Phone

    About

    Validate

    plz help me as sooon its urgent

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.