---
# System prepended metadata

title: jQuery WF3

---

# jQuery WF3

## Partie 1

### Informations

jQuery est une alternative à l'API DOM.

Tout ce qu'on peut faire avec le DOM peut être fait avec jQuery.

[Documentation](https://api.jquery.com/)

#### Avantages

* Rapiditié et facilité d'écriture, syntaxe courte
* Cross-platform : résultat identique sur tout les navigateurs 
* Grand nombre de plugins pour créer des fonctionnalités rapidement 

#### Inconvénients

* La plus-value n'est que pour le développeur, pas pour l'utilisateur final
* Surcouche à JavaScript qui alourdit un petit peu le site

#### Installation

* Soit on télécharge la librairie sous forme de fichier .js (https://jquery.com/download/)
* Soit on utilise un CDN (https://cdnjs.com/libraries/jquery)

### La fonction jQuery

`jQuery()` est une seule fonction qui peut être remplacée par son alias `$`

Lorsque l'on donne à jQuery une fonction en paramètre, il va l'exécuter une fois que le DOM est chargé.

```javascript
jQuery('#element').hide();
```

```javascript
$('#element').hide();
```

### Récupérer un élement

Si l'on souhaite récupérer un élement, la syntaxe sera plus courte.


```javascript
$('h1'); // avec jQuery
document.querySelector('h1'); // sans jQuery
```

Les deux sont identiques mais le résultat obtenu sera différent. Dans l'un on récuperera un ==objet jQuery== et quand l'autre on récuperera un ==objet JavaScript==.

Dans un objet jQuery on ne pourra appliquer que les fonction jQuery. Et pour un objet JavaScript on ne pourra utiliser que des fonction JavaScript.

```javascript
$('p.para').hide(); // cela va supprimer tout les élements <p> de classe .para
```

On peut appliquer un traitement sur plusieurs éléments sélectionnés d'un seul coup, pas besoin de parcourir de tableau avec une boucle comme avec Vanilla JS.

### Convertir un élément du DOM en élément jQuery

Il est possible de convertir un élément du DOM, par exemple les éléments préexistants en JavaScript natif comme `document` ou le mot clé `this`.

???

### Sélection et recherche d'éléments

```javascript=
const elements = $('.my-class'); // Sélection d'un ou de plusieurs éléments
const elements = $('#my-id').find('.my-class'); /
const elements = $
const elements = 
const elements = 
const elements = siblings = $('.my-class').siblings();
```

???

### Afficher ou masquer des éléments

deux fonctions `.hide()` et `.show()`

???

Il est possible de chaîner les méthodes !

???

#### Avec une animation

`fadeIn()` `fadeOut()`

???

### Modifier le contenu d'un élément

L'équivalent du `.textContent()` est `.text()`.

Pour récupérer/modifier le contenu HTML, on utilisera `.html()` plutôt que `.innerHtml()`.

```javascript=
$('h1').text('Nouveau titre'); // modifie le contenu de l'élément h1 sélectionné en jQuery
```

`.text()` et `.html()` sans paramètres dans les parenthèses **va récupérer le texte plutôt que le modifier**.

### Agir sur les attributs avec `.attr()`

```javascript=
const href = $('#my-link').attr('href'); // récupère l'attribut href de mon lien et le stock dans la constante href
$('#my-link').attr('title', 'Retour à l\'accueil'); // modifie l'attribut title de mon lien
```

Tout comme pour `.html()` et `.text()`, la même fonction va pouvoir faire plusieurs chose **en fonction du nombre de paramètres**.

Avec un seul paramètre dans `.attr()`, jQuery comprend que l'on cherche a récupérer la valeur de l'attribut.

### Agir sur les classe d'un élément

On utilisera les fonctions `.addClass()`, `.removeClass()`, `.toggleClass()`, `.hasClass()`

```javascript=
$('.para').addClass('importat'); // je sélectionne tous les éléments avec la classe .para et je leur ajoute la classe .important
```

### Agir sur les propriétés CSS d'un élément 

Avec la fonction `.css()`

```javascript=
$('.my-class').css('color', 'red'); // modifier la valeur d'une propriété
$('.my-class').css({'color': 'red', 'font-size': '1.5rem'}); // modifier plusieurs valeurs en même temps
```

Ici également, si je n'entre qu'un seul paramètre, jQuery va comprendre que je cherche a récupérer la valeur de la propriété plutot que la modifier.

En jQuery ==les propriétés ont le même nom qu'en CSS== !

### Gérer les événements

La méthode `addEventListener()` sera remplacé par la méthode jQuery `.on()`

```javascript=
function onClickButton(event){
  $('nav').toggle(500); // si l'élément est masqué il va l'afficher, s'il est affiché, il va le masquer
}

$('#my-button').on('click','onClickButton');

// Il existe aussi des fonction raccourcies qui portent le nom des événements par exemple .click()
$('nav').click.toggle(500); ???
```

### Créer de nouveaux éléments 


Plutôt que `document.createElements` on utilisera directement `$` avec en paramètre la balise HTML

On peut ensuite appliquer toutes les méthodes jQuery que l'on souhaite

```javascript
const link = $('<a>').attr('href', '#').addClass('link').text('Cliquez ici');
```

### Insertion des éléments crées 

???

A la fin du contenu d'un autre élément

```javascript=
$('#container').append(element);
element.appendTo($('#container'));
```

Il existe aussi .insertAfter() .insertBefore()

### Suppression d'éléments

```javascript=
$('#my-element').remove();
```

### Récaputulatif

`jQuery()` `$`
`.text()` `.html()` `.attr()`
`.hide()` `.show()`
`.fadeIn()` `.fadeOut()`
`.addClass()` `.removeClass()` `.toggleClass()` `.hasClass()`
`.css()` `.on()`