Short jQuery question!

donboe · April 8, 2020, 9:05am

@Paul_Wilkins gave me a code this week starting with:

$(document).ready(function domReady() {

Sometimes I see code starting with just:

$(function () {

Can someone explain to me what the difference is? Excuse me for my ignorance but my js/jquery skills ar e not that good.

Thank you in advance

James_Hibbard · April 8, 2020, 9:14am

Hi Donboe, one is just a shortcut for the other. That is to say they are equivalent.

github.com

jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/core/init.js#L104


      
          				return this.constructor( context ).find( selector );
          			}
          
          		// HANDLE: $(DOMElement)
          		} else if ( selector.nodeType ) {
          			this[ 0 ] = selector;
          			this.length = 1;
          			return this;
          
          		// HANDLE: $(function)
          		// Shortcut for document ready
          		} else if ( typeof selector === "function" ) {
          			return root.ready !== undefined ?
          				root.ready( selector ) :
          
          				// Execute immediately if ready is not present
          				selector( jQuery );
          		}
          
          		return jQuery.makeArray( selector, this );
          	};

Personally, I prefer the the second, $(function() {});. Or better still, put your JavaScript before the closing body tag and do away with the check altogether.

Paul_Wilkins · April 8, 2020, 9:16am

The jQuery code waits for the DOM to be loaded before running the function.

With vanilla JavaScript we achieve the same thing by placing our scripts at the end of the body, just before the </body> tag.

That is also jQuery code that does the same thing. It’s a shortcut for the first code.

The following page shows several different ways that jQuery lets do the same thing, of waiting for the document to be ready before running the JavaScript.

donboe · April 8, 2020, 9:23am

@James_Hibbard and @Paul_Wilkins. Thank you both for the clear explanation. Very helpfull

system · July 8, 2020, 4:23pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.