jQuery
Créer des interfaces web avec jQuery
jQuery
Présentation
jQuery
Présentation
jQuery est une librairie javascript permettant de manipuler et interagir avec le navigateur plus simplement
jQuery n'est pas un outil obligatoire, il éxiste aujourd'hui des librairies plus puissante
Cependant, cet outil reste incontournable de part son utilisation massif entre 2000 et 2010
jQuery
Présentation
Comment installer jQuery ?
jQuery
Les sélécteur
jQuery
Les sélécteurs
Grace à jQuery nous pouvons facilement sélectionner des éléments de notre document HTML en utilisant des sélecteur CSS
// Séléction de tout les h1 de la page
$('h1')
// Séléction de tout les paragraph
$('p')
// Séléction de tout les paragraph dans la class .article
$('.article p')jQuery
Les sélécteurs
Nous pouvons interagir avec nos élément grâce à de nombreuse méthodes : Ici manipuler le text et la html
// Modification du text de tout les h1
$('h1').text('Coucou')
// Modifier le html de toutes les class article
$('.article').html('<p>Nouvelle article</p>')
// Ajout d'un paragraph à la fin de la balise .article
$('.article').append('<p>Ajout d\'un paragraph</p>')
// Ajout d'un paragraph au début de la balise .article
$('.article').prepend('<p>Ajout d\'un paragraph</p>')
// Vide l'intégralite de l'article
$('.article').empty()
jQuery
Les sélécteurs
Nous pouvons interagir avec nos élément grâce à de nombreuse méthodes : Ici manipuler les class CSS
// Ajouter une class css .red à un paragraph
$('p').addClass('red')
// Supprime la class css .red à un paragraph
$('p').removeClass('red')
// Ajouter / Supprimer une class css .red à un paragraph
$('p').toggleClass('red')
// Test si la class css .red est attaché à mon paragraph
$('p').hasClass('red')jQuery
Les sélécteurs
Nous pouvons interagir avec nos élément grâce à de nombreuse méthodes : Ici manipuler les attributs
// Obtenir la valeur de l'attribut href d'une balise a
$('a').prop('href')
// Assigner / Changer l'attribut href d'une balise a
$('a').prop('href', '#test')jQuery
Les Events
jQuery
Les Events
Un événement c'est un effet qui se produit sur votre interface
Exemple :
- un click
- un double click
- lorsque la souris rentre dans un élément
- lorsque l'on appuie sur un touche clavier
- etc ...
jQuery
Les Events
En jQuery, il est possible d'attacher (bind) des événements à des fonctions
// Ici on attache un fonction lors du clique
// sur des h1
$("h1").bind("click", () => {
// Ce console se lancera losque l'utilisateur
// cliquera sur le h1 !
console.log("Clique !")
})
// On attache un événement losque la souris rentre
// dans l'élément .box
$(".box").bind("mouseenter", () => {
console.log("Souris dans la boite !")
})
// On attache un événement losque la souris sort
// de l'élément .box
$(".box").bind("mouseleave", () => {
console.log("Souris sors de la boite !")
})
// On attache un événement losque la souris bouge
// à l'intérieur de notre box
$(".box").bind("mousemove", () => {
console.log("Souris sors de la boite !")
})
jQuery
Les Events
Il existe bien plus d'événement :
// Voici la liste des événements principaux
// que l'on peut attacher
// Événement souris
"click"
"doubleclick"
"mouseenter"
"mouseleave"
"mousemove"
"contextmenu" // Click droit
"scroll"
// Événement clavier
"keyup" // Relever une touche du clavier
"keydown" // Appuie sur la touche du clavier
"keypress" // Pression sur une touche du clavier
// Événement tactile
"touchstart" // Lorsque l'on commence à toucher un élément
"touchend" // Lorsque l'on léve le doigt de l'écran
"touchmove" // Lorsque bouge le doight sur l'écran
"touchcancel"jQuery
Les Events
$(".box").bind("click", (event) => {
console.log(event.type) // click
console.log(event.pageX) // coordonées de la souris X
console.log(event.pageY) // coordonées de la souris Y
})
En jquery, nous pouvons récupérer un objet event contenant diverse informations
jQuery
Les Events
$("form button").bind("click", (event) => {
// Annule tout les comportements prévus sur le clique
event.preventDefault()
console.log("click")
})
Il est possible d'annuler le comportement prévue d'un événement (preventDefault)
jQuery
Les Events
$(".one").bind("click", () => console.log("Click one"))
$(".two").bind("click", () => console.log("Click two"))
$(".three").bind("click", (event) => {
// Arréte la propagation de l'événement
// Ce qui veut dire les event sur .two, et .one
// ne serons jamais déclenché
event.stopPropagation()
console.log("Click three")
})Il est possible d’arrêter la propagation d'un event sur ses parents
jQuery
AJAX
les requêtes HTTP
jQuery
Les requêtes HTTP
En HTTP, le client créer un fichier text que nous nommons "Request"
Le serveur, lis et analyse ce fichier texte et retourne ce que nous nommons une "Response" (c'est aussi un fichier texte)
jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Request"
GET http://google.fr
Content-Type: text/html
User-Agent: google-chrome
<html>
</html>jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Request"
GET http://google.fr
Content-Type: text/html
User-Agent: google-chrome
<html>
</html>jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Request"
GET http://google.fr
Content-Type: text/html
User-Agent: google-chrome
<html>
</html>La première et suivie des en-tête HTTP
jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Request"
GET http://google.fr
Content-Type: text/html
User-Agent: google-chrome
<html>
</html>Ici, c'est le contenue de la request
jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Response"
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Wed, 09 Jun 2021 12:37:17 GMT
<!DOCTYPE html>
<html>
...
</html>jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Response"
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Wed, 09 Jun 2021 12:37:17 GMT
<!DOCTYPE html>
<html>
...
</html>La ligne 1 contient les informations suivante :
- Le protocole (Scheme) ainsi que sa version (HTTP/1.1)
- La status code (200) et son status text (OK)
jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Response"
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Wed, 09 Jun 2021 12:37:17 GMT
<!DOCTYPE html>
<html>
...
</html>Les en-têtes HTTP
jQuery
Les requêtes HTTP
Regardons de plus près le fichier texte d'une "Response"
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Wed, 09 Jun 2021 12:37:17 GMT
<!DOCTYPE html>
<html>
...
</html>Le contenue de la "Response" (ici, la page html de google.fr)
jQuery
Les requêtes HTTP
En jQuery il est possible de faire une requête HTTP
// Nous créons une variable request
let request = $.ajax({
// Nous spécifions l'url de la request
url: 'https://google.fr',
// (facultative, GET par défaut) Nous ajoutons la méthode
method: 'GET',
// (facultative) Nous pouvons luis spécifier des données
data: '<html></html>',
// (facultative) Ainsi que des en-têtes HTTP
headers: {
"Content-Type": "text/html"
}
})jQuery
Les requêtes HTTP
En jQuery il est possible de récupérer les données d'une requête
// Nous créons une variable request
let request = $.ajax({
// ...
})
// Afin de récupérer les données d'une
// request. Il faut utiliser l'événement
// "done"
request.done((htmlDeGoogle) => {
console.log(htmlDeGoogle) // Affiche tout le html de google.fr
})jQuery
By David Jegat
jQuery
- 152
