Introduction à jQuery

19 octobre 2017 - : Javascript jQuery - : Pas de commentaire

Introduction à jQuery

jQuery a pour slogan « Write Less, do More » qui veut littéralement dire « Écrire moins, faire plus ».

Ce slogan, déroutant à priori, tient toutes ses promesses. Voici quelques explications.

jQuery, qu’est-ce que c’est ?

jQuery est une bibliothèque (librairie) dont le but premier est de simplifier l’écriture du Javascript, principalement pour tout ce qui touche au DOM (Document Object Model), en gros, le contenu du document HTML (Balises, classes et ID).

Utilisation de jQuery

Afin d’utiliser jQuery, la bibliothèque doit être insérée dans la page html.

Une mauvaise habitude veut que ce fichier soit inclus juste avant la balise </body>, afin qu’il soit chargé après tous les autres éléments de la page.

C’est une mauvaise pratique qui montre la méconnaissance du fonctionnement de jQuery à ceux qui l’utilisent.

Voici un exemple d’appel du fichier jQuery en local

<head>
    <!-- début du head -->
    <script src="js/jquery-3.2.1.min.js"></script>
	<!-- suite du head -->
</head>

Voici un exemple d’appel en utilisant un CDN (méthode recommandée pour un site en production)

<head>
    <!-- début du head -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- suite du head -->
</head>

Le sélecteur jQuery

La principale fonctionnalité de jQuery est le sélecteur. Celui-ci permet de sélectionner facilement les éléments du DOM, plus facilement qu’en Javascript, étant donné que la syntaxe utilisée est identique à celle du CSS.

Ainsi, pour sélectionner les éléments qui ont la classe « container » nous écrirons :

  • en Javascript
document.getElementsByClassName("container")
  • en jQuery
$(".container")

C’est quand même plus simple, non ?

Nous aurons bien sûr les équivalents pour les balises et les IDs

$("section") // Correspondra à document.getElementsByTagName("section")

$("#actus") // Correspondra à document.getElementByID("actus")

Les évènements

jQuery est utilisé, comme déjà indiqué, principalement pour manipuler le DOM.

Les évènements (click, scroll, focus…) sont une partie très importante de ces manipulations.

Afin de gérer ces évènements, il faut initialiser des écouteurs, qui se déclencheront uniquement lorsque les évènements qu’ils écoutent se produisent.

Ainsi, afin de surveiller un clic sur un bouton qui a l’ID « valid », par exemple, nous écrirons :

  • en javascript
document.getElementByID("valid").addEventListener("click",function(){ 
	//code à exécuter 
});
  • en jQuery
$("#valid").on("click",function(){ 
	//code à exécuter
});

// une variante
$("#valid").click(function(){
	//code à exécuter
});

La liste des évènements est disponible sur le site de jQuery.

Le chargement du DOM

Afin de mettre en place des écouteurs, il est nécessaire d’attendre que le DOM soit chargé. En effet, comment peut-on écouter un évènement sur un élément qui « n’existe pas ».

Il est donc nécessaire d’utiliser une fonctionnalité Javascript, réutilisée par jQuery, qui ne s’exécute qu’après le chargement du DOM.

Nous utiliserons donc les lignes suivantes :

  • En javascript
windows.onload = function(){
	// Code à exécuter après chargement du DOM
};
  • En jQuery
$(function(){
	// Code à exécuter après le chargement du DOM
});

// Variante trouvée régulièrement dans les Tutos
$(document).ready(function(){
	// Code à exécuter après le chargement du DOM
});

Parcourir le DOM

Il n’est pas nécessaire de pointer directement vers un élément du DOM pour le sélectionner.

En effet, dans certains cas, vous aurez à trouver le parent, l’enfant, ou l’élément situé après celui que vous avez sélectionné.

Voici une liste des différentes méthodes à notre disposition :

Méthode Description
.children() Retourne tous les enfants directs de l’élément sélectionné
.closest() Retourne le plus proche élément ancêtre de l’élément sélectionné
.eq() Retourne un élément avec un numéro d’index spécifique des éléments sélectionnés (commence à 0)
.filter() Filtre les éléments qui correspondent au sélecteur indiqué
.find() Recherche les éléments enfants qui correspondent au sélecteur
.first() Retourne le premier élément des éléments sélectionnés
.last() Retourne le dernier élément des éléments sélectionnés
.next() Retourne le frère suivant de chaque élément sélectionné, avec filtre (facultatif)
.not() Supprime les éléments qui ne correspondent pas au sélecteur
.parent() Retourne le parent direct, avec filtre (facultatif)
.parents() Retourne tous les éléments ancêtres de l’élément sélectionné
.siblings() Retourne tous les frères, avec filtre (facultatif)
.slice() Retourne les éléments se trouvant dans la plage d’indices indiquée (commence à 0)

Manipuler le DOM

jQuery nous propose de nombreuses méthodes permettant de manipuler le DOM, qui permettent d’ajouter, supprimer, cloner, remplacer… des éléments. Voici une partie de ces méthodes :

Méthode Description
.addClass() Ajoute un ou plusieurs noms de classe à des éléments sélectionnés
.after() Insère le contenu après les éléments sélectionnés
.append() Insère le contenu à la fin les éléments sélectionnés
.appendTo() Insère le contenu sélectionné à la fin les éléments sélectionnés
.attr() Définit ou retourne les attributs / valeurs des éléments sélectionnés
.before() Insère le contenu avant les éléments sélectionnés
.clone() Effectue une copie des éléments sélectionnés
.css() Définit ou retourne une ou plusieurs propriétés de style pour les éléments sélectionnés
.detach() Supprime les éléments sélectionnés (conserve les données et les événements)
.empty() Supprime tous les nœuds enfants et le contenu de l’élément sélectionné
.hasClass() Vérifie si l’un des éléments sélectionnés a un nom de classe spécifié
.height() Définit ou retourne la hauteur des éléments sélectionnés
.hide() Masque l’élément sélectionné (en le sortant du flux)
.html() Définit ou retourne le contenu des éléments sélectionnés
.innerHeight() Renvoie la hauteur d’un élément (y compris le padding, mais pas les border)
.innerWidth() Renvoie la largeur d’un élément (y compris le padding, mais pas les border)
.insertAfter() Insère des éléments HTML après les éléments sélectionnés
.insertBefore() Insère des éléments HTML avant les éléments sélectionnés
.offset() Définit ou retourne les coordonnées de l’offset (left et top) pour les éléments sélectionnés (en position relative dans le document)
.offsetParent() Retourne l’élément le premier parent positionné
.outerHeight() Renvoie la hauteur d’un élément (y compris le padding et les border)
.outerWidth() Renvoie la largeur d’un élément (y compris le padding et les border)
.position() Renvoie la position (par rapport à l’élément parent) d’un élément
.prepend() Introduire le contenu au début des éléments sélectionnés
.prependTo() Insère des éléments de HTML au début des éléments sélectionnés au format html
.prop() Définit ou retourne propriétés / valeurs des éléments sélectionnés
.remove() Supprime les éléments sélectionnés (y compris des données et des événements)
.removeAttr() Supprime un ou plusieurs attributs à partir d’éléments sélectionnés
.removeClass() Supprime une ou plusieurs classes à partir d’éléments sélectionnés
.removeProp() Supprime une propriété définie par la méthode prop()
.replaceAll() Remplace les éléments sélectionnés avec de nouveaux éléments HTML
.replaceWith() Remplace les éléments sélectionnés par un nouveau contenu
.scrollLeft() Définit ou retourne la position de la barre de défilement horizontale des éléments sélectionnés
.scrollTop() Définit ou retourne la position de la barre de défilement vertical des éléments sélectionnés
.show() Affiche l’élément sélectionné (et le réinsère dans le flux)
.text() Insére des éléments de HTML au début des éléments sélectionnés au format texte
.toggle() Bascule l’élément sélectionné entre affiché et masqué
.toggleClass() Bascule entre l’ajout / suppression d’une ou plusieurs classes à partir d’éléments sélectionnés
.unwrap() Supprime l’élément parent des éléments sélectionnés
.val() Définit ou retourne la value des éléments sélectionnés (pour les éléments de formulaire)
.width() Définit ou retourne la largeur des éléments sélectionnés
.wrap() Entoure d’un balisage HTML l’élément sélectionné
.wrapAll() Entoure d’un balisage HTML tous les éléments sélectionnés
.wrapInner() Entoure d’un balisage HTML le contenu de l’élément sélectionné

A suivre ?

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Laisser un commentaire