Quelques bases en JQuery

Jquery est une bibliothèque Javascript, qui permet d'ajouter une dimension interactive à vos documents XHTML.

A la différence de PHP, Jquery est un lanage de script dit "côté client", c'est-à-dire que les fonctionnalités sont effectuées depuis le navigateur (sans avoir à passer par un serveur).

=> installer Firebug (add-on pour Firefox) pour voir ce que produit Jquery : http://getfirebug.com/

Quelques fonctionnalités possibles avec Jquery :

  • Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ;
  • Événements ;
  • Effets visuels et animations ;
  • Manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs…) ;
  • Utilisation d'Ajax ;
  • Utilisation de plugins ;
  • Utilitaires (version du navigateur web…)

 

Avant toute chose :

1) Inclure l'appel à Jquery dans l'entête de votre document (balises <head>) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2) Lier votre fichier de développement

<script src="js/mon_fichier.js"></script>

 

Quelques principes

Création du fichier .js

// lignes dans lesquelles insérer votre code, qui permet de charger le DOM du document et d'avoir accès aux noeuds

$(document).ready(function(){

    // Votre code Jquery

}) ;

Afficher une pop-up

    alert( "texte à afficher" );

Une instruction en Jquery a la forme :

$(sélecteur).méthode(paramètres);
Sélecteurs
On utilise la notion de sélecteur pour désigner l'objet XHTML sur lequel l'action va être effectuée.
 
1) Sélecteurs d'éléments XHTML
$( "p" ).css('color', 'red') ;
 
2) Sélecteurs d'identifiants
$( "#intro" ).css('color', 'red') ;
 
3) Sélecteurs de classes
$( ".bleu" ).css('color', 'red') ;
 
Action lors d'un clic
$("p").click(function(){
        console.log("Vous avez cliqué sur un paragraphe") ;
});

Cacher un élément
$("p").hide() ;
 
Montrer un élément
$("p").show() ;
 
Variables
var maVariable = $("p").val ; // récupère la valeur du noeud paragraphe

console.log(maVariable) ; // affiche le résultat dans la console de débogage

 

Manipulation du texte

$('p').html() ; // récupère le contenu des balises et du texte contenus dans <p>

$('p').text() ; // récupère uniquement le contenu textuel de <p>
 
Ajouter une classe
$("p").addClass("bleu");
 
Supprimer une classe
$("p").removeClass("italic") ;
 

Boucles

if(maVariable === "Sarra") {

    alert("ok") ;

}

else if(maVariable !== "Sarra") {

    alert("pas ok") ;

}

Pour créer une fonction

    function nom_de_la_fonction(variable){

           // code à effectuer

    }

Pour l'utiliser :   nom_de_la_fonction($maVariable) ;

    Autres fonctionnalités de JQuery : http://api.jquery.com/

     

    Les exercices du TP

    1. Créer un fichier XHTML validé par le W3C, qui contient plusieurs paragraphes et trois boutons.
    2. Créer un fichier .js.
    3. Faire en sorte d'afficher une pop-up avec un texte de bienvenue quand on charge le document XHTML.
    4. Définir une fonction qui affiche une pop-up quand on clique sur le premier bouton.
    5. Définir une fonction qui cache le deuxième paragraphe quand on clique sur le deuxième bouton.
    6. Définir une fonction qui change la couleur de texte du troisième paragraphe quand on clique sur le troisième bouton.
    7. Définir de nouveaux événements en utilisant la documentation : https://api.jquery.com/category/events/

    Jquery et l'autocomplétion

    1) Indiquer les fichiers liés au plugin d'autocomplétion de Jquery :

    <!-- JS file -->
    <script src="path/to/jquery.easy-autocomplete.min.js"></script> 
    
    <!-- CSS file -->
    <link rel="stylesheet" href="path/to/easy-autocomplete.min.css"> 
    
    <!-- Additional CSS Themes file - not required-->
    <link rel="stylesheet" href="path/to/easy-autocomplete.themes.min.css"> 

    2) Attribuer un identifiant à l'élément du formulaire qui aura cette fonction

    3) Créer un script .js avec la fonction easyAutocomplete, en prenant bien soin de définir les possibilités d'autocomplétion dans un tableau

    var mesOptions = {
    	data: ["Nantes", "Paris", "Toulouse"]
    };
    
    $("#monInput").easyAutocomplete(mesOptions);

    4) Il est aussi possible d'utiliser le format JSON :

     // villes.json
    [
      {"name": "Nantes", "identifiant": "1"}, 
      {"name": "Paris", "identifiant": "2"}, 
      {"name": "Toulouse", "identifiant": "3"}
     ]
    
    // monScript.js
    var mesOptions = {
    	url: "data/villes.json",
    
    	getValue: "name",
    
    	list: {
    		match: {
    			enabled: true
    		}
    	}
    };
    $("#monInput").easyAutocomplete(mesOptions);

    5) ou encore un fichier XML

    // villes.xml
    <?xml version="1.0" encoding="utf-8"?>
    <villes>
    	<ville id="1">
    		<nom>Nantes</nom>
        </ville>
        <ville id="2"> 
            <nom>Paris</nom>
        </ville>
        <ville id="3"> 
            <nom>Toulouse</nom>
        </ville>
      	...
    </villes>
    
    // monScript.js
    var mesOptions = {
    	url: "data/villes.xml",
    
    	dataType: "xml",
    	xmlElementName: "ville",
    
    	getValue: function(element) {
    		return $(element).find("ville").text();
    	},
    
    	list: {
    		match: {
    			enabled: true
    		}
    	}
    };
    
    $("#monInput").easyAutocomplete(options);

     

    Jquery et les formulaires - TP pas à pas

    1) On récupère les valeurs des différents champs du formulaire dans des variables à l'aide des identifiants HTML

    2) On créer une fonction verifier pour tester s'ils ont bien été remplis par l'utilisateur avec la fonction .val()

    3) Si ce n'est pas le cas, on annule le comportement d'envoi du formulaire du bouton Envoyer avec e.preventDefault();

    4) Et on affiche un message d'erreur (qui était caché avec .hide()) avec .show()

    5) On attribue une classe (définie dans la CSS associée) qui change la couleur de la police du nom du champ en question avec .addClass()

    => il est aussi possible d'utiliser des plugins, comme jqueryvalidation

    Pour aller plus loin