jQuery and Libraries
Now that we’ve got a handle on some basic javascript, let’s explore a popular javascript library called “jQuery”. A library is a collection of functions, operations, and other bits of code that expand on or extend the use of a given programming language. jQuery is a widely used javascript library that defines itself as “a fast, small, and feature-rich JavaScript library.” Essentially, it simplifies javascript programming by reducing the length of standard javascript syntax and packaging commonly used functions into shorter, easy to use methods.
You can read more on the w3schools jQuery intro.
First, we'll need to download the latest “compressed production build” from here.
Copy the jQuery .js file into your website folder.
Next, we’ll create a link to it in our html document. We’ll place it at the bottom of the body:
Next, create a new file and name it something like “main.js”. This will be the .js file where we will add our own functions to. This works similarly to our external css stylesheet, allowing us to write scripts in a separate document that we can easily apply to multiple pages if we want.
Create a link to it in the same way that we linked the “jquery.js” file, but make sure it is below the jQuery reference link. The order here is important as the javascript that we will be writing in our “scripts.js” file will be dependent on the jQuery library above it — and as we know by now, the HTML document is being read from the top to the bottom, so things won’t work unless they’re in the right order...
Now that we’ve got everything set up, let’s start to experiment with writing some jQuery. We can start with something similar to our last exercise: the toggleClass method. Let’s visit the w3schools example here.