# jQuery
[jQuery](https://jquery.com/) is a JavaScript library which makes it much easier to modify content of your page with JavaScript. It's very easy to access HTML elements and change them.
## Setup
In order to use the library we have to insert its code into our `HTML` file.
In general there are two options for including external libraries:
1. through local files
2. through a [content delivery network](https://en.wikipedia.org/wiki/Content_delivery_network) (CDN)
### Local
Download the latest compressed version and store it in a subfolder `js` inside your main folder. Insert it into the head
```html
```
or at the end of the ``:
```html
```
### CDN
CDN (Content Delivery Network) links are available through [code.jquery.com](https://code.jquery.com/).
Choose a suitable version, copy the link and insert it to your page like
```html
```
or at the end of the ``:
```html
```
## Syntax
jQuery code is written like JavaScript code and likely combined with *vanilla* JavaScript.
Basic syntax:
```javascript
$(selector).action_to_perform()
```
The `$` is used to specify that the following code is written in jQuery. The selector addresses the element(s) we want to change with our code. These selectors follow the [CSS selectors syntax](https://www.w3schools.com/cssref/css_selectors.asp).
Example:
```javascript
// change a css property with JavaScript
document.getElementById('object').style.height = h;
// the same written in jQuery
$('#object').css('height', h);
```
Even better, it's possible to change multiple properties in one line:
```javascript
// Javascript:
document.getElementById("object").style.top = y;
document.getElementById("object").style.left = x;
// jQuery:
$('#object').css({'top':y, 'left':x});
```
(Take care with the notation of single and multiple properties: `,` vs. `{ :, :}`.)
Task: Adapt the JavaScript code of the changing_color() function to jQuery.
One possible solution.
```html
```
## Event handling
From now on we will use an external `js` file for the custom JavaScript code:
``` html
```
It's common to use a Document Ready Event before executing further jQuery code. This event will be fired when the **DOM** (Document Object Model) of your page is loaded.
`main.js`
``` javascript
$(document).ready(function() {
// all code in here
})
```
Instead of calling a function directly through HTML as we did in the JavaScript chapter, we can add event listener to jQuery/ JavaScript code. For example to detect the click on an element we can write:
``` javascript
$(document).ready(function() {
$('#object').click(function() {
// code to be executed on click
})
})
```
(Remove `onclick:change_color();` from `index.html`.)
`main.js` with the `change_color()` function:
``` javascript
$(document).ready(function() {
$('#object').click(function() {
change_color();
})
})
function change_color() {
// Return random colors.
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var a = Math.random();
// Create a string with the variables r, g, b, a.
var color = `rgba(${r}, ${g}, ${b}, ${a})`;
console.log(color);
// Change the background color.
$('#object').css('background-color', color);
}
```
Task: Write a new function that changes width and height of the object. Call it when the object is clicked.
```{admonition} One possible solution.
:class: dropdown
function change_size() {
// Return random sizes:
var w = Math.floor(Math.random() * 100 + 1);
// Without + 1 the values range from 0 to 99.
// Convert number to string and add unit:
w = w.toString() + 'vw';
// In one line:
var h = (Math.floor(Math.random() * 100 + 1)).toString() + 'vh';
// Change css properties:
$('#object').css({'width':`${w}vw`, 'height': h});
}
```
[More event methods](https://www.w3schools.com/jquery/jquery_events.asp)
## Example: Animation with arrays
Inspiration:
[Source.](https://mathiasbaer.de/)
`index.html`
```html