title: Uncaught ReferenceError: $ is not defined when jquery.js is at end of document
body: <p>I have a project where all the JS files are referenced in the footer, as is recommended for speed of page loading, including the link to the Jquery file. This code produces an "Uncaught ReferenceError", I assume because Jquery has not been defined before my script is called:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;
              &lt;a href="#" data-toggle="popover" title="first popover" id="example"&gt;hover over me&lt;/a&gt;
          &lt;/p&gt;
          &lt;script type="text/javascript"&gt; 
              $(function(){
                  $('#example').popover({ trigger:'hover' });
              })
          &lt;/script&gt;
  
          &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I move the Jquery link to the header, then the code runs fine, but this will slow the page loading time. </p>
  
  <p>Is there a better way to declare my function so that it does not throw this UncaughtReference error, or is keeping the Jquery link in the head the best solution?</p>