JQuery

tutorial javascript basic

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 clicks. 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. JQuery is 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 little thing. Why I’m pointing this out will make sense in a minute. Here’s the little 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 just like using x or myMessage or any other variable name. There’s nothing special about the $ sign. Like I said, this’ll make sense in a minute. Anyway, back to JQuery.

Back to 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:

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.

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 allow you to 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 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 our 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 95% of JQuery 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 just 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 is great, and I use it all the time. 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!

Homework

Next: Bootstrap

Go back up