Durant mon Bachelor 2 Informatique, j’ai utilisé le Framework jQuery. En plus, des cours dispensées au sein de ma formation, j’ai suivi le parcours Maîtriser l’utilisation des librairies jQuery et jQuery UI, disponible sur LinkedIn Learning, dont voici le deuxième cours.
Les sélecteurs de jQuery
$('*:not(.un)','.b').css("font-style","italic") // Sélectionne tous les élèments sauf ceux ayant la classe 'un' au sein de la classe 'b'
$('h1,h2,p:not(.un)','.b,.a').css("font-style","italic") // Sélectionne tous les titres de niveau 1 & 2, ainsi que les paragraphes qui ne sont pas de la classe 'un' au sein des classes 'a' et 'b'.| Sélecteur d’attribut | Exemple | Explication |
|---|---|---|
| [attribute] | $('a[class]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les titres ayant une classe, même si celle-ci est vide. |
| [attribute=value] | $('a[class="a"]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les titres ayant une classe ‘a’ seulement |
| [attribute!=value] | $('a[class!="a"]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les éléments qui n’ont pas la classe ‘a’ seulement |
| [attribute$=value] | $('a[href$=".pdf"]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les éléments dont le href se termine par la chaîne « .pdf » |
| [attribute|=value] | $('a[class|="a"]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les éléments dont la classe est ‘b’, ou commence par ‘b’ suivit d’un ‘-‘ |
| [attribute^=value] | $('a[href^="f"]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les éléments dont le href commence par la lettre f |
| [attribute~=value] | $('a[class~="a"]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les titres ayant au moins la classe ‘a’ |
| [attribute*=value] | $('a[class*="activ"]').css("background-color","rgba(178,89,0,0.22)") | Sélectionne tous les éléments dont la classe contient la chaîne ‘activ’ |
$('a:not([class~="a"])').css("background-color","rgba(178,89,0,0.22)") //Sélectionne tous les éléments qui n'ont pas la classe 'a' au moins
$('a[class="a"][href$".pdf"]').css("background-color","rgba(178,89,0,0.22)") // Sélectionne tous les éléments dont la classe est 'a' et le href finit par '.pdf'L’objet window correspond à la fenêtre une fois que tous les éléments, y compris les médias, sont chargés. Elle contient donc l’objet document qui correspond à la structure HTML du document. Du fait de cette hiérarchie, c’est document qui est chargé en premier puis window (on doit calculer tous les éléments de window individuellement avant de pouvoir faire un rendu de la fenêtre dans son ensemble).
Si this est appelé avec un pointeur, il est ciblé sur l’objet qui l’appel. Sinon this cible son endroit de définition. On peut envoyer un contexte par paramètre et l’utiliser dans une fonction.
$(document).ready(function(e) {
//console.log(this) // this = document
//message()
$('p').on("click",function(){
//console.log(this) //this = <p></p>
//message() //this = window
//manager.message() //this=object
manager.message.call(this) //On envoit le conexte actuel (paragrahe) à la fonction avec .call, le this en sortie = <p></p>
})
//$('p').on("click",message) //this=<p></p>
//$('p').on("click",manager.message) //this = <p></p>
});
function message(){
console.log(this)
}On différencie $(this) qui est la syntaxe jQuery et this qui est la syntaxe JavaScript.
On peut utiliser de manière identique les instances jQuery $() et $. En effet, la seule différence est que $() permet de passer des éléments en faisant des calculs à la volée en fonction de contexte. Le contexte de base pour le $ correspond à celui où il est appelé.
var xml = '<balise><item>a</item><item>b</item></balise>'
$('item',xml).each(function(index, element) {
//console.log(index + " : " + $(element).text())
console.log(index + " : " + $(this).text())
});$.each([52, 97, "coucou"],function(index, value){
console.log(index + " : " + value)
})Naviguer dans les contenus
Les méthodes .nextAll et .prevAll permettent de cibler les éléments du même niveau, respectivement après et avant l’élément de référence.
$('p.a').nextAll().css("font-style","italic")
$('p.a').prevAll().css("font-style","italic")Les méthodes .nextUntil et .prevUntil fonctionne de manière identique, mais définissent une limite à la sélection.
$('p.a').nextUntil('q').css("font-style","italic") // Sélectionne tous les éléments de même niveau jusqu'à rencontrer une balise de sitation courte.
$('p.a').nextUntil('q.c').css("font-style","italic") // Sélectionne tous les éléments de même niveau jusqu'à rencontrer une balise de sitation courte de classe c.L’instruction .parent permet de cibler directement le conteneur immédiat de l’élément désigné. Il est possible de contextualiser ce ciblage : on peut dire que l’on prend l’élément parent seulement s’il correspond à une règle de sélection.
$('strong').parent('q').addClass("surbrillance") //Sélectionne le parent seulement s'il s'agit d'une citation courte.
$('strong').parent().addClass("surbrillance") //Sélectionne le parent et ajoute la classe au parent.L’instruction .parents permet de cibler tous les parents de l’élément dans toutes la hiérarchie. Il est également possible de contextualiser le ciblage.
$('strong', 'p.a').parents('section').addClass("surbrillance")
$('strong', 'p.a').parents('html').addClass("surbrillance")L’instruction .closest permet de récupérer le parent le plus proche correspondant à un sélecteur spécifique.
$('strong', 'p.a').closest('section').addClass("surbrillance")$('h1',$('p.a').parents('article')).addClass("surbrillance") // Permet de sélectionner les titres de niveaux 1 de tous les paragraphes de classe 'a' ayant pour parent direct un article.La fonctionnalité .find nous permet de rechercher un élément au sein des enfants du contexte actuel. Lors de la descente dans les éléments enfants, il suffit d’utiliser .end pour retourner au parent du contexte actuel.
$('article')
.find('p.a')
.addClass('encadre')
.find('strong')
.addClass('surligne')
.append('™')
.find('em')
.css("font-weight","normal")
.end()
.end()
.css("background-color","rgba(0,76,102,0.25)")
.end()
.addClass("colore")La méthode .filter permet de sélectionner des élément du même niveau au sein du même ensemble. On utilise .end pour sortir du contexte du filtre et revenir au contexte parent.
$('article')
.find('p')
.addClass('encadre')
.filter('.a')
.addClass("colore")
.end()
.filter(function(){
return $(this).text().indexOf("Ut ") == 0 //Permet de voir si le texte d'un paragraphe commence par 'Ut '
}).addClass('surligne')Manipuler les contenus
//Récupération du data info en JavaScript pur
console.log(e.target.dataset.info)
console.log(e.target.dataset['info'])
console.log(e.target.getAttribute('data-info'))
//Récupération du data info avec jQuery
console.log($(this).data('info'))
console.log($(this).data().info)
console.log($(this).attr('data-info'))Il y a une différence entre la récupération par attribut et par data. En effet, l’utilisation de data permet une modification de l’information du data qui n’est pas récupérable avec attribut, sauf si on modifie directement le DOM.
var recup = $(this).data('info')
console.log("data : " + recup)
console.log("attr : " + $(this).attr('data-info'))
$(this).data('info','déjà visité')data : Introduction attr : Introduction On effectue un deuxième click data : déjà visité attr : Introduction
Il est possible de modifier le <head> d’un fichier HTML autant que de modifier le <body>.
$(document).ready(function(e) {
$('#cible').load('403-04-41.html', finCharge) // On charge le fichier '403-04-41.html' au sein de la cible mais avant on envoit le contenu du fichier à la fonction finCharge
});
function finCharge(arg){
alert(arg) // Ici arg a pour valeur le fichier qui a été chargé
}Ajax est une méthode utilisant différentes technologies ajoutées aux navigateurs web entre 1995 et 2005, et dont la particularité est de permettre d’effectuer des requêtes au serveur web et, en conséquence, de modifier partiellement la page web affichée sur le poste client sans avoir à afficher une nouvelle page complète. Cette architecture informatique permet de construire des applications Web et des sites web dynamiques interactifs. Ajax est l’acronyme d’asynchronous JavaScript and XML : JavaScript et XML asynchrones. Ajax combine JavaScript et DOM, qui permettent de modifier l’information présentée dans le navigateur en respectant sa structure, les API Fetch et XMLHttpRequest, qui servent au dialogue asynchrone avec le serveur Web ; ainsi qu’un format de données (XML ou JSON), afin d’améliorer maniabilité et confort d’utilisation des applications internet riches. XML, cité dans l’acronyme, était historiquement le moyen privilégié pour structurer les informations transmises entre serveur Web et navigateur, de nos jours le JSON tend à le remplacer pour cet usage.
Wikipédia
$.ajax() permet de charger un document avec plus de spécificités, notamment car l’appel se fait avec plus de paramètres:
- url: l’URL du fichier à charger;
- success: callback invoquée lorsque le chargement s’effectue sans problème;
- il existe beaucoup d’autre paramètres disponible dans l’API de documentation.
Gérer les évènements
Lorsque l’on crée un événement avec $.on(), on associe un événement avec une fonction. On peut avec $.off() retirer cette association, soit pour toutes les fonctions soit pour celles que l’on spécifie.
$(document).ready(function() {
//$(this).on("keydown keyup", fctAppel) // On assoice l'appui et la relache d'une touche à 'fctAppel'
$(this).on("keydown", fctAppel1)
$(this).on("keydown", fctAppel2)
$(this).on("click", fctAppel3)
});
function fctAppel(){
//$(this).off("keydown") // On retire tous les événements associés à l'appui d'une touche
console.log("touche appuyée")
}
function fctAppel1(){
console.log("fonction 1")
}
function fctAppel2(){
console.log("fonction 2")
}
function fctAppel3(){
$(this).off("keydown", fctAppel1) // On retire l'événement qui associe l'appui d'une touche avec 'fctAppel1'
}Il est intéressant d’utiliser des identificateurs qui permettent d’utiliser des fonctions anonymes avec le couple .on() /.off. Il prend la forme de event.fctName, où event correspond à l’action effectué (appui d’un touche, clic de souris) et fctName au nom de l’identifiant en lui-même utilisé par .off()
$(this).on("keydown.fctAppel1", function (){
console.log("touche appuyée 1")
})
$(this).on("keydown.fctAppel2", function (){
console.log("touche appuyée 2")
})
$(this).on("click", fctAppel)Il existe plusieurs manière d’imbriquer des événements : du conteneur vers le contenant et du contenant vers le conteneur. C’est cette dernière technique qui est utilisé par jQuery, on l’appelle également le bubbling. Dans l’exemple suivant, si on clique sur un <strong>, l’événement va déclencher l’événement dans la fonction correspondante pour strong, puis p et enfin article. La propagation peut être arrêter avec un e.stopPropagation() où ‘e’ est l’événement.
$('article').on('click',fctArticle)
$('p').on('click',fctP)
$('strong').on("click",fctStrong)
function fctArticle(e){
console.log("article")
}
function fctP(e){
e.stopPropagation()
console.log("p")
}
function fctStrong(e){
console.log("strong")
}Sources
- Cours « jQuery : Gestion des évènements, sélecteurs et contenus » sur Linkedin Learning
- Cursus d’apprentissage « Maîtriser l’utilisation des librairies jQuery et jQuery UI » sur Linkedin Learning
- Tableau de référence des selecteurs jQuery sur w3schools.com
- Ajax sur Wikipédia
- L’API de documentation
