jQuery is a JavaScript library. A library is a collection of functions, methods and other functionality that has typically been created to tackle a particular problem with basic JavaScript cannot tackle alone.
(Functions and methods are basically recipes for performing an action like 'hide this element' or 'add up these numbers')
Examples of the problems include libraries for data visualisation, for app creation, for data handling, for scraping, and so on.
Libraries exist in other programming languages as well. The Python and Ruby programming languages use libraries for similar problems; and R has them too - only it calls them 'packages'.
jQuery is a library of functions which make it easier to manipulate HTML elements and make a page more interactive and 'animated'.
For example, if you've ever seen longform immersive features like Snow Fall, those fancy fades and moving elements are often created with jQuery functions like fadeOut().
It is also one of the most popular JavaScript libraries around, and so probably the one you are most likely to have to work with. In fact, if you believe the Wikipedia entry (citations here) it is the most popular.
But most of all, it makes your life a lot easier than if you tried to do the same things with basic JavaScript alone.
In order to use all of the loveliness that jQuery gives us you first need to load the library. There are a few ways you can do this:
- Download the jQuery library yourself from jquery.com/download and link to that
- Link to the jQuery library somewhere on the web
The second option is much easier, and indeed the jQuery website itself uses this approach.
To do this, create a basic skeleton for your HTML page like so:
<html>
<head>
</head>
<body>
</body>
</html>
Then make sure you are within the <head> tags of your HTML, and create a <script> tag with the src= attribute pointing to the Google API. Close that tag straight away so it looks like this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</script>
</head>
<body>
</body>
</html>
You don't have to use the version hosted by Google: Microsoft also has one.
However you load it, once that's done you are now ready to add some jQuery.
jQuery is all about manipulating the DOM. DOM is an acronym for Document Object Model, and is just a fancy way of saying 'the webpage' (although it can also be used to refer to other types of documents, like XML files).
In order to manipulate 'the DOM' we need some HTML tags to manipulate. So, add a simple heading and paragraph tag within your <body> tag like so:
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
</body>
Save your file - make sure you add a .html extension - and then open it in a web browser like Chrome or Firefox to check that it's worked.
Now we need another pair of <script> tags within our body to contain our jQuery:
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<script>
console.log('JavaScript running!');
$('p').text("No it isn't.");
</script>
</body>
Reload your page and open up the Inspector by right-clicking on the page and selecting Inspect. The 'inspector' should appear. It will normally default to the Elements view but you need to change to the Console view. You can find out more about the Inspector in Chrome here, or in Firefox here.
When you load this page with the Inspector open, you should see the message you just typed in that script: 'JavaScript running!'
This is generated by the console.log command. If instead you see any errors, try to look at the line that's generating it (this should be in the console too, on the right) and what might be causing it. Often it's a missing character, an unnecessary character, or characters in the wrong order.
Now let's add some actual jQuery:
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<script>
console.log('JavaScript running!');
$('p').text('No it is not.');
</script>
</body>
The first bit of jQuery is $('p').text("No it isn't."). We'll break that down in a minute. First, make the change and see what happens.
When you save this and load the page again, you should see that the paragraph text has changed. That's what this code does.
The first part of that code is the dollar sign $. This means jQuery and anything after it in brackets is what you are affecting with your jQuery.
In those brackets is the p tag, in inverted commas: $('p')
This means we are going to affect something about the <p> tags on this page.
What we are going to affect is the text within those tags. And we do that using .text method. You can find out more about that in the jQuery documentation here
So far, $('p').text means 'grab the p tags and do something to the text in those tags'. What .text does is replace the text inside those tags with whatever we put in brackets after the method. So, ('No it is not.') means 'put the string No it is not. inside that p tag.
But it's important to point out that this will affect all p tags on our page
To target more specifically we need to describe our content more carefully by using extra attributes, such as class=, id= and so on.
TIP: there's a lot more we can do with .text, including grabbing text. Another method to use is .html which also allows us to grab or add extra HTML code inside targeted tags; and .val, which allows us to grab values inside a form.