Introduction à jQuery et
jQuery UI

Qu'est-ce qu'une bibliothèque JavaScript ?

Une bibliothèque JavaScript est un ensemble de fonctions pré-écrites qui facilitent le développement d'applications web en simplifiant des tâches complexes ou répétitives. En utilisant une bibliothèque, on peut intégrer des fonctionnalités sans avoir à coder depuis zéro.

Qu'est-ce que jQuery ?

jQuery est une bibliothèque JavaScript rapide et concise qui simplifie la manipulation des documents HTML, la gestion des événements et l'animation.

Comparaison : JavaScript "vanilla" vs jQuery

Exemple : "Sélectionner 'monElement' et changer sa couleur en bleu"

var element = document.getElementById('monElement');
                  if (element) {
                    element.style.backgroundColor = 'blue';}

  $('#monElement').css('background-color', 'blue');

Symboles clés de jQuery

• $ : Alias pour jQuery(), utilisé pour accéder à l'API jQuery.
• # : Sélecteur d'ID, identifie un élément unique ($('#id')).
• . : Sélecteur de classe, cible un groupe d'éléments ($('.classe')).
• 'element' : Sélecteur d'élément HTML, comme en CSS ($('div')).

Méthodes clés de jQuery

• .css() : Modifier les styles CSS d'un ou plusieurs éléments.
• .hide() et .show() : Masquer ou afficher des éléments.
• .text() : Lire ou changer le texte d'un élément.
• .html() : Lire ou changer le contenu HTML d'un élément.
• .on() : Ajouter des gestionnaires d'événements (par exemple, .on('click', ...)).

Qu'est-ce que jQuery UI ?

jQuery UI est une bibliothèque JavaScript basée sur jQuery qui propose une collection d'éléments utiles dans le développement d'une interface utilisateur.

Composants de jQuery UI

• Interactions : glisser-déposer, redimensionnement, etc.
• Widgets : boutons, onglets, boîtes de dialogue, etc.
• Effets : changement de couleur, apparition/disparition d'éléments, etc.
• Thèmes : propriétés CSS pour la mise en page d'éléments interactifs.

Comparaison : JavaScript "vanilla" vs jQuery UI

Créer un calendrier interactif

                  var input = document.getElementById('datepicker');
                  input.addEventListener('focus', function() {
                    var calendar = document.createElement('div');
                    calendar.id = 'calendar';
                    document.body.appendChild(calendar);
                  });

Avantages de jQuery et jQuery UI

• Facilitent l'ajout d'interactivité et d'effets graphiques avancés sans une maîtrise approfondie de JavaScript.
• Permettent de créer des interfaces utilisateur riches et engageantes.