$(document).ready() simply ensures that all DOM elements are loaded before your javascript is loaded.
When it doesn't matter
Without waiting for this event to fire, you may end up manipulating DOM elements or styles that are yet to exist on the page. the DOM ready event also allows you more flexibility to run scripts on different parts of the page. For example:
<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
will run because the map div has been loaded before the script runs. In fact, you can get some pretty good performance improvements by placing your scripts at the bottom of the page.
When it does matter
However, if you are loading your scripts in the <head> element, most of your DOM has not loaded. This example will not work:
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>
will not, since the map div has not been loaded.
A safe solution
You can avoid this by simply wait until the entire DOM has loaded:
<script type="text/javascript">$(document).ready(function () {
document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>
There are plenty of articles that explain this, as well as the jQuery documentation itself.
