Pré-requis

Avoir suivi le mini-cours consacré au HTML
Avoir suivi le mini-cours consacré au CSS
Avoir suivi le mini-cours consacré au JavaScript
Avoir suivi le mini-cours "JavaScript pour Pro"

mini-cours de jQuery

jquery.min.js (92 Ko), comme w3.js (13 Ko), tient en un seul fichier JS, sert à faire des "effets" et le mini-cours tient en cette seule page web.

Tout le code jQuery se trouve dans une seule fonction !

jQuery(function(){
   ...
});

jQuery(function(){ ... === jQuery(document).ready(function($){ ...

Principe général :

Cibler l'élément HTML qui devient un objet sur lequel on applique une méthode.

$('elementChoisi').methode();

Comme en CSS, l'élément HTML est ciblé via des sélecteurs.
Autres sélecteurs : *, [attribut], balise.class, ...
Les sélecteurs CSS sont encadrés par des guillemets (") ou des apostrophes(')
this est un mot-clé JS (non encadré) qui représente l'élément HTML/ objet JS lui-même.

nom de balise
```
$('nom_balise').methode();
```
nom de classe
```
$('.nom_classe').methode();
```
nom d'identifiant
```
$('#nom_identifiant').methode();
```

Comme en CSS, il existe d'autres sélecteurs.

Les actions peuvent se suivre.

$('elementChoisi').premiereMethode().deuxiemeMethode();

Ma première méthode agit sur l'objet, avant la deuxième.

Placer ses fonctions JQuery dans un fichier JS externe permet de les réutiliser dans d'autres pages web. Ces noms de fonctions peuvent être préfixées : jq_

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="my_jQueryFunctions.js"></script>
  </body>
</html>

Voir les événements

Propre à ce frameworks (et à w3.js), l'événement hover est la combinaison de deux événements JS (mouseenter et mouseleave). La méthode hover() peut contenir deux paramètres.

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

La méhode on() permet de lier un ou plusieurs événements à un élément.

$("p").on("click", function(){
  $(this).hide();
});

Lorsque la méthode on() traite un seul événement, on utilise deux paramètres. Le premier est le nom de l'événement entre guillemets

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

Lorsque la méthode on() traite plusieurs événements, on utilise un seul paramètre. Ce paramètre se présente sous la forme d'un ensemble contenant des couples nom-événement : fonction(){...}. Chaque couple est séparé par une virgule. L'ensemble des couples est encadré par des accolades : { couples }. Le paramètre est donc un objet JS.

.hide(), .show(), .toggle()

La méthode .show() fait apparaître brusquement l'objet auquel elle s'applique. Si la zone HTML a disparu, La méthode .toggle() l'a fait apparaître; et, inversement.

  $("#bouton1").click(function(){
    $("#pre1").toggle(3000);
  });

$(selector).method(speed,callback);

speed vaut "slow", "fast" ou x en millisecondes,
callback = nom de la fonction exécutée après.

En w3.js, on ne peut définir ni le temps, ni une callback.

.fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo()

La méthode .fadeIn() fait apparaître, en changeant l'opacité de l'objet auquel elle s'applique. Si la zone HTML a disparu, La méthode .fadeToggle() l'a fait apparaître; et, inversement.

  $("#bouton2").click(function(){
    $("#pre2").fadeToggle(3000);
  });

$(selector).method(speed,callback);

speed vaut "slow", "fast" ou x en millisecondes,
callback = nom de la fonction exécutée après.

$(selector).fadeTo(speed,opacity,callback);

speed vaut "slow", "fast" ou x en millisecondes,
opacity vaut entre 0 et 1 (par exemple 0.5)
callback = nom de la fonction exécutée après.

En w3.js, de telles méthodes n'existent pas. Toutefois, en w3CSS, il existe la class w3-animate-fading qui fait passer l'opacité de l'élément de 0 à 1, et inversément, toutes les 10 secondes. Quant à la class w3-animate-opacity, elle fait passer l'opacité de l'élément de 0 à 1, en 1,5 secondes. Il existe d'autres animations.

.slideDown(), .slideUp(), .slideToggle()

La méthode .slideDown() fait apparaître, en agrandissant vers le bas, l'objet auquel il est appliqué. La méthode .slideUp() le fait disparaître, en le rétrécissant vers le haut.

  $("#bouton3").click(function(){
    $("#pre3").slideToggle(3000);
  });

$(selector).method(speed,callback);

speed vaut "slow", "fast" ou x en millisecondes,
callback = nom de la fonction exécutée après.

.animate()

La méthode .animate() permet d'animer des zones, en modifiant ses propriétés CSS.

Avec des valeurs relatives, re-cliquer sur le bouton .animate() relance l'animation avec les valeurs définies lors de l'arrêt.

    var pre4 = $("#pre4");
    pre4.animate({width: '-=200px'}, "slow");
    pre4.animate({height: '+=150px', opacity: '0.5'}, "slow");
    pre4.animate({fontSize: "2em"}, "slow");
    pre4.animate({width: 'toggle'},"slow");
    pre4.animate({width: 'show'},"slow");
    pre4.animate({fontSize: '1em', opacity: '1'},"slow");
    pre4.animate({height: '-=150px', width: '+=200px', fontSize: '1em', opacity: '1'},"slow");

$(selector).method({params},speed,callback);

{params}, obligatoire, contient des définitions CSS
speed vaut "slow", "fast" ou x en millisecondes,
callback = nom de la fonction exécutée après.

{params} est un objet JS, contenant des couples clé:valeur
Chaque couple est séparé par une virgule
Chaque clé est le nom d'une propriété CSS, écrit au format camel (paddingLeft au lieu de padding-left)
Chaque valeur est entre apostrophes (ou guillemets)
Une valeur peut être absolue, relative (+=...); ou être : show, hide, toggle

Dans une animation, nativement, jQuery ne modifie pas les couleurs. Toutefois, des plug-ins existent.

.stop()

La méthode .stop() permet d'arrêter l'animation ou l'effet en cours. Cette méthode prend deux paramètres facultatifs valant false par défaut.

Si le premier paramètre vaut true, toutes les animations ou effets de l'objet affecté seront aussi arrêtés.

Si le second paramètre vaut true, l'animation ou effet en cours est immédiatement terminée.

Callback functions

Une fonction callback est exécutée après que l'effet en cours (qui prend du temps) soit totalement terminé.

Effet souhaité. Faire disparaître ce paragraphe, lentement. Puis, afficher un message indiquant que le paragraphe a disparu. Puis, le faire réapparaître.

$("#bouton8").click(function(){
    $("#effet1").slideUp(5000, function(){
      alert("Le paragraphe a disparu !"); /* après que le paragraphe ait disparu */
      $("#effet1").show();
    });
  });

  $("#bouton9").click(function(){
    $("#effet1").slideUp(5000);
    alert("Le paragraphe a disparu !"); /* avant que le paragraphe ait disparu */
    $("#effet1").show(); /* Le paragraphe se réaffiche, mais a continué à disparaître */
  });

  $("#bouton10").click(function(){
    $("#effet1").show();
  });

Actions en chaîne

Pour enchaîner les actions/méthodes sur un même élément, il suffit de les ajouter.

Enchaîner = exécuter les actions les unes après les autres. L'action suivante est exécutée après que l'action précédente soit terminée.

/*$("#bouton11").click(function(){
    $("#effet2").slideUp(3000).slideDown(3000).slideUp("slow").slideDown("slow").slideUp("fast").slideDown("fast");
  });*/

  /* Le code ci-dessus peut aussi être écrit comme suit : */
  $("#bouton11").click(function(){
    $("#effet2").slideUp(3000).slideDown(3000)
    .slideUp("slow").slideDown("slow")
    .slideUp("fast")
    .slideDown("fast");
  });

.text(), .html(), .val() et .attr()

La méthode .text() retourne le texte de l'élément sélectionné, la méthode .html() le code HTML, .val() la valeur d'un champ et .attr("nom_attribut") la valeur de l'attribut.

  $("#xxx").text()
  $("#xxx").html()
  $("#xxx").val()
  $("#xxx").attr("nom_attribut")

La méthode .text("new text") définit le nouveau texte de l'élément sélectionné, la méthode .html("new code") le nouveau code HTML, .val("new value") la nouvelle valeur d'un champ et .attr("nom_attribut", "new value") la nouvelle valeur de l'attribut.

  $("#xxx").text("new text")
  $("#xxx").html("new code")
  $("#xxx").val("new value")
  $("#xxx").attr("nom_attribut","valeur_attribut")
  $("#xxx").attr({"nom1":"valeur1","nom2":"valeur2"})

La méthode .attr() peut recevoir un objet JS contenant des couples de clé/valeur; la clé et la valeur étant entre guillemets ou apostrophes; la clé et la valeur étant séparées par deux points; les couples étant séparés par une virgule et encadrés par des accolades.

Plus d'info sur attr()

Les méthodes .text(), .html(), .val() et .attr() peuvent aussi recevoir une fonction anonyme comme paramètre. Voir la documentation jQuery.

.append(), .prepend(), .after() et .before()
.empty() et .remove()

Pour rappel, certaines balises HTML peuvent avoir un contenu, placé entre la balise entrante et la balise fermante. Les balises auto-fermantes (<img />, <input />, ...)n'ont pas de contenu.

La méthode .append() ajoute du texte ou du code HTML à la fin du contenu actuel. La méthode .prepend() réalise cet ajout au début.

Ces deux méthodes n'ont pas de sens avec des balises auto-fermantes.

La méthode .after() ajoute du texte ou du code HTML après la balise sélectionnée. La méthode .before() réalise cet ajout avant.

La méthode .empty() supprime le contenu de la balise sélectionnée.

Cette méthode n'a pas de sens avec des balises auto-fermantes.

La méthode .remove() supprime la balise sélectionnée.

contenu

  $("#btn12").click(function(){
    $("#ajouts").append("append");
  });

  $("#btn13").click(function(){
    $("#ajouts").prepend("<b>prepend</b>");
  });

  $("#btn14").click(function(){
    $("#ajouts").after("<b>after</b>");
  });

  $("#btn15").click(function(){
    $("#ajouts").before("<p>before</p>");
  });

  $("#btn16").click(function(){
    $("#ajouts").empty();
  });

  $("#btn17").click(function(){
    $("#ajouts").remove();
  });

  $("#btn18").click(function(){
    $("#div_ajouts").empty();
    $("#div_ajouts").append("<p id='ajouts'><mark>contenu</mark></p>");
  });

Les quatre premières méthodes peuvent avoir un paramètre qui n'est pas une string. De plus, elles peuvent avoir plusieurs paramètres. Plus d'info : .append(), .prepend(), .after(), .before(),

La différence entre les méthodes .empty() et .remove() n'est pas toujours "visible". Toutefois, ci-dessous, si on clique dans l'ordre sur les boutons "restaurer", .empty(), .append(), le mot "append" apparaîtra. Mais, si on clique dans l'ordre sur les boutons "restaurer", .remove(), .append(), le mot "append" n'apparaîtra pas.

Plus d'info : .empty(), .remove()

.addClass(), .removeClass() et .toggleClass()

La méthode .addClass() ajoute une ou plusieurs classes (séparées par un espace) à une ou plusieurs sélections (séparées par une virgule). La méthode .removeClass() les supprime. La méthode .toggleClass() les ajoute si elles y étaient absentes ou les supprime si elles y étaient présentes.

$("h1, h2, p").addClass("blue important");

.css()

La méthode .css() retourne, pour l'élément sélectionné, la valeur de la propriété dont le nom est passé en paramètre : .css("propertyname")

Ce nom de propriété CSS n'est pas écrit en camelCase

$("p").css("background-color");

La méthode .css() met à jour, pour l'élément sélectionné, la valeur de la propriété dont le nom est passé en premier paramètre avec la valeur passée en second paramètre : .css("propertyname", "value")

$("p").css("background-color","blue");

Il est également possible de mettre à jour plusieurs propriétés (via un objet) : .css({"propertyname":"value","propertyname":"value",...})

.width(), .height(),
.innerWidth(), .innerHeight()
.outerWidth(), .outerHeight()

Les méthodes .width() et .height() retourne ou met à jour la largeur ou hauteur de l'élément sélectionné.

Les méthodes .innerWidth() et .innerHeight() retourne la largeur ou hauteur, incluant le padding, de l'élément sélectionné.

Les méthodes .outerWidth() et .outerHeight() retourne la largeur ou hauteur, incluant le padding et l'épaisseur de la bordure, de l'élément sélectionné.

Les méthodes .outerWidth(true) et .outerHeight(true) retourne la largeur ou hauteur - incluant le padding, l'épaisseur de la bordure et les marges - de l'élément sélectionné.

  $("#btn19").click(function(){
    var txt = "";
    txt += "Document width/height: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/height: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
  });

Pré-requis

mini-cours de jQuery

.hide(), .show(), .toggle()

.fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo()

.slideDown(), .slideUp(), .slideToggle()

.animate()

.stop()

Callback functions

Actions en chaîne

.text(), .html(), .val() et .attr()

.append(), .prepend(), .after() et .before() .empty() et .remove()

.addClass(), .removeClass() et .toggleClass()

.css()

.width(), .height(), .innerWidth(), .innerHeight() .outerWidth(), .outerHeight()

Liens

.append(), .prepend(), .after() et .before()
.empty() et .remove()

.width(), .height(),
.innerWidth(), .innerHeight()
.outerWidth(), .outerHeight()