How do I reference jQuery from my HTML/JavaScript application?
Your question is fairly unclear, but essentially, you just have to make sure jQuery is loaded before your code. So for instance:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
or
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
// Your code
</script>
But not
<!-- Not like this -->
<script src="your-code.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Note the order of tags.
These tags do not need to be in the head
, and in fact, putting them there is not best practice. They must be in head
or body
. Best practice barring a specific reason to do something else is to put them at the very end of body
, e.g.:
<!-- site content here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
</body>
</html>
Carlos Miguel Fernando
Network and Computer Systems Engineer Full-Stack Developer Web Designer
Updated on July 21, 2022Comments
-
Carlos Miguel Fernando almost 2 years
I keep getting
Uncaught ReferenceError: $ is not defined
error. I assume everything is ok and working. My JQuery code is inside my Javascript file. I assume that isn't how it works? Should I have a JQuery file?I have this inside the head of my HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
This is my Javascript file:
function typing(id, sentence){ var result = $.Deferred(); var index=0; var intObject= setInterval(function() { document.getElementById(id).innerHTML+=sentence[index]; index++; if(index==sentence.length){ clearInterval(intObject); } }, 100); return result.promise(); } var sleep = function(ms) { var result = $.Deferred(); setTimeout(result.resolve, ms); return result.promise(); }; typing('container','Subject Name:').then(function() { return sleep(500); }).then(function() { return typing('container',' Carlos Miguel Fernando') });
Where did I go wrong?