Beginner Series: jQuery Tutorial
Every beginner must start with the infamous “hello world” tutorial so that’s exactly what we’re going to do here.
Setup
If you haven’t already, make sure you download the jQuery library from the official site, which is nothing more than a JavaScript (.js) file. Create a blank HTML file, and call it whatever you want. For the purpose of this tutorial, we’re going to call ours “test.html” to keep things simple.
Make sure the HTML and JavaScript files (jQuery library) are in the same directory.
Writing the Code
Next, we’re going to write the code that will be used to print “hello world” on the screen through jQuery.
First, we’re going to write the plain HTML, which will look like the snippet below. Please note that you can modify the displayed message to say whatever you want, so long as you use the right HTML tags.
<html> <head> <title>HTML Hello World</title> Hello World in HTML. </body> </html>
After you have added that content inside the HTML file and saved the document, you should be able to open it in a browser and see the following message, “Hello World in HTML.”
Obviously, this is basic HTML and we have not used any JavaScript (or jQuery) yet.
Next, you will add the following snippet of code into your HTML document along with the close tags, in order to call upon the jQuery library:
<script type="text/javascript">
$(document).ready(function(){
$("#hello").html("jQuery Hello World.");
});
</script>
This is meant to go in the body of your HTML content at the very top.
These are the close tags and they belong at the end of the main content, just before the closing body tag:
<div id="hello"> </div>
So, the final product should look just like this:
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#hello").html("jQuery Hello World");
});
</script>
HTML Hello World.
<div id="hello">
</div>
</body>
</html>
After you have saved your HTML file, you should be able to open it using your browser; you will see two lines of text, one for the HTML code and the other for the jQuery code.
Congratulations! You have just written your first program using HTML, JavaScript, and jQuery!
For the final portion of our tutorial, we’re going to cover 6 JavaScript Best Practices for Beginners.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
