Jquery not loading in head but loading on bottom of body tag

Question

Here is my problem: as title says, jQuery is working only when I put the scripts on the bottom of the body tag. When I put them in head they are not working. I am using just

Answer 1

The way jQuery, or JavaScript for that matter, works is it detects elements or binds events at the time when the script itself is called. As the document is loaded from top to bottom, placing jQuery at the bottom makes sure your DOM is loaded first, before executing JS. On the other hand, you can place jQuery at top, using technique such as this:

$(document).ready(function() {
    console.log('jQuery is now ready to be executed!');

    // Place jQuery code here...
});

This is basically telling jQuery, wait until DOM is loaded, before acting upon it.

Source: http://api.jquery.com/ready/