JQUERY
◼Présentation
• Origines :
✓ Création en 2006 par John RESIG
◼ Objectif : simplifier le développement des pages Web avec Javascript
✓ Bibliothèque en code libre
◼ Développement et documentation assurés par une équipe
• Principales caractéristiques
✓ Écriture en Javascript de manière non intrusive
◼ Séparation nette des scripts d’avec le code XHTML
✓ Orientation vers la manipulation d’éléments d’une page Web
◼ Extension du mécanisme de sélection existant dans CSS
✓ Simplification de l’utilisation de DOM
◼ Mécanismes puissants avec une notation minimaliste 1
JQUERY
◼Présentation
• Principales caractéristiques
✓ Intégration de techniques pour les applications Internet (RIA)
◼ Effets d’animation, interfaçage avec Ajax, etc.
✓ Bibliothèque extensible
◼ Nombreuses extensions disponibles (formulaires, menus, etc.)
✓ Gestion poussée de la compatibilité avec les navigateurs
◼ Prise en charge de particularités hors norme de navigateurs
◼ Mais fonctionne avec des versions relativement récentes :
◼ Firefox ≥2, Internet explorer ≥ 6, Safari ≥ 3, Opera ≥ 9, Chrome
ASSALE Adjé Louis AJAX & JQuery 2
JQUERY
◼Installation en 3 étapes
• Télécharger la librairie JQuery
✓ À l’adresse [Link] pour la version la plus récente
◼ C’est un fichier texte écrit en Javascript (d’où l’extension .js)
• Importer dans le document
✓ Dans tout document html/php où utiliser Jquery ajout dans le
header la balise
◼ <script language=javascript src=lib/[Link]></script>
◼ lib/[Link] version de 2012
✓ Si importation de +sieurs fichiers javascript dans document
◼ Commencer par JQuery au cas où un des fichiers en aurait besoin
ASSALE Adjé Louis AJAX & JQuery 3
JQUERY
◼Installation en 3 étapes
• Mettre en place "l’enveloppe d’exécution"
✓ Toute la page doit être chargée avant l’exécution de JQuery
◼ Donc on crée le bloc du code des instructions JQuery dans une fonction
spéciale dans le header. La syntaxe est la suivante :
<script language=javascript>
$(document).ready(function(){
//code JQuery de la page à écrire ici
});
</script>
◼ On peut utiliser un fichier séparé
◼ N.B. : $(document).ready( function() { code} );
$( function (){ code} );
ASSALE Adjé Louis AJAX & JQuery 4
JQUERY
◼Les sélecteurs JQuery
• Hérités des sélecteurs CSS (jusqu’à la version CSS4)
• Fonctionnement
✓ Fonctionne très bien quelque, soit le navigateur (≤10 ans)
✓ La syntaxe est ciblée
◼ 1 instruction commence en désignant l’élément HTML sur lequel agir
◼ Comme en CSS on peut sélectionner 1 ou +sieurs éléments du <body>,
et de +sieurs manières
◼ Notation : jQuery(sélection) ou $(sélection)
◼ sélection exprimée à priori comme en CSS dans chaine
◼ Exemple : jQuery("div#contenu") ou $("div#contenu")
◼ Manipulation de la sélection par application d’une méthode
◼ Par exemple définition de style via .css(propriété, valeur)
$("div#contenu").css("color", "red"); 5
JQUERY
◼Les sélecteurs JQuery
• Exemples
ASSALE Adjé Louis AJAX & JQuery 6
JQUERY
◼Les sélecteurs JQuery
• Exemples
✓ On peut cumuler 3 syntaxes pour écrire chemins plus
complexes vers cible mieux délimitée
✓ Quelques sélecteurs spéciaux hérités du CSS :
ASSALE Adjé Louis AJAX & JQuery 7
JQUERY
◼Les sélecteurs JQuery
✓ Quelques sélecteurs spécifiques de JQuery
ASSALE Adjé Louis AJAX & JQuery 8
JQUERY
◼Les sélecteurs JQuery
✓ Quelques sélecteurs spécifiques de JQuery
Plus d’infos voir
[Link]
category/selectors/
ASSALE Adjé Louis AJAX & JQuery 9
JQUERY
◼La syntaxe de JQuery
• Une fois cible sélectionnée
✓ Application des fonctions proposées comme suit :
◼ $("#truc").hide();
◼ Un point sépare la cible et la fonction
◼ Cumul de +sieurs fonctions sur une seule cible :
$("#truc").hide().fadeln("slow")
◼ // on cache #truc, et on le fait réapparaitre aussi sec en fondu
✓ Cas des fonctions non instantanées (animations, chargement de
contenu externe, etc.)
◼ Possibilité d’indiquer ce que faire après l’agissement de la fonction
◼ Possibilité de créer des séquences de codes successifs facilement en
indiquant une fonction dans la fonction
ASSALE Adjé Louis AJAX & JQuery 10
JQUERY
◼La syntaxe de JQuery
• Une fois cible sélectionnée
✓ Cas des fonctions non instantanées
◼ Exemple :
$('#truc').fadeOut('slow', function(){ // disparition du bloc, puis...
$('#truc').load('actu,html', function(){ // chargement d'une actu externe, puis...
$('#truc').show('slow', function(){ // réapparition du bloc mis à jour, puis...
alert('la séquence est finie !'); // affichage d'une boite de dialogue
});
});
});
✓ On peut mettre un temps pour exécuter une instruction
◼ $('#truc').delay(2000).hide();
◼ // attendre 2000 millisecondes avant de cacher le bloc
ASSALE Adjé Louis AJAX & JQuery 11
JQUERY
◼La syntaxe de JQuery
• Une fois cible sélectionnée
✓ On peut faire une boucle et attribuer une action ≠te à chaque
élément
◼ Exemple :
$('.box').each(function(index){ // on va répéter la suite pour chaque élément, 1 par 1
// $(this) c'est l'élément actuellement sélectionné, avant de passer au suivant
$(this).show();
// index c'est le numéro de cet élément dans la liste : 0 pour le 1er, 1 pour le 2ème...
$(this).html("Ceci est la div de la classe box numéro "+index);
});
ASSALE Adjé Louis AJAX & JQuery 12
JQUERY
◼Quelques fonctions et familles usuelles
• Plus de fonctions dans [Link]
✓ Afficher/masquer un bloc
ASSALE Adjé Louis AJAX & JQuery 13
JQUERY
◼Quelques fonctions et familles usuelles
✓ Afficher/masquer un bloc
ASSALE Adjé Louis AJAX & JQuery 14
JQUERY
◼Quelques fonctions et familles usuelles
✓ Styles et attributs d’un bloc
✓
ASSALE Adjé Louis AJAX & JQuery 15
JQUERY
◼Quelques fonctions et familles usuelles
✓ Gestion des contenus textes
ASSALE Adjé Louis AJAX & JQuery 16
JQUERY
◼Quelques fonctions et familles usuelles
✓ Chargement de HTML et de Javascript externes
ASSALE Adjé Louis AJAX & JQuery 17
JQUERY
◼Quelques fonctions et familles usuelles
✓ Gestion des formulaires
ASSALE Adjé Louis AJAX & JQuery 18
JQUERY
◼Quelques fonctions et familles usuelles
✓ Interactivité à la souris
ASSALE Adjé Louis AJAX & JQuery 19
JQUERY
◼Quelques fonctions et familles usuelles
✓ Interactivité au clavier
ASSALE Adjé Louis AJAX & JQuery 20
JQUERY
◼Quelques fonctions et familles usuelles
✓ Événements de la page
ASSALE Adjé Louis AJAX & JQuery 21
JQUERY
◼Quelques librairies
• Forces de JQuery
✓ Dispose de fonctions très puissantes
✓ Communauté de développeurs
◼ Publication d’extensions pour certaines fonctionnalités compliquées
◼ Fonctionnalité fichier .js, parfois accompagné d’image, css, ou page php
✓ Recherche d’extension
◼ Peut se faire sur google , on tape : jquery suivi de ce qu’on désire
◼ Exemple : "jquery diaporama", "jquery scroll animé", etc…
• Sites de quelques librairies
✓ Gestion précise et animée du scroll
◼ [Link]
ASSALE Adjé Louis AJAX & JQuery 22
JQUERY
◼Quelques librairies
• Sites de quelques librairies
✓ Personnalisation des barres de scroll
◼ [Link]
✓ Diaporamas
◼ [Link]
✓ Diaporamas pleine-page
◼ [Link]
✓ Afficher images en grand format
◼ [Link]
✓ Grille qui s’adapte à la taille de à fenêtre
◼ [Link]
ASSALE Adjé Louis AJAX & JQuery 23
JQUERY
◼Quelques librairies
• Sites de quelques librairies
✓ Sites scrollables et animés dans tous les sens
◼ [Link]
◼ [Link]
✓ Typo en Javascript
◼ [Link]
✓ Injection d’animation Flash
◼ [Link]
✓ Grille adaptative, avec options de tri multiples
◼ [Link]
✓ Pixelliser des images en Javascript
◼ [Link]
ASSALE Adjé Louis AJAX & JQuery 24
JQUERY
◼Quelques librairies
• Sites de quelques librairies
✓ formulaire d’upload de fichiers via module JQuery
◼ [Link]
✓ Responsive WebDesign
◼ site qui s’adapte quelque soit la résolution d’écran
◼ [Link]
for-building-responsive-websites/
◼ [Link]
✓ Librairie permettant de faire de l’HTML5
◼ [Link]
◼ [Link]
◼ [Link]
mobile/examples/processing-and-js/ 25
JQUERY
◼Exemples
• Exemple 1 :
✓ Coloriage d’un texte avec code de couleur saisi dans une zone
✓ Le code en 2 fichiers : [Link] fichiers des méthodes
$(function() {
$('input#bouton').click(function (event){
//application, après le clic sur le bouton,
//de la couleur définie dans zone dont id=#zcouleur
//au texte de la division identifiée par #contenu
$("div#contenu").css("color",$("input#zcouleur").val());
});
}); 26
JQUERY
◼Exemples
• Exemple 1 :
✓ Le code en 2 fichiers : [Link] fichier html du programme
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple avec JQuery : coloriage</title>
<script type="text/javascript" src="[Link]"></script>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<h1>Exemple avec jQuery : coloriage</h1>
<hr/>
<div id="contenu">Ce texte doit s'afficher en couleur !</div>
<hr/>
ASSALE Adjé Louis AJAX & JQuery 27
JQUERY
◼Exemples
• Exemple 1 :
✓ Le code en 2 fichiers : [Link] fichier html du programme
<form action="">
code de couleur : <input type="text" name="zcouleur"
id="zcouleur" value"#FF0000" size="7" />
<input type="button" value="colorier" id="bouton" />
</form>
</body>
</html>
ASSALE Adjé Louis AJAX & JQuery 28
JQUERY
◼Exemples
• Exemple 2 : Ajax avec JQuery
✓ Manipulation de XMLHttpRequest en JQuery
◼ Opérations simplifiées : $.get(), $.post() et .load()
◼ Opération avec contrôle complet : $.ajax()
✓ Instructions $.get() et $.post()
◼ Récupération du contenu à une adresse via HTTP
◼ Avec envoi de données
◼ Et indication d’un gérant de la fin de l’échange (si aucune erreur)
◼ Appels :
◼ $.get(adresse, données, gérant), $.post(adresse, données, gérant)
◼ adresse : url du contenu – données : données dans un tableau
associatif, sinon null – gérant : fonction avec en paramètres le texte
du contenu reçu et libellé du résultat de l’échange en HTTP
29
JQUERY
◼Exemples
• Exemple 2 : Ajax avec JQuery
✓ Fichier 1 : [Link] du code Jquery
$(function () {
$('#f').submit( function() {
return false;
} );
$('#boutonfichier').click( function () {
charger( $('#zfichier').val() );
} );
$('#boutonurl').click( function () {
charger( $('#zurl').val() );
} );
$('#zurl').val([Link]);
});
ASSALE Adjé Louis AJAX & JQuery 30
JQUERY
◼Exemples
• Exemple 2 : Ajax avec JQuery
✓ Fichier 1 : [Link] du code Jquery
function resultatAjax(texte, etat) {
// traitement de la fin de l'echange via Ajax
// avec un message dans l'element #resultat
$('#resultat').append('<p>Résultat : ' + etat + '</p>’);
try {
$('#contenu').text(texte);
} catch(erreur) { // cas de Internet explorer
$('#contenu').html(texte);
}
}
ASSALE Adjé Louis AJAX & JQuery 31
JQUERY
◼Exemples
• Exemple 2 : Ajax avec JQuery
✓ Fichier 1 : [Link] du code Jquery
function charger(adresse) {
// chargement du texte issu de adresse dans l'element #contenu
// avec des messages dans l'element #resultat
$('#resultat').html('<p>Chargement de <strong>' + adresse
+ '</strong></p>’);
$.get(adresse, null, resultatAjax);
}
ASSALE Adjé Louis AJAX & JQuery 32
JQUERY
◼Exemples
• Exemple 2 : Ajax avec JQuery
✓ Fichier 2 : [Link] du code HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai avec Ajax et jQuery</title>
<style type="text/css"><!-- #contenu, #resultat { border: gray solid thin; padding:
0.5em; margin: 0.5em 0; }--></style>
</head>
<body>
<h1>Essai avec Ajax et jQuery</h1><hr />
<form action="" id="f">
<p>Fichier
<input type="file" name="zfichier" id="zfichier" size="80" />
<input type="button" value="Charger" id="boutonfichier" /></p>
<p>URL 33
JQUERY
◼Exemples
• Exemple 2 : Ajax avec JQuery
✓ Fichier 2 : [Link] du code HTML
<input type="text" name="zurl" id="zurl" size="90" value="" />
<input type="button" value="Charger" id="boutonurl" /></p>
</form>
<div id="resultat"></div>
<div><pre id="contenu"></pre></div>
<hr />
<address>Exemple adapté 2018</address>
<script type="text/javascript" src="[Link]"></script>
<script type="text/javascript" src="[Link]"></script>
</body>
</html>
ASSALE Adjé Louis AJAX & JQuery 34