jquery - Is $(document).ready necessary?

Question

Hello all,

I am reading an online tutorial that says if the <script></script> is right on top of </body> the $(document).ready is not necessary b/c the document has been loaded at that moment.

Q1> Is that true?

Q2>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;
<script src="jquery.viewport.min.js"></script>

<script>
$(window).scroll(function() { // this line will track all mouse scroll event

});
</script>

What does the $(window) mean? Is this a jquery selector? If it is, then the previous claim looks correct because we don't have to include this inside

$(document).ready(function() {

});

Q3> why we use $link here? why we choose to use $link rather than var link?

<script>
$(window).scroll(function() {
  $link = $('nav a[hash=#first]');
  $link.addClass('selected');
});
</script>

Thank you

Answer 1

That's not correct. It would be correct if it was AFTER the body. You can take a look at this for more info and methods http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/

Answer 2

Q1. Yes and no. Perhaps jQuery will still do a few things after the has been reached, but if you are just trying to find a element that was loaded previously in the body it will work.

Q2. It creates a jQuery Object pointing to the window. It is not a jQuery Selector, neither is $(document) or $(document.body) - in these you are passing a node to jQuery and not a Selector.

Q3. It caches it. By performing $link = $('nav a[hash=#first]'); we cache/assign the result to $link, as if we did $('nav a[hash=#first]') twice, then jQuery would have to find that result twice - this could become/will become quite intensive if all your calls are not cached. You should also be using var $link = $('nav a[hash=#first]');, to ensure that $link is not defined globally - as that is bad (due to variable conflicts).

As a general practice; anything which uses DOM elements should be after document ready (to ensure they have loaded and jQuery is ready to use them), anything that doesn't shouldn't (as there is no need for the wait).

Answer 3

Q1 Sort of true. The details are in the api doc:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. ... When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

Inserting code right before (or after) the closing body tag and not using .ready() typically works fine because by the time the browser's parser reaches the end of the body, the dom is complete enough that you can start to work with selectors, etc.

Q2 "window" is an object exposed by the browser; it is part of the DOM, but there is no need to reference it in a .ready(function() {}) style because HTML that is loading will not change that object in any way to affect its .scroll event.