# 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()`