Masthead

Hero

Web Design, Print & SEO Blogs
Web Design & SEO Blog Collection

Main Content Area

Main Articles

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 
Learn JQuery in 10 Minutes

OK so you want to learn JQuery and learn it fast!

You’re in the right place. This tutorial is designed to teach you the JQuery basics super fast so that after just ten minutes of training, you will be equipped with JQuery basics. First things first, we will just cover a little about JQuery, what it is and how it's used, then we will dive right in!

What is JQuery?

Right let’s start. JQuery works by using events and effect methods. Lets say you want a <p> tag to disappear once clicked. How do you do that without writing loads of JavaScript code and calling constant getElementById() methods?

This is how.

Before you do anything, you must have the JQuery Framework linked in the head of your HTML document. You can download JQuery and link to it or use a CDN which is easier. You can fiind the JQuery CDN here.

This is a full example of what the finished code will look like:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('p').click(function(){
$('p').hide();
});
});
</script>
</head>

That’s it! How easy is that! OK I admit it does look a little confusing so I will break it down and explain.

You have to call JQuery as a function before you can do anything. You will see on each line, we start with $(); This is how you call JQuery.

The basic syntax for JQuery is $(‘selector’).action();

The first line here tells the browser to wait until the document is fully loaded before running any of these functions below. This is good practice to stop JQuery trying to call actions on HTML elements or CSS selectors that don’t exist until the document has fully loaded.

The next line says, “When the <p> element is clicked, run this function”.

The last line says, “Run this depending on whatever the above line is asking”, so in this case, hide <p> if <p> is clicked.

How easy is that! The example provided above can be used for various event triggers and effects including transitions and animations. You name it; you can do it with JQuery. A full list of JQuery events and effects can be found at w3schools. I find the best way to get used to the JQuery syntax is to repeat the above example until it sticks. Once you get used to the syntax, the rest is simple.

Now you give it a try!

Use the example above and try different variations of CSS selectors and elements. Once you get the hang of it you will wish you had learnt it sooner. JQuery intermediate and advanced tutorials will be coming soon!

Have fun!