Welcome to the first lesson on jQuery for absolute beginners. We will be covering the basics of jQuery for web development in the coming months to get you up to speed.
This tutorial is intended for newbies who already have a good understanding of HTML and CSS. It would be immensely beneficial for you to at least have a very basic understanding of Javascript. We suggest you do so before committing to these lessons.
One of the reasons we will be focusing on jQuery (apart from it being the most popular Javascript library) is that it’s fast; it provides simple solutions to problems that would otherwise take many many lines of code in pure Javascript. Also, cross-browser compatibility is a major issue with Javascript, because the code you write for one browser might not work in another. This can give you a lot of heartache. jQuery shines in this area. It is used in over 62% of all websites.
[Tweet “jQuery is used in over 62% of all websites.”]A JavaScript library is a collection of prewritten JavaScript functions that provides simple solutions to many of the common details of JavaScript.
First, download jQuery
Head over to www.jquery.com
Click on the download link.
You will be directed to a new page. Here you will see different versions and methods of adding jQuery to your project.
For now we will skip all the details about compressed, uncompressed, CDN and all that and click on the very first link to download jQuery. You can read up the information on the page if you like. But we will come back to that later.
You will be greeted with this alien-looking screen. Have no fear! We aren’t trying to drive you crazy or something.
Ok, you might be thinking, “what do you expect me to do with this gibberish?”. Well, let’s proceed to the next step!
Next steps
To be able to use jQuery, you would need to create a webpage.
First create a folder, call it jQuery Tutorial. Inside it, create an html file, called index.
Create another file and name it jquery.js.
The .js means this file is a Javascript file. It’s the extension name.
Open up the file in Sublime Text (or your preferred text editor). Go back to the webpage, select and copy all. Then paste in your newly created file, jquery.js.
All you have to do is save and you already have jQuery ready for use. As simple as that.
Now we need to edit our index.html file in Sublime Text.
Sublime Text tip: Just type in ‘html’ and hit the Tab key. A standard HTML template will be created for you.
You can add the name “jQuery Tutorial” to the title tag.
Now, we have the jQuery file, but our webpage doesn’t know this. What we need to do is reference it in our html file.
Just below the title tag, add the script tag. For it’s source attribute, add “jquery.js”
Sublime Text tip: Type in script and hit the Tab key. A script tag will be added.
Now let’s quickly test that this is working.
We will just write a simple alert code.
Before the closing body tag type in the following without further explanation:
Open up your index file in a browser and sure enough you will see an alert pop up.
But there isn’t really anything special about this, we could have achieved the same with Javascript.
To test the power of jQuery we will do something more interesting.
Create a div and add some dummy text (eg. lorem ipsum …)
Sublime Text tip: just type ‘lorem’ and hit the Tab key.
Delete the alert code and type in the following;
Save and refresh your page. Did you see what happened?
That was really a very nice thing to achieve in just a single line of code. Imagine how much code you would have written in Javascript.
It’s really that simple.
Stay tuned!
In the next tutorial, we will cover the things we skipped in this tutorial such as compressed and uncompressed, the different versions of jQuery, CDN and the meaning of ‘$(document).ready’ code we wrote.
If you are unable to get our sample code to work, please feel free to leave a comment, I will reply as soon as possible.
