But wait... if you are defining the functions at the top of the page doesn't it get called before the elements are loaded?

$(document).ready( function... )

This will call a function when the document is finished loading. It is used ALL the time, especially since your javascript will often load before your HTML. So, if you want to perform a function on all the links, for example, you will need to wait until all the links are loaded!

Real Life Example™ I use this for almost every page that loads any jQuery/Javascript, so picking a single concrete example is a challenge. On BetterLesson - there are modal boxes that show up when you click certain links. Those links all have the class "jqmodal". When the document is loaded, the links are programmed to open a modal box, rather than going to a new page. That way I can include a js file, that will get cached.

This is similar to the onLoad property in the Body tag.

Note: if an element doesn't exist, it is OK select and then try calls on them. This is hugely helpful if you have a js file that is included on a lot of pages that have different elements.