title: Basic jQuery function wont work with external js file
body: <p>I have been trying to get jQuery to work, and cant figure out what I am doing wrong. When I paste the code into the HTML doc between script tags, it runs fine, but when I try to use a separate script file, it doesn't work. I have a local copy of the jQuery file, and I have tried using a CDN as well.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script src="script/main.js"&gt;&lt;/script&gt;
      &lt;script src="script/jquery.js"&gt;&lt;/script&gt;
  
      &lt;link href="css/style.css" rel="stylesheet" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Heading 1&lt;/h1&gt;
          &lt;h2&gt;Heading 2&lt;/h2&gt;
  
          &lt;p&gt;This is a paragraph.&lt;/p&gt;
          &lt;p&gt;This is another paragraph.&lt;/p&gt;
  
          &lt;div&gt;This is some important text!&lt;/div&gt;&lt;br&gt;
  
          &lt;button&gt;Add classes to elements&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .important {
      font-weight: bold;
      font-size: xx-large;
  }
  
  .blue {
      color: blue;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function () {
  
      $("button").click(function () {
          $("h1, h2, p").addClass("blue");
          $("div").addClass("important");
      });
  });
  </code></pre>