The Very Basics of jQuery, for Beginners Like Myself Used to Be
I’ve been building websites using HTML, CSS and PHP for some time. For whatever reason, Javascript never played a large roll in my sites, primarily because I create simple websites that get the job done rather than relying on bells and whistles to clog up the message.
But alas, the web is a changing place and as the average user becomes more familiar with new standards in development (largely thanks to Facebook, OMG!), Javascript comes into play more and more. jQuery is even better than Javascript, as it provides a host of simplified functions packaged up neatly into a box that can be reused over and over again. Benefits such as requesting cached versions of jQuery, a plethora of tutorials around the web to make our designering & developerization easier, etc. are all reasons to use jQuery.
But you may find that the very basic ideas behind implementing jQuery aren’t always readily available. As is true with all too many tutorials written by developers, the minutia is lost as we often assume people will know the simplest little bits.
Firstly, if you want to use jQuery, you need to call it on your page. By far the best way to do this is to call it from Google’s CDN, which is a fancy way of saying “tell your user’s browser to use the version of jQuery they probably already have cached on their local machine”. To do this, add the following line of code in the head section of your HTML file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>Bam, jQuery is now enabled on your page.
Of course, next we need to actually do something with it as at this point it’s simply loaded. A valuable point here is that we don’t need to load jQuery if we’re not going to use it on a page. So it’s not necessarily a great idea to just load jQuery by default if we have no use for it on a particular page. Conditional tags in WordPress are a great way to handle this, but if you’re not using WP you can find other ways to include and exclude jQuery on a page-by-page basis.
Next up, we’ll get started with what’s called the wrapper. If you’re not using WordPress, this looks something like:
<script>
$(document).ready(function(){
your functions will go here.
});
</script>If you are using WP though, jQuery is loaded in “no conflict mode”, which essentially means it’s loaded in a way meant to minimize issues with other Javascript libraries (like Prototype and Mootools) and essentially expands the $ with the word jQuery. Since most tutorials around the web aren’t written with no conflict in mind, you’ll want your WordPress-powered website to use the following wrapper.
<script>
jQuery(document).ready(function($) {
your functions will go here.
});
</script>This does, however, eliminate support for the $ shortcut working with other libraries, but I’m of the mindset that you should really only use one Javascript library per page to minimize everything from HTTP requests to page size.
But what can I, a beginner, use jQuery for today?
Adding classes to elements and hiding elements is the primary reason I use jQuery at all. If the user clicks a title in a FAQ, for example, we can show the contents of the question without loading a new page. We can create tabbed sections of pages, hiding and showing content as appropriate. Let’s walk through both examples.
Say we have a FAQ, our HTML looking something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FAQ</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
<h1>FAQ</h1>
<h2 id="question1"><a class="question" href="#question1">What is an ollie?</a></h2>
<p class="answer" id="answer1">An ollie is a skateboarding trick where the skater effectively "jumps" the board without use of a ramp or other propelling plane or drop, instead using a combination of foot movements and jumping to achieve height.</p>
<h2 id="question2"><a class="question" href="#question2">Who invented skateboarding?</a></h2>
<p class="answer" id="answer2">According to the 1986 movie, <em>Thrashin'</em>, Sam Flood practically invented skateboarding.</p>
</body>
</html>In our head section we can then add in some jQuery to make the magic happen.
<style>
.answer {display:none;}
.on-display {display:block;}
</style>
<script>
$(document).ready(function(){
$('#question1 a').click(function() {
$('.answer').removeClass('on-display');
$('#answer1').addClass('on-display');
});
$('#question2 a').click(function() {
$('.answer').removeClass('on-display');
$('#answer2').addClass('on-display');
});
});
</script>There are more simplified ways of doing this, but we’re talking basics here and I want to be able to show you just how easy it is to comprehend jQuery even if you’ve never worked with Javascript before.
There are three things happening here:
- We set up our styles so that our answers are not displayed by default, and create a style that does display things which may previously have been hidden.
- We tell jQuery to show an answer when the appropriate question is clicked.
- We make sure to hide all other answers when a different question is clicked (this may or may not be the desired functionality, but for our purposes here today it’s valuable).
Let’s do a little jQuery code-to-English translation on one piece of our jQuery:
$('#question1 a').click(function() {
$('.answer').removeClass('on-display');
$('#answer1').addClass('on-display');
});Here we literally are saying “When Question 1‘s link is clicked ($('#question1 a').click(function() {), remove the class on-display from all items containing the class answer ($('.answer').removeClass('on-display');). Then, add the class on-display to Answer 1 ($('#answer1').addClass('on-display');).
Essentially, $ (or jQuery) specifically states “Find all elements on the page that match this CSS selector, be it .answer or something like h1 a. Anything you can select with CSS selectors can be used. So if we only wanted to select span tags inside of a tags inside of h1s in a div with an ID of primary, we could do:
$('div#primary h1 a span').click(function() {
whatever we want to do
});Additionally, instead of using specific selectors, you can use this to indicate “the current item being worked with”. So we could say:
$('#question1 a').click(function() {
$(this).removeClass('on-display');
});Which states “When Question 1’s link is clicked, remove the class on-display from Question 1’s link. That’s not applicable with our HTML above, but should give you a great starting point to explore more on your own.