Présentation de jQuery

source de l’image https://openclassrooms.com

• Parcours et modifications du DOM ;
• Gestion des événements ;
• Effets visuels et animations ;
• Traiter les données entrées dans des formulaires
• Manipulation des CSS ;
• Etablir des échanges avec un serveur Web via AJAX ;
• Utiliser des plugins ;
• Utilitaires

1. Accéder aux éléments d’un document.

• Sans l’aide d’une bibliothèque JavaScript, les développeurs web doivent écrire de nombreuses lignes de code pour parcourir l’arborescence du DOM (Document Object Model) et localiser des parties spécifiques de la structure d’un document HTML.
• jQuery fournit un mécanisme de sélection robuste et efficace qui permet de retrouver facilement les éléments d’un document afin de les examiner ou de les manipuler.$(‘div.content’).find(‘p’);

2. Modifier l’aspect d’une page web.

• CSS propose une solution puissante pour modifier le rendu des documents, mais elle montre ses limites lorsque les navigateurs web ne respectent pas les mêmes standards. Avec jQuery, les développeurs peuvent contourner ce problème en se fondant sur une prise en charge identique des standards quels que soient les navigateurs.
• Par ailleurs, la bibliothèque permet de modifier les classes ou les propriétés de style appliquées à une partie du document, même après que la page a été affichée. $(‘ul > li:first’).addClass(‘active’);

3. Altérer le contenu d’un document.

• jQuery ne se borne pas à des changements cosmétiques mais permet de modifier le contenu du document. Du texte peut être changé, des images peuvent être insérées ou interverties, des listes être réordonnées, l’intégralité de la structure du contenu HTML peut être revue et étendue.
• Toutes ces possibilités sont permises par une API (Application Programming Interface) simple d’emploi. $(‘#container’).append(‘plus...’);

4. Réagir aux actions de l’utilisateur.

• Même les comportements les plus élaborés et les plus puissants ne sont d’aucune utilité si leur exécution n’est pas contrôlée.
• La bibliothèque jQuery propose une solution élégante pour intercepter une grande variété d’événements, comme un clic sur un lien, sans avoir à encombrer le balisage HTML par des gestionnaires d’événements.
• De plus, cette API de gestion des événements permet de passer outre les différences de syntaxe des navigateurs, qui constituent une véritable nuisance pour les développeurs.


$(‘button.show-details’).click(function() {
$(‘div.details’).show();
});

5. Animer les modifications d’un document.

• Pour la bonne mise en œuvre des comportements interactifs, le concepteur doit également fournir un retour visuel à l’utilisateur. La bibliothèque jQuery apporte son aide en proposant des animations, comme les effets de fondu et de volet, ainsi qu’une boîte à outils pour en construire de nouvelles.

$(‘div.details’).slideDown();

6. Récupérer des informations à partir d’un serveur sans actualiser la page.

• Ce type de code, connu sous le nom Ajax, qui signifiait initialement Asynchronous JavaScript And XML, représente désormais un ensemble plus complet de technologies de communication entre le client et le serveur.
• La bibliothèque jQuery permet de retirer de cette tâche les complexités propres aux navigateurs et de laisser les développeurs se concentrer sur l’aspect serveur.

$(‘div.details’).load(‘more.html #content’);

7. Simplifier les tâches JavaScript courantes.

• Outre les fonctionnalités de jQuery orientées document, la bibliothèque améliore les constructions JavaScript de base, comme les itérations et la manipulation des tableaux.

$.each(obj, function(key, value) {
total += value;
});

Source: – jQuery, 3e édition – Jonathan Chaffer, Karl Swedberg