For more information see *jQuery.
1. Connect jQuery Library
To include jQuery we are going to use a CDN, or 'Content Delivery Network'. Insert the code above in your index.html, above where you link to script.js. This will give us the power to use all the functions within the jQuery library.
What is a 'content delivery network'?
A content delivery network is a network of servers all over the world that host files for developers to use. In this instance we’re using a CDN to hold our jQuery file. As lots of developers probably want to use jQuery it makes sense for us to all link to the same file.
2. ID canvas elements
We're adding these unique identifier attributes, or IDs, to each canvas element in our HTML so we can apply different image backgrounds.
What is an ID attribute?
An ID is a way of targeting one specific element on a web page. For more information see *IDs.
3. Change canvas background image from script.js
We are using a jQuery function here called '.css' which adds css to an element.
The '$' is shorthand for jQuery - to save developers from typing 'jQuery' each time they can use a $ instead.
Have a look at the preview and you should see you images displaying. When you press refresh the images should change randomly!
How does jQuery work?