Andrew Chalkley
writes on October 8, 2012
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.
Contents
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");
Going Deeper
<html>
<body>
<ul>
<li>Apple</li>
<li>Amazon</li>
<li>Google</li>
<li>Microsoft</li>
</ul>
</body>
</html>
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).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.$("li");
$("li").hide();
$("li").hide().parent();
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>");
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();
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");
$("a").click(function(){
/** Code to be executed **/
});
$("li").hide().parent().before("<a href='#'>Show Tech Giants</a>");
$("a").click(function(){
$("li").show();
});
div, span or whatever element you want. You’re just not restricted to links.
Hi Andrew,
I really like the article. Very informative.
Great Explanation! learnt a lot!
Thanks for very clear explanation. Simply loved that!
Awesome! 😀
Should I learn JavaScript first before diving into jQuery?
You don’t have to. But if you want to properly understand how jquery works , it is best to learn JavaScript before jquery.
nice, you are right >< .
Very clear explanation! Thanks!!
Great overview! Thanks!
This is an excellent introduction to jquery! Thanks for such quality information!
how do you select all list items in an unordered list with the class of ‘nav’?
$(ul.nav li);
This was an awesome tutorial thanks!
I just started the video series on Jquery/interactivity and found the blog VERY helpful in breaking everything down for me. Thanks!