jQuery

Tutorials
/
JavaScript Tutorials
/
jQuery

jQuery

Note: I wrote this tutorial back in 2017. Since then, I’ve personally stopped using jQuery. I’m leaving this tutorial up for now, but I recommend using vanilla JavaScript and CSS instead!

At this point on your JavaScript journey, you know how to write code that modifies the page using functions like getElementById() and variables like innerHTML, and by setting event attributes to call functions when the user interacts with the page. You also know how to use JavaScript libraries by loading them into a <script> tag and using the objects and functions they define.

This tutorial introduces a JavaScript library called jQuery. For years, jQuery was the most popular JavaScript library, and it contains a bunch of objects and functions that make common JavaScript tasks (like making an interactive webpage, loading data, and building a user interface) easier.

The $ Symbol

Before we go further, I just want to pause and point out one thing: you can use the $ symbol as a variable name in JavaScript. So this is completely fine:

var $ = "happy coding";
console.log($);

That might look a little weird, but it’s very similar to using x or myMessage or any other variable name. There’s nothing special about the $ symbol. Why I’m mentioning this will make sense in a minute. Anyway, back to jQuery.

jQuery

To use JQuery, first load the library:

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

Now that you’ve loaded the library, you can use the jQuery() function that the library provides. The jQuery() function works in two forms:

  • If you pass it a reference to a function, it calls that function when the page loads. This is similar to setting the onload attribute of the <body> tag.
  • If you pass it a string, it returns a jQuery object that wraps the element(s) identified by that string. This is similar to the getElementsByTag(), getElementsByClass(), and getElementById() functions all rolled into one.

Let’s start with an example without JQuery:

<!DOCTYPE html>
<html>
<head>
	<title>Non JQuery Example</title>
	<script>
		function clicked() {
			document.getElementById('clickMe').innerHTML = "Thanks!";
		}
		
		function addClickListener(){
			document.getElementById("clickMe").addEventListener("click", clicked);
		}
	</script>
</head>
<body onload="addClickListener()">
	<p id="clickMe">Click me!</p>
</body>
</html>

This code uses the onload attribute of the <body> tag to call the addClickListener() function when the page loads. The addClickListener() function uses the document.getElementById() function to find the element with an id of clickMe, and sets the click listener to be the clicked() function. Finally, the clicked() function sets the innerHTML of the element, which changes the text that’s displayed in the element.

Code Editor ?

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Now, let’s see that using JQuery:

<!DOCTYPE html>
<html>
<head>
	<title>JQuery Example</title>
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script>
		function clicked(){
			jQuery("#clickMe").html("Thanks!");
		}
	
		function addClickListener(){
			jQuery("#clickMe").click(clicked);
		}
		
		jQuery(addClickListener);
	</script>
</head>
<body>
	<p id="clickMe">Click me!</p>
</body>
</html>

This code does the exact same thing, but it uses jQuery instead of vanilla JavaScript.

Instead of using the onload attribute, this code uses the jQuery() function and passes it a reference to the addClickListener() function. This form of the jQuery() function sets up a ready function similar to how the onload attribute works.

After the page is loaded, the addClickListener() function then uses the jQuery() function and passes it a string identifier, in this case the ID (starting with a # symbol) of an element to find. That function returns a jQuery object, which contains a bunch of functions that let you interact with the underlying html. This code uses jQuery’s click() function to add a click listener, and it passes the clicked() function into it.

Finally, the clicked() function uses the jQuery() function to get the element again, then calls jQuery’s html() function on that jQuery object to set its content.

Code Editor ?

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The $ Variable

Now, remember what I said about the $ symbol being a perfectly normal variable name? The reason I said that is this: somewhere in JQuery’s library, it does this:

var $ = jQuery;

That means that instead of using the jQuery() function, you can use the $() function instead. So the above code can be rewritten:

function clicked(){
	$("#clickMe").html("Thanks!");
}

function addClickListener(){
	$("#clickMe").click(clicked);
}

$(addClickListener);

This does the exact same thing that calling the jQuery() function did, but now it uses the $ shorthand instead. This is how most jQuery code is written. If you see a $ symbol in somebody else’s JavaScript, chances are they’re using jQuery. At first it looks a little weird, but keep in mind that this is still normal JavaScript, using the objects and functions in the jQuery library.

You don’t have to use jQuery

<rant>JQuery is so popular that some people don’t really know how to use JavaScript without it. (See also: the use JQuery joke on Stack Overflow.) But keep in mind that jQuery is “just” a bunch of JavaScript written by other people. It doesn’t add anything that JavaScript can’t already do. It’s not a different language.

jQuery can be great, but I think it’s a mistake to rely on it too much before learning about vanilla JavaScript (exactly what you’ve been using already). I highly recommend going without it for a while, especially if you’re just starting out.</rant>

You can always come back here after you’ve had some more practice with regular JavaScript!

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!