A quoi sert jQuery ?

Ici, je reprends l'exemple d'une requête AJAX codée en JavaScript. Il y a un petit problème. Si j'exécute ce code, sur un ancien navigateur de la famille Microsoft, hé bien, il ne fonctionnera pas !! Et c'est normal, car pour faire ma requête AJAX, j'utilise des instructions JavaScript qu'il ne connait pas. Sur ces navigateurs, une requête AJAX doit être programmée d'une autre manière.

Le programmeur JavaScript est donc obligé de tester sur quel navigateur son code va tourner.

C'est là qu'intervient jQuery. jQuery est une librairie, écrite en JavaScript, qui fournit au programmeur des fonctions de haut niveau. Elle fournit notamment, une fonction qui fait une requête AJAX. La différence, c'est que la fonction de jQuery, va tester le navigateur et adapter le code à ce dernier. Et ça, c'est vrai pour tout ce que fait jQuery.

Là, le programmeur gagne du temps. En plus, il a une sécurité, car quel que soit le navigateur, il est tranquille, ça va fonctionner.

Donc, ici, vous avez une requête AJAX codée en Jquery qui va tourner correctement dans les navigateurs des ordinateurs de bureau, tablettes et smartphones.

jQuery(document).ready(function() { // Sur un changement d'état du select $('#annee').on('change',function() { // On récupére l'année var annee = $('#annee').val(); // On fait une requête Ajax $.ajax({ type: 'POST', url : 'ajax-javascript-serveur.php', data: 'annee='+annee, // Ci-dessous c'est le traitement de la réponse success: function (reponse) { // Analyse et récupération du tableau de données transmis par le serveur var data = JSON.parse(reponse); // On place les données dans le tableau HTML $('#opus').text(data.opus); $('#ventes').text(data.ventes); $('#logo').html("<img src='"+data.logo+"'>"); } }); }); });

Je précise, que ce problème est résolu sur les versions récentes. Il n'en reste pas moins vrai, que les navigateurs sont différents selon le visiteur, et que le JavaScript lui-même n'est pas tout à fait identique d'un navigateur à l'autre.

La devise de jQuery est de moins écrire, tout en faisant plus.

Dans ce sens, jQuery propose au programmeur, le moyen de travailler avec efficacité sur la page web. Le programmeur a à sa disposition, un mécanisme puissant de sélection des éléments du document. A cette sélection, il peut appliquer une séquence d'actions.

Par exemple, ici, on fait apparaître et disparaître, un tableau avec une animation qui durera une seconde.

$('table').toggle(1000);

On voit bien apparaître la structure d'une instruction jQuery. Une partie sélection, à gauche, et une autre partie action, à droite.

Ce mécanisme de sélection est identique, au mécanisme de sélection des feuilles de styles CSS. A priori le programmeur le connait déjà, et s'il ne le connait pas, il lui suffira de l'apprendre une seule fois pour les deux utilisations.

Programmer la même animation, en JavaScript, nécessite beaucoup plus de lignes de code. Ce type de manipulation de document est présent dans de nombreuses situations, aussi, il est utile que les outils nécessaires soient regroupés dans une librairie. C'est ce que fait jQuery.

Je termine, en vous faisant remarquer, que j'ai utilisé le terme d'instruction jQuery. En fait, jQuery impose aux programmeurs des structures de programmation. A ce titre, il est plus qu'une librairie de fonctions. Vous entendrez ou lirez que c'est un framework. Ce n'est pas le seul, c'est juste un des premiers et le plus populaire.

Juste deux mots, pour dire que des briques ont été rajoutées par-dessus jQuery.

jQuery UI, permet de programmer de puissantes interfaces utilisateurs. Un clic sur ce lien vous permettra de voir, la liste des possibilités.

jQuery MOBILE, permet de programmer de puissantes interfaces utilisateurs dédiées aux smartphones. Un clic sur ce lien, vous permettra de voir la liste des possibilités.