title: jQuery "$ is not a function" error
body: <p>I swear I have included jquery in the page header, it is right there!</p>
  
  <p>Nonetheless the following code, which I've included near the bottom of the page (and inline for now) gives me an error saying "TypeError: $ is not a function."</p>
  
  <pre><code>&lt;script&gt;
          function displayResult(longA, latA, longB, latB, units) {
              $("#distance").html(calcDist(longA, latA, longB, latB, units));
              if (units=="m") {
                  $("#unitLabel").html("miles");
                  $("units").prop("selectedIndex",0);
              } else {
                  $("#unitLabel").html("kilometers");
                  $("#units").prop("selectedIndex",1);
              }
              $("#longA").val(longA);
              $("#latA").val(latA);
              $("#longB").val(longB);
              $("#latB").val(latB);
          }
  
          $("#calculateButton").click(function() { //This is the line it's complaining about
              var longA=$("#longA").val();
              var latA=$("#latA").val();
              var longB=$("#longB").val();
              var latB=$("#latB").val();
              var units=$("#units").val();
              displayResult(longA, latA, longB, latB, units);
          })(jQuery);
      &lt;/script&gt;
  </code></pre>
  
  <p>Higher up in the page header I've got the following:</p>
  
  <pre><code>&lt;script src="jquery.js" &gt;&lt;/script&gt;
  &lt;script src="calcDistSinglePage.js" &gt;&lt;/script&gt;
  </code></pre>
  
  <p>I'm not using Wordpress or anything, this is a very straightforward hand-coded HTML page.</p>