jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web.
D'origine le javascript natif n'est pas exécuté et codé de la même manière sur tous les navigateurs.
Il faudrait donc développer du code javascript adapté à chaque navigateurs ce qui
rend la partie développement coté client (navigateur) longue et fastidieuse.
Jquery reprend la syntaxe javascript mais permet de rendre compatible une fonctionnalité
à tous les différents navigateurs. On gagne beaucoup de temps en développement surtout que
Jquery facilite la compréhension du codage coté client avec des fonctions plus simple à utiliser que javascript.
Le but de la bibliothèque étant le parcours et la modification du DOM html et CSS.
Elle contient de nombreuses fonctionnalités ; notamment des animations,
la manipulation des feuilles de style en cascade "CSS" (accessibilité des classes et attributs),
la gestion des évènements, etc.
L'utilisation d'Ajax est facilitée et de nombreux plugins sont présents.
Téléchargez la dernière version de jquery sur le lien ci-dessous.
Téléchargement de la bilbliothèque JQuery
Installez ensuite la bibliothèque Jquery dans votre fichier 'Layout' de votre structure html :
<script type="text/javascript" src="jquery-3.8.1.min.js"></script>
Votre code Jquery doit être écrit dans un fichier javaScript que vous enregistrerez dans un répertoire de votre projet PHP. Ce répertoire contiendra la librairie Jquery et votre fichier personnel qui va contenir votre code source Jquery.
Lorsque l'on utilise Jquery il faut indiquer au moteur Javascript de notre navigateur que l'on va utiliser la librairie Jquery à la place de JavaScript. Sinon vous allez générer beaucoup d'erreurs car votre navigateur ne va pas reconnaître les scripts Jquery et va l’interpréter comme du Javascript.
Pour cela il faut encadrer votre code Jquery dans des sortes de balises pour indiquer que c'est Jquery qui va interpréter le code.
//Début de votre code source en Jquery
jQuery.noConflict();
( function($) {
$(document).ready(function(){
..... Votre code source Jquery
});
})(jQuery);
//Fin de votre code Jquery
// La fonction .ready() indique que ce qui vient après sera executé dès que toute la page html sera chargée
Installez ensuite votre fichier "monFichier.js" dans le fichier 'Layout' de votre structure html :
<script type="text/javascript" src="repJs/monFichier.js"></script>
Jquery contient une API facile à utiliser et qui fonctionne sur une multitude de navigateurs.
Vous trouverez toutes les fonctionnalités de l'API Jquery ici :
API JQuery
Pour débuter avec Jquery vous avez une section qui vous propose plein d'exemples d'utilisations classés par thématiques.
Apprendre la manipulation de JQuery
En jQuery pour atteindre un élément (ou plusieurs) de votre structure html il
faut indiquer soit un identifiant unique (Id), soit une classe (CSS), un attribut d'élément ou un élément html (ex : div)
ou encore un mélange de plusieurs infos (ex : éléments html contenant une classe CSS).
On sélectionne un élément avec jQuery en utilisant le signe $
puis entre parenthèses l'élément recherché.
$('#idElement') ; // Sélectionne un élément par son Id
$('.cssElement') ;// Sélectionne des éléments par la classe CSS
$('div.maClassCSS') ; //Sélectionne un type d'éléments ayant une certaine classe CSS
$( "input[name='first_name']" ); //Sélectionne un élément par son attribut.
Toutes les méthodes de sélections d'éléments en jQuery : https://learn.jquery.com/using-jquery-core/selecting-elements/
Traditionnellement, les pages Web devaient être rechargées pour mettre à jour leur contenu. Pour le courrier électronique sur le Web, cela signifiait que les utilisateurs devaient recharger manuellement leur boîte de réception pour vérifier et voir s'ils avaient de nouveaux messages. Cela avait d'énormes inconvénients car cela nécessitait l'intervention de l'utilisateur pour recharger la page et ralentissait le serveur qui devait traiter des demandes déjà transmises. Lorsque l'utilisateur voulais recharger sa boîte de réception pour vérifier l'arrivé de nouveau email, le serveur devait reconstruire la page Web entière et renvoyer tout le code HTML, CSS, JavaScript, ainsi que le courrier électronique de l'utilisateur. Tout cela était extrêmement inefficace et sans intérêt.
Idéalement, le serveur ne devrait envoyer que les nouveaux messages de l'utilisateur et pas la page entière. En 2003, tous les principaux navigateurs ont résolu ce problème en adoptant l'objet XMLHttpRequest (XHR), permettant aux navigateurs de communiquer avec le serveur sans nécessiter de rechargement de page.
L'objet XMLHttpRequest fait partie d'une technologie appelée Ajax (Asynchronous JavaScript and XML). En utilisant Ajax, les données pouvaient ensuite être transmises entre le navigateur et le serveur, à l'aide de l'API XMLHttpRequest, sans avoir à recharger la page Web. Avec l'adoption généralisée de l'objet XMLHttpRequest, il est rapidement devenu possible de créer des applications Web comme Google Maps et Gmail qui utilisait XMLHttpRequest pour obtenir de nouvelles tuiles de cartes ou de nouveaux e-mails sans avoir à recharger la page entière.
Les requêtes Ajax sont déclenchées par du code JavaScript; votre code envoie une demande à une URL et lorsqu'il reçoit une réponse, une fonction de gestion des retours peut être déclenchée pour gérer la réponse. Étant donné que la demande est asynchrone, le reste de votre code continue de s'exécuter pendant le traitement de la demande, il est donc impératif qu'une fonction de retour soit utilisée pour gérer la réponse.
$.ajax({
url: "?page=maPage", // le nom du fichier qui va traiter la demande
type: "GET", // la méthode indiquée pour récupérer les paramètres de l'url (get ou post)
data : 'offre=' + offre, // On fait passer nos variables, exactement comme en GET
beforeSend: function () { //Si vous souhaitez faire des actions avant d'envoyer les infos.
...
},
complete: function () { //Si vous voulez faire des actions quand AJAX à fini le traitement.
...
},
success: function(reponse) { // Si tout est OK je récupère la réponse envoyée par mon fichier PHP
// alert(reponse); // j'affiche cette réponse
$('#idDeMonCadreHtml').html(reponse);//Remplace toute le contenu html du cadre par la réponse
}
});
Pour transmettre un formulaire html en AJAX il faut passer les bons paramètres à votre fonction AJAX.
On indique le type de méthode pour passer les valeurs
type: "POST", // passe les informations du formulaire par la méthode POST.
Ensuite il faut sérialiser le formulaire pour le passer à data. C'est à dire mettre toutes les informations du formulaire sur une ligne.
data: $(#idDeMonFormulaire).serialize(), // je sérialise les données de mon formulaire html
Les événements sont très utiles pour détecter une action sur votre page web. Vous allez pouvoir réaliser des fonctions lorsqu'une action réalisée par l'utilisateur est détectée.
Il existe un grand nombre d'actions dont voici un extrait.
//Affichage d'une rubrique d'un menu déroulant (accordeon)
$('.menu1').click(function(){ //detection du clique sur l'élément 'menu1'
$('.sousMenu1').toggleClass('open'); //On ajoute ou supprime la classe CSS d'ouverture du sous menu
});
Liste des événements déclenchés par la sourie :
https://api.jquery.com/category/events/mouse-events/
.keydown() → détecte si une touche du clavier est pressées. Idéal pour faire défiler des images dans une galerie de photos. Pour cela il faut ensuite détecter le code de la touche pressée si vous voulez utiliser les flèches.
Liste des événements déclenchés par le clavier :
https://api.jquery.com/category/events/keyboard-events/
.submit() → si le formulaire testé est validé alors on exécute une liste d'instructions. Utile pour transmettre un formulaire en AJAX. On détecte si le formulaire à été validé et on lance la fonction AJAX qui va transmettre au serveur les informations du formulaire.
Liste des événements déclenchés par un formulaire :
// lorsque je soumets le formulaire
$('#monFormulaire').on('submit', function() {
....Votre code Ajax
return false; // Empêche le navigateur de soumettre le formulaire
});
Une liste de fonctions jquery permettent de modifier le code html et css de votre page.
Vous allez par exemple, pouvoir modifier les styles CSS de vos éléments html, modifier du texte dans votre page, modifier les éléments de vos éléments (classes css, attributs, valeurs...) et récupérer des informations sur vos éléments html.
.html() → va modifier le code html indiqué par le code html passé en paramètre.
$('#IdBlocHtml').html('<h1>Bonjour et bienvenue à vous ! </h1>') ; //Remplace tout le contenu html du bloc <div id= 'IdBlocHtml'>...</div>
Liste des manipulations possibles de votre code html :
https://api.jquery.com/category/manipulation/