Beginner’s Guide to jQuery

jquery

jQuery’s core functionality has a whole host of cool things to explore. jQuery allows you to manipulate HTML elements, transverse around the document, add event listeners (e.g. when you click on an element), perform AJAX requests and effects.

If you don’t know what jQuery is or if some of these terms don’t mean anything to you, don’t worry, we’ll be covering some of these concepts down below.

The Basics

JavaScript is used to add interactivity to the front end of a website. A term often used to describe this type of interactivity on a website is behaviour.

JavaScript works slightly differently in each browser, so people turn to jQuery, a JavaScript framework, to smooth out some of those inconsistencies.

A framework can save us time since the code we’d want to use in many of our projects has already been written in the framework and is often written by a developer or developers with years of experience.

To include jQuery in your project visit jQuery.com and click the big download button. Right click and save it to where your HTML is, most people keep their JavaScript files in a separate folder from their HTML.

It’s best practice to include your JavaScript files at the bottom of your HTML document, just before the closing body tag. If you downloaded jQuery to a folder named js with the name jquery.js and your HTML files were in the same directory as the js folder you’d include it in the following way.

<body><script src="js/jquery.js"></script>
</body>

You’ll want to create an app.js as this is where we’re going to put our jQuery code.

<body><script src="js/jquery.js"></script>
<script src="js/app.js"></script>
</body>

The jQuery Function

Now that you’ve included jQuery in your project you need to know how to select HTML elements with jQuery. jQuery is a function that can be passed a series of arguments, the most common is a string containing a CSS selector. You use these selectors in order to select HTML elements to apply behaviour. If you wanted to select all paragraphs on a page you would write the following in a new script tag or in our case app.js:

jQuery("p");

Since p is the CSS selector for selecting all the paragraphs I passed in the string of "p" to the jQuery method. If I wanted to select all elements with the class error I would write the following:

jQuery(".error");

Whilst you can use the jQuery method in full every time you want to select HTML elements, there is a more common short hand way to call the jQuery method, and that’s $. Our two previous examples can be written as $("p") and $(".error"). Throughout the rest of the post we’ll be using the short hand, $.

The Principle of Least Surprise

Now that you know how to select elements it’s time to add behaviour to them. jQuery has a simple interface to apply behaviour. Simply add the method that applies the desired behaviour to the end of the selected elements. If we wanted to hide a paragraph with the class error we call the hide() method.

<p class="error">This is initially hidden.</p>
<p>This is not hidden</p>
$("p.error").hide();

It’s that simple. jQuery is designed with the principle of least surprise in mind. You want to show a hidden element? Call show(). Want to vary it’s speed? Pass in a number of milliseconds on how fast you want the animation to take or pass in the string of "fast" or "slow".

So if you want to show the error message slowly after initially hiding it you could do the following.

<p class="error">This is initially hidden, then slowly revealed.</p>
<p>This is not hidden</p>
$("p.error").hide();
$("p.error").show("slow");

And there you have it, you’ve done you’re first jQuery effects.

Chaining it All Together

jQuery lets you keep your code DRY. DRY is an acronym for don’t repeat yourself. jQuery allows you to chain methods together so that the above example can be written as:

$("p.error").hide().show("slow");
While lines can get lengthy it’s often a way to reduce lines of code and do more.

Going Deeper

You’ve seen how easy it is to do effects, let’s show you how to do some simple DOM transversal. DOM stands for Document Object Model. This is how a browser represents HTML in memory like a tree.
<html>
	<body>
		<ul>
			<li>Apple</li>
			<li>Amazon</li>
			<li>Google</li>
			<li>Microsoft</li>
		</ul>
	</body>
</html>
The html would be the parent of the body, body would be the parent of the unordered list (ul) and the unordered list would be the parent of all the list items (li).
You can access an elements parent in jQuery by using the parent() method. Say we want to hide each list item and before the unordered list we wanted to add a link with the text Show Tech Giants.
First we want to select the list items.
$("li");
Then hide them.
$("li").hide();
Then select the parent DOM element, which will be the unordered list.
$("li").hide().parent();
Be careful when chaining with jQuery transversal methods such as parent(), prev() and next() as they all return a new element rather than the initial element. We can then use the before() method which inserts a given string in to the DOM before the newly selected element, the parent, or the unordered list.
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");
So you’ve done effects to hide, transversal to select a parent element and manipulation to add new HTML on-the-fly. Now we’re going to use jQuery’s event method click() to listen for click events on the link we’ve just included.
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");
$("a").click();
The click method takes one argument which is a function. This is the code you want executing when you click.
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");
$("a").click(function(){
	/** Code to be executed **/
});
We’re going to show the list items when the link is clicked.
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");
$("a").click(function(){
	$("li").show();
});
The click listener can be bound to other HTML elements such as a div, span or whatever element you want. You’re just not restricted to links.

Conclusion

In conclusion you’ve seen how easy it is to do effects, DOM transversal, events and manipulation in jQuery. Why not head over to the jQuery Documentation website to see what other cool things you can do in your next project!

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Andrew Chalkley

I'm an alien, I'm a legal alien, I'm an Englishman in Portland. All of my professional life I've worked with computers online. I'm a polyglot programmer and like using the right tools for the job. In my spare time I enjoy spending time with my young family and when I get chance, sticking opponents in Halo 4. You can find me in most places @chalkers.

Comments

4 comments on “Beginner’s Guide to jQuery

  1. I just started the video series on Jquery/interactivity and found the blog VERY helpful in breaking everything down for me. Thanks!

  2. how do you select all list items in an unordered list with the class of ‘nav’?