LE JQUERY EN DÉTAIL

Ce cours abordera principalement le lien entrenu entre le Javacript et la conception de sites web. Il s'inspire très largement de formations présentent en ligne sur le sujet.

Introduction

La librairie Jquery va principalement nous permettre d'écrirez moins de code pour obtenir le même résultat.

Exemple ce code nous renvoi le nombre de pixel verticaux présents dans la page web en écriture Javascript

Ici les librairie et Jquery dans notr cas ont un intérêt non-négligeable car elle synthétise certaines fonction souvent utilisées dans le développement web. Jquery est relativement conue mais il n'en existe de nombreuses autres. Même si elles sont toutes basées sur Javascript chacune d'elle à sa syntaxe et sa manière de fonctionner.

Voici donc comment on écrit la précédente fonction en Jquery :

function avoirDefilementVertical(){
return $(document).scrollTop();
}

Ça ne vous aura pas échappé, c'est plus simple.

Pour commencer à s'amuser

La première chose à faire est d'intégrer la librairie Jquery à notre page pour ce faire on peut soit télécharger le fichier Jquery.min.js sur notre serveur soit directement faire référence à son adresse en ligne comme indiqué ci-dessous ci-dessous :

L'ensemble du framework jQuery repose sur une seule fonction. C'est la fonction la plus importante du framework, vous devrez toujours l'utiliser dès qu'il s'agira de développer en jQuery. Cette fonction, c'est tout bêtement la fonction jQuery() !

Elle va servir tout simplement à dire : "Hop là ! A partir de maintenant, c'est du jQuery qu'il va y avoir". Sans cette fonction, le code jQuery peut ne pas être interprété correctement. C'est peut-être là une faiblesse qui n'en est pas une pour le framework : tout le code qu'on l'on va devoir écrire, on va devoir le faire au sein de cette fonction. 😎

Reprenons notre code de tout à l'heure et voyons comment appeler la fonction jQuery().

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test jQuery</title>
</head>
<body>
<p>On va bosser avec jQuery, c'est super !</p>

Décorticage :

Nous nous intéressons à la partie Javascript :

jQuery prend un argument. Ici, elle cible le "document", qui représente tout simplement votre document HTML sur lequel vous travaillez : votre page web.

jQuery(document)

La suite de ce code est vraiment très simple. Vous voyez que le prochain élément qui arrive, est l'événement ready. Cet événement se traduit simplement par "est prêt". Une fois que cet événement est vérifié, on lance une fonction anonyme dans laquelle on va placer notre jQuery.

Ainsi, cette ligne peut être traduite par : "quand le document HTML est prêt (sous-entendu, est chargé), lance une fonction qui contient le code jQuery."

Cette petite structure de rien du tout signifie vraiment beaucoup de choses : on attend simplement que la page HTML soit chargée avant de commencer à parler de jQuery. C'est LA structure que vous devrez utiliser dans 99% des cas pour coder en jQuery dans votre page. Retenez-la par cœur, parce que cela vous fera vraiment gagner du temps.

jQuery(document).ready(function(){
// notre code ici
});

Exercice | Vérification

Comment vérifier que l'ensemble de la page à bien été chargé ?

Servez-vous des précédentes possibilités étudier dans le JavaScript.

Comment cibler ?

Comme nous venons de le voir, le framework met en place une fonction dite principale. Le principe de fonctionnement de jQuery repose en fait entièrement sur celle-ci ! Autant dire que vous allez vous servir beaucoup plus du caractère $ (dollar) dès à présent !

Ainsi, pour agir avec les éléments d'une page web, on réalisera ce qu'on appelle couramment un « ciblage d'élément », qui représentera une balise, par exemple. On agira ensuite dessus grâce à des méthodes. Pour que vous ayez un aperçu, voici un code fictif tout simple usant du principe de jQuery :

$('monElement').maMethode();

Je cible dans un premier temps mon élément qui jouera le rôle d'objet, grâce à un sélecteur (chose que nous verrons plus en détails dans le prochain chapitre). Je peux ensuite agir dessus grâce à une méthode !

Une méthode en jQuery est une fonction un peu spéciale qui agira directement sur l'objet (ou l'élément ciblé, si vous préférez) indiqué. Le framework en possède beaucoup, mais il est possible de créer les nôtres ! Nous verrons cela dans un chapitre dédié, lorsque vous serez plus à l'aise avec jQuery.
Il est possible de chaîner les méthodes, c'est-à-dire que l'on peut en mettre plusieurs à la suite, pour agir sur l'objet en une seule fois.

$('monElement').premiereMethode().deuxiemeMethode();
/* la première méthode agit d'abord sur l'objet, avant la deuxième.
On a donc un ordre logique : les méthodes s'enclenchent les unes derrière les autres */

Manipuler le DOM (Document Object Model ) dynamiquement.

L'une des premières utilité du Javascript c'est de dynamiser les pages web et le Jquery permet en plus de faire ça très simplement. Prenons cet exemple :

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<div id="titre">J'aime les frites.</div>

</script>

</body>
</html>

Insérer les codes Jquery suivant au bon endroit :

$('#titre'); // Sélectionne notre balise mais ne fait rien.

alert($('#titre').html()); // Affiche le contenu "J'aime les frites."

$('#titre').html('Je mange une pomme'); // Remplace le contenu ("J'aime les frites.") par "Je mange une pomme".

$('#titre').html($('title').html()); // Remplace le contenu par le titre de la page (contenu dans la balise <title>).

Ce code permet d'jauter du contenu de façon encore plus précise.

// Ajoute du contenu après chaque balise textarea.
$('textarea').after('<p>Veuillez ne pas poster de commentaires injurieux.</p>');

// Ajoute "Voici le titre :" avant la balise ayant comme id "titre".
$('#titre').before('Voici le titre :');

// Ajoute "! Wahou !" après la balise ayant comme id "titre".
$('#titre').after('! Wahou !');

Attention notez bien :

Votre code Jquery doit toujours être entouré du code suivant, celui permet de vérifier que tous les éléments de la page ont bien été chargé avant d'exécuter le code, sans cela votre code risque de rencontrer des erreurs car des éléments seront manquants, car pas encore charger par le navigateur.

Ce code permet en réalité d'attendre le chargement des éléments de la page avant de lire votre contenu.

$(function(){
// On peut accéder aux éléments.
// $('#balise') marche.
});

Sélécteur CSS :

Ce que l'on vient de voir ne suffit pas pour vraiment tordre une page web comme on veut :

Voici donc les termes à utiliser pour sélectionner n'importe quel élément CSS du DOM

Expression	Retour
*``**	Toutes les balises.
`elem`	Les balises elem.
`#id`	Balise ayant l'id "id".
`.class`	Balises ayant la classe "class".
`elem[attr]`	Balises elem dont l'attribut "attr" est spécifié.
`elem[attr="val"]`	Balises elem dont l'attribut "attr" est à la valeur val.
`elem bal`	Balises bal contenues dans une balise elem.
`elem > bal`	Balises bal directement descendantes de balises elem.
`elem + bal`	Balises bal immédiatement précédées d'une balise elem.
`elem ~ bal`	Balises bal précédées d'une balise elem.

Ici l'ensemble des sélécteurs

ENTRAINEMENT | POUR BIEN COMPRENDRE

Copiez ce morceau de code

1 : <p id="premier_texte">
2 : <span class="texte">
Salut tout le monde
</span>
3 : <img src="photo_1.jpg" alt="Premiere Photo !" class="superimage" />
</p>
4 : <p>
5 : <img src="photo_2.gif" alt="Seconde Photo !" />
6 : <span class="texte">
ma Seconde Photo de Vacances !
</span>
</p>
7 : <img src="photo_3.jpg" style="display: none;" class="superimage" />

En lien avec ce que l'on vient de voir avec le précédent morceau de code voici comment on pourrait sélectionner les éléments.

Expression	Numéros des éléments sélectionnés
`#premier_texte .texte`	2.
`p > span`	2 et 6.
`span + img`	3.
`span > img`	Rien, car les balises img ne sont pas contenues dans les balises span.
`p`	1 et 4.
`img[src$=.jpg]`	3 et 7 (pas la 5 car l'attribut src se finit par .gif).
*`img[src=hoto]`**	3, 5 et 7 (car ils contiennent tous hoto (photo_ est en commun) dans leur attribut src).
`img:visible`	3 et 5.
`p ~ img`	7.
`p:first + img`	Rien, car aucune balise img ne suit directement la première balise p.
`:hidden`	7, car dans son attribut style, display est à none.
`img:hidden:not(.superimage)`	Rien, car la seule image non-visible a la classe superimage
`p:contains('Salut'):has(span)`	1, car contient "Salut" (dans le span) et une balise span.
`:not(html):not(body):even:not(img)`	2, 4 et 6 (les :not(html) et :not(body) évitent de récupérer ces balises, :even sélectionne les numéros pairs et le :not(img) ne change rien).

Variable Pratique

Expression

La variable selector d'un objet jQuery est l'expression utilisée, c'est-à-dire la chaîne de caractères qui représente le sélecteur passé en paramètre à la fonction $().
Son utilisation est donc $('p > span').selector par exemple et qui renvoie "p > span".

Nombre d'éléments

La variable length (longueur) d'un objet jQuery est le nombre d'éléments contenus dans cet objet jQuery, c'est-à-dire le nombre d'éléments trouvés par l'appel à la fonction $().
Son utilisation est donc $('img[src*=hoto]').length par exemple et qui renvoie dans le bout de code plus haut 3.

On peut alors détecter si un élément existe dans la page web :

Ce que l'on vient de voir ne suffit pas pour vraiment tordre une page web comme on veut :

Voici donc les termes à utiliser pour sélectionner n'importe quel élément CSS du DOM

if($('span').length > 0){
// Il y a un ou plusieurs span dans le document.
}
// Ou plus simplement :
if($('span').length){
// Il y a un ou plusieurs span dans le document.
}

// Et ceci donne la même informaton :
if($('span').size){
// Il y a un ou plusieurs span dans le document.
}

Les événements

Faites en sorte de créer le code permettant d'exploiter ces fonctions jQuery :

$("button").click(function(){
       $("button").addClass("red");
});

Voici les différents types d'événement souris en Jquery

`click()`	Clic gauche
`dblclick()`	Double-clic
`mousedown()`	Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l'élément
`mouseenter()` ou `mouseover()`	Début de survol de l'élément
`mouseleave()` ou `mouseout()`	Arrêt de survol de l'élément
`mousemove()`	Déplacement du pointeur au-dessus de l'élément
`mouseup()`	Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l'élément
`scroll()`	Utilisation de la roulette alors que le pointeur se trouve au-dessus d'un élément concerné par ce type d'événement

Et voici un petit code d'exemple pour bien comprendre l'interaction au clic.

<!DOCTYPE html>
<html>
<head>

// Affichage de la première image en (100, 100)
var p = $('#target').offset();
p.top=100;
p.left=100;
$('#target').offset(p);

// Gestion du clic et déplacement de l'image
$("#target").click(function() {
x = Math.floor(Math.random()*largeur);
y = Math.floor(Math.random()*hauteur);
var p = $('#target').offset();
p.top = y;
p.left = x;
$('#target').offset(p);
});
});
</script>
</body>
</html>

EXERCICE | LE CHAT ET LA SOURIS

Modifier le code pour que l'image se déplace dès que la souris arrive dans l'image.

Le cas des formulaires

Pour exploiter la pleine puissance des très nombreux sélecteurs de jQuery, il faut se pencher sur les formulaires en HTML. En effet, l'interaction étant beaucoup plus présente à ces endroits, il est logique que le framework soit plus enclin à les dynamiser. Ainsi, la sélection des éléments de formulaire se fera d'une façon un peu différente, que nous allons commencer à traiter tout de suite.

Le type des éléments

Comme vous le savez surement, les éléments de formulaire peuvent changer de type selon ce que l'on veut en faire. La balise ne change pas et reste la même, on utilisera dans 90% des cas <input />. En changeant l'attribut type de la balise, il est possible de spécifier que l'on veut une case à cocher, un champ de texte, un bouton...

Suivant ce principe, on pourrait penser qu'il faut faire ceci en jQuery :

$('input:button'); // on sélectionne un input de type button

Il se décline ensuite pour tout les types de inputs.

Type	Code
text (Texte)	`input:text`
password (Mot de passe)	`input:password`
file (Fichier)	`input:file`
checkbox (Case à cocher)	`input:checkbox`
radio (Bouton radio)	`input:radio`
button (Bouton normal)	`input:button`
submit (Bouton d'envoi)	`input:submit`

État des éléments

Dernière petite astuce, vous pouvez établir une sélection suivant l'état des éléments d'un formulaire. Vous allez nous répondre qu'il n'y a pas trente-six états, justement, et vous avez effectivement raison. Neanmoins, ce sont des sélecteurs que nous retrouverons assez souvent, et nous pensons qu'il est intéressant de les connaître.

Ainsi, vous pouvez vérifier qu'une case est cochée, ou qu'un élément est activé/désactivé, grâce aux sélecteurs suivants :

:checked vérifie qu'une case est cochée ;
:disabled cible les éléments désactivés ;
:enabled fait le contraire, il sélectionne les éléments activés.

Le sélecteur $(this)

Le sélecteur le plus spécial est sans aucun doute $(this). Dans la plupart des langages orientés objet, le mot-clé this représente l'objet courant, celui qui est actuellement traité par une fonction, par exemple. jQuery permet la sélection de cet objet.

Exemple avec ce code qui traite chaque élément trouvé :

$('p').each(function(){

$(this).html('Hello World !'); // $(this) représente le paragraphe courant

});

Animation

<!DOCTYPE html>
<html>
<head>

</body>
</html>

Interaction Drag

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

</body>
</html>

Interaction Drag an Drop

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Droppable - Default functionality</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" href="/resources/demos/style.css">

<style>

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$( function() {

$( "#draggable" ).draggable();

$( "#droppable" ).droppable({

drop: function( event, ui ) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

} );

</script>

</head>

<body>

<div id="draggable" class="ui-widget-content">

<p>Drag me to my target</p>

</div>

<div id="droppable" class="ui-widget-header">

<p>Drop here</p>

</div>

</body>

</html>

Interaction Accordéon

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Accordion - Default functionality</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" href="/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$( function() {

$( "#accordion" ).accordion();

} );

</script>

</head>

<body>

<div id="accordion">

<h3>Section 1</h3>

<div>

<p>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer

ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit

amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut

odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

</p>

</div>

<h3>Section 2</h3>

<div>

<p>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet

purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor

velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In

suscipit faucibus urna.

</p>

</div>

<h3>Section 3</h3>

<div>

<p>

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.

Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero

ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis

lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

</p>

<ul>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul>

</div>

<h3>Section 4</h3>

<div>

<p>

Cras dictum. Pellentesque habitant morbi tristique senectus et netus

et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

mauris vel est.

</p>

<p>

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

inceptos himenaeos.

</p>

</div>

</body>

</html>

Toggle class

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Effects - toggleClass Demo</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" href="/resources/demos/style.css">

<style>

.toggler { width: 500px; height: 200px; position: relative; }

#button { padding: .5em 1em; text-decoration: none; }

  #effect {position: relative;  width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }

  .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }

</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$( function() {

$( "#button" ).on( "click", function() {

$( "#effect" ).toggleClass( "newClass", 1000 );

});

} );

</script>

</head>

<body>

<div class="toggler">

<div id="effect" class="newClass ui-corner-all">

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.

</div>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

</body>

</html>

Ressource pour jQuery UI

Manipuler le CSS et devenir le maître du monde de la page web

Une méthode puissante : css()

Parmi les nombreuses méthodes de jQuery, il en est une que vous utiliserez très souvent en ce qui concerne la modification du style de vos pages. Il s'agit de la méthode au nom très éloquent :css().

Récupérer la valeur d'une propriété

La méthodecss() peut prendre plusieurs sortes d'arguments. Le plus simple est de spécifier le nom de la propriété, afin de récupérer sa valeur. Imaginez que vous ayez un paragraphe dont le texte est de couleur verte. Pour récupérer cette donnée, vous devrez faire ceci en jQuery :

$('p').css('color'); // ma méthode ira chercher la valeur de la propriété "color" et retournera "green"

Utilisez la base de code ci-dessous et faites une alerte affichant la couleur de la balise <p>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test jQuery</title>
</head>
<style> p{color:green;}</style>
<body>
<p>Hello</p>

</script>
</body>
</html>