How to Use a JavaScript Library: jQuery

Read the article or watch the video!

JQuery is a library that contains lots of methods which make it much easier to manipulate HTML documents, add animation, along with a bunch of other things. Since JQuery is a library, it has an API that we can use to access its functionality.

API stands for Application Programming Interface and it basically states the methods or functions we can call inside our code if we import the library.

Let’s click on .addClass() method and see what it does.

Say we had a class named blue that made its elements have blue text. We could use the .addClass() method and add the blue class to all of the p elements with something similar to this where we’d have $(“p”).addClass(“blue”). This may be confusing right now, but don’t worry, we’ll figure it out.

To start, we first need to create an index.html and a script.js file. We’ll also put the script.js file in a folder named js and then link our script.js file in our index.html file. This should look pretty familiar since we’ve done it in other tutorials.

Just like we imported bootstrap in the bootstrap tutorial, we need to import jQuery in this post. We can either download it from the Internet and link it locally or we can link it from the Internet. We’ll do the second and after searching for the jQuery CDN, we’ll add it to our code.

Make sure to add it above the our script.js link because we will need to use jQuery in this file. With our jQuery in place, we’ll add one line of HTML code, a header. We’ll add some styling that puts it in the center of the page and gives it a white text color. We can also give it the id hidden and the header will say “I was hidden!”.

Now, when we refresh the page, we’ll see that the header text is there, but we can’t see it unless we highlight it.

With jQuery and CSS, we could make it so that when we hover over it, the text of the header becomes black. To do this, we’ll go into our script.js file and write some code.

Here, the ready function makes sure that the DOM (for now, our HTML elements) have loaded. Once they are loaded, we select our element with the hidden id and call the hover function on it. This means when we over hover the element, the function on lines 2–4 will be run. The function will select “this” element (the element with the id hidden) and in the element’s CSS, the color property will be set to the value black. You could do this for any element, ID, or class and set any property to any value. Next, we have the callback function on lines 5–6 and this is something you have to write out even if you don’t use it. We will leave it empty for now and come back to it later.

Now, when we refresh the page and hover over the header, the text turns black. However, when we stop hovering over the header, the text remains black. What if we want to “re-hide” our message after hovering over it? Going back to the code we can implement our callback function. This will be called once we “leave” or stop hovering over our header, the element with the ID hidden. Let’s add some more code.

Here, we select “this” element again, which is the element with the ID hidden, and hide it from the viewer. This function as with the .css, .hover, and .ready function are built into the jQuery library so we don’t need to worry about how they are implemented. We just need to know the end result. Here, the hide function hides “this” element on the webpages. Essentially, this just sets the display property of “this” element to none, but using .hide() makes the code a bit more concise. Let’s see what happens when we refresh the page.

We hover over the header and leave it. After, the header element is gone — even when we try highlighting it, it cannot be found. With this program, we hid a message in plain sight, displayed the message while the mouse was pointed on it, and then made it disappear when the mouse left it.

For another quick example, we’ll add a button back in our HTML and make it so an alert shows up on the page when we click the button.

Now, we’ll write the JavaScript using the jQuery library to make the button interactive.

Here, we select all the buttons on the page and when one is clicked, we run the function. The function uses the alert method (built into HTML) to alert the user on screen with the message “I’m alerting you!”. Going back to our webpage, we’ll refresh and see what our alert looks like.

And there’s our alert! Could we have done this with plain vanilla JavaScript? Yes, but using the jQuery library makes a lot of this much easier to code and easier to read later on. Next week, we’ll talk about angular.js, which is a structural JavaScript framework that helps you build dynamic web apps. For the first time in the series, we won’t be hard-coding our content — but we will be getting it from somewhere else. I hope you learned something in this week’s post and I’ll see you next time.

Things to Remember:

<!-- How to Import jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!-- How to Use a jQuery Method -->
 $("button").click(function() {
	// what you want to do when button clicked
});<!-- How to Create a Callback Function -->
$(document).ready(function(){
    $("#idName").hover(function(){
      // do this when we hover over the element with id idName
    },
  function(){ // 
  	  // body of a callback function
  	  // do this when we stop hovering over the element with id idName
    });
});<!-- How to Dynamically Set CSS in jQuery -->
$(p).css("font-style", "italic");
$(#hidden).css("display", "none");

Plus a Little Extra:

<!-- How to Select a Class in jQuery -->
$(".className").fadeIn();<!-- How to Animate Text -->
$("p").animate({left: '250px'});
// this uses animation to move all of the p elements left by 250px<!-- Reveal Text After Some Time -->
 $("p").show(1000);<!-- Modify Input Fields -->
$("input").focus(function(){
    // do this when user clicks the input field
});
$("input").blur(function(){
  // do this when input field is not clicked
});

Code from this blog post