Une bibliothèque

Simplication de nombreuses opérations courantes

  • Manipulation de noeuds DOM
  • Programmation événementielle
  • Appels réseaux asynchrones

Doc extensive très bien faite

Utilisation

Une librairie est simplement un fichier javascript

  • accès à distance

    <script type="text/javascript"
        src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  • Ou en local

    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>

Concept

Un object encapsulant une collection d'objets DOM

Concept

  • Une fonction à tout faire: jQuery()
  • Notation: $()

Constructeurs

$(object DOM)

Encapsulation d'un élément DOM dans un objet jQuery

$(selecteur)

$("li")
Toutes les balises li la page
$(".className")
Tous les éléments de la classe className
$("#blah")
Une collection avec au plus un élément: celui avec id="blah"

Combinateurs

Si c est une collection jQuery

c.find("a")
Agrège tous les descendants de type <a>
c.add(qque chose)
Union de c et quelque chose
c.parent()
Collection des parents
c.children()
Collection des noeuds fils
c.siblings()
Collection de tous les noeuds frères
c.prev(), c.next()
Collection des noeuds frères juste avant ou juste après

Requêtes

Générales

c.length
Nombre d'éléments dans la collection
c.eq(i)
Le i-ème élément de la collection c

Prévu quand c contient un seul noeud de l'arbre DOM :

c.css("color")
Propriété CSS color
c.attr("href")
Valeur de l'attribut
c.text()
Le texte à l'intérieur de la balise
c.val()
Valeur (pour textarea, input et select)

Actions

Actions sur chacun des éléments de la collection

c.css("color","red")
Change la propriété CSS color
c.attr("href","blah")
Ajoute l'attribut href="blah"
c.text("du texte")
Change le texte
c.each(fonction)
Action générique chaque élément.
c.addClass("className")
Ajout de classe
c.removeClass("classN")
Suppression de classe

Note: c.css() peut prendre un objet en argument: 

c.css({color: "red", margin: "10pt"})

c.each()

$("h2").each(function(idx) { 
  // "idx" est l'index de l'élément dans la collection
  console.log(idx + " : " + $(this).text()); 
  // "this" est l'objet DOM courant. 
  // Ici on l'encapsule dans un object jQuery
});

Gestion de noeuds

Création avec ou sans attributs

  • $("<h1>")
  • $("<a>", { href : "http://www.centralesupelec.fr"})

Insertion

  • D'enfants : .append(newNode), .prepend(newNode)
  • De frères : .after(newNode), .before(newNode)

Remplacement, suppression

  • .replaceWith(newNode)
  • .remove(), .detach()

Évènements

Avec le nom de l'évènement

function maFonction(evt) {
    /* code à exécuter lorsque l'événement se produit
       L'object "evt" contient les données de l'évènement 
       (position de la souris, etc) */
});

objetJQuery.nomEvenement(maFonction);

On peut aussi utiliser une fonction anonyme

objetJQuery.nomEvenement(function(evt){
    // code à exécuter lorsque l'événement se produit
});

La liste est sur le site de l'API

Animations

.hide()
pour cacher un élément
.show()
pour... le montrer
.toggle()
pour le montrer si il était caché, et le cacher sinon

Les même avec des effets

  • .fadeOut() et .slideUp()
  • .fadeIn() et .slideDown()
  • .fadeToggle() et .slideToggle()

Composition

Un design très commun en javascript 

$("p")                 // sélectionne tous les paragraphes
  .find("strong")      // toutes les balises <strong> dedans
  .each(function(x) {  // action sur chacune de ces balises
      $(this).append(  // on ajoute un noeud à la fin
         $("<a>")                      // c'est une balise de lien
            .attr("href","www.lri.fr")    // avec un attribut
            .text(" [click]")             // et du texte
            .css({color: "green"})         // avec un style
      )
   });

Composition

Un design très commun en javascript 

$("section")   // sélectionne toutes les sections
  .find("h2")  // toutes les balises <h2> dedans
  .click(function(event) { // reaction au clic sur un titre 
      $(this)          // encapsulation de l'elt cliqué
        .siblings()    // on sélectionne les noeuds de même niveau
        .slideToggle() // et on les cache/montre
   });