SlideShare une entreprise Scribd logo
1  sur  62
Télécharger pour lire hors ligne
Framework jQuery
2.x
Mr. EL BAZE Abdelaziz
Présentation de JQuery
 jQuery est un framework JavaScript libre et Open Source,
implanté côté client, qui porte sur l’interaction entre le DOM
, JavaScript, AJAX et le Html. Cette librairie JavaScript a pou
r but de simplifier les commandes communes du JavaScript.
 La devise de jQuery est en effet, "Écrire moins pour faire plus
" (write less do more).
Initier un script jQuery
Se référant à ce modèle, tout script jQuery commence par :
$(document).ready(function() {
// code jQuery
});
Pour économiser des frappes de clavier, le signe dollar ($) qui fonctionne comme a
lias de jQuery est presque toujours
utilisé.
$(function(){
//contenu exécuté lorsque le document sera chargé
});
$ == JQuery
La particularité de cette fonction
est de charger les éléments du DOM dès que ceux-
ci sont disponibles,
soit bien avant le chargement complet de la page.
Les sélecteurs
de base
Les sélecteurs de base
1. Sélection par l’identifiant
#identifiant
Sélectionne l’élément (unique) spécifié par l’attribut id="identifiant".
$("#box") : sélectionne l’élément dont l’id est box.
C’est la notation jQuery de getElementById du JavaScript classique.
2. Sélection par le nom de la balise
élément
Sélectionne tous les éléments (ou balises) dont le nom est spécifié.
$("div") : sélectionne toutes les divisions <div> de la page.
C’est la notation jQuery de getElementsByTagName du JavaScript classi
que.
3. Sélection par la classe
.classe
Sélectionne tous les éléments (ou balises) avec la classe spécifiée.
$(".texte") : sélectionne tous les éléments dotés de l
’attribut class="texte".
Les sélecteurs hiérarchiques
1. Sélection des descendants
Ascendant Descendant
Sélectionne tous les descendants de l’élément noté "Descendant" par rapp
ort à l’élément parent noté "Ascendant".
$("#box p") : sélectionne tous les descendants de <p> contenus dans l
’élément parent identifié par box.
2. Sélection des enfants
Parent > Enfant
Sélectionne tous les éléments notés par "Enfant" qui sont les enfants direct
s de l’élément parent noté "Parent".
$("#box >
p") : sélectionne tous les enfants immédiats de <p> contenus dans l
’élément parent identifié par box.
3. Sélection des frères suivants
Précédent ~ Frères
Cible les éléments frères situés après l’élément identifié par le sélecteur «
$("#prev ~ div") .
4. Sélection de l’élément suivant
Précédent + Suivant
Cible l’élément immédiatement suivant situé après l’élément ide
ntifié par le sélecteur "Précédent" et qui répond au sélecteur "Sui
vant".
$("#prev + div")
trouve la division <div> qui suit l’élément avec #prev .
Les sélecteurs hiérarchiques
Les filtres jQuery
de base
Les filtres jQuery de base
1. Le premier élément
:first
Sélectionne la première instance d’un élément.
$("li:first") : sélectionne le premier élément de liste <li> du document.
2. Le dernier élément
:last
Sélectionne la dernière instance d’un élément.
$("li:last") : sélectionne le dernier élément de liste <li> du document.
3. Les éléments pairs
:even
Sélectionne les éléments pairs selon un index commençant à 0.
$("tr:even") : sélectionne les lignes d’index JavaScript 0, 2, 4.
Les filtres jQuery de base
4. Les éléments impairs
:odd
Sélectionne les éléments impairs selon un index commençant à 0.
$("tr:odd") : sélectionne les cellules d’index JavaScript 1, 3, 5.
5. Un élément déterminé
:eq(index)
Sélectionne l’élément déterminé par la valeur de l’index.
Comme les index JavaScript débutent à zéro, le sélecteur
second élément et ainsi de suite.
$("td:eq(2)") : sélectionne la troisième cellule d’un tableau.
6. Les éléments suivants
:gt(index)
Sélectionne les éléments avec une valeur d’index supérieure (greater than)
à la valeur fournie en paramètre.
Pour rappel, les index JavaScript débutent à 0.
$("a:gt(1)") : sélectionne tous les liens de la page en commençant par le troisième
(soit après le second élément).
Les filtres jQuery de base
7. Les éléments précédents
:lt(index)
Sélectionne les éléments avec une valeur d’index inférieure (less than) à l
a valeur fournie en paramètre. Par rappel, les index JavaScript débutent à
0.
$("p:lt(3)") : sélectionne tous les paragraphes situés avant le quatrième, so
it les trois premiers paragraphes.
8. Les balises de titre
:header
Retourne tous les éléments qui sont des balises de titre comme <h1>, <h2>, <h3>
, etc.
$(":header") : sélectionne toutes les balises de titre de la page
9. Exclusion d’un élément
:not(sélecteur)
Exclut de la sélection tous les éléments qui répondent au critère spécifié par
le sélecteur. $("div:not(#box)") : sélectionne toutes les divisions sauf celle
identifiée par box.
Les filtres jQuery de base
10. Vérifier les cases à couché
:checked
Sélectionne les éléments couchés d’un formulaire
$("input[name=‘’sports]:checked") : sélectionne toutes les cases qui sont
checked.
8. en cours d’une animation
:animated
Retourne tous les éléments qui sont en cours d’animation
$("div:animated") : sélectionne toutes les div en animation.
Pour la négation on utilise :not
$("div:not(:animated)").
Les filtres
enfants
Les filtres enfants
1. Le premier enfant
:firstchild
Sélectionne tous les éléments qui sont le premier enfant de leur parent.
$("ul:first-child") : sélectionne le premier enfant
de la liste non ordonnée <ul>.
2. Le dernier enfant
:lastchild
Sélectionne tous les éléments qui sont le dernier enfant de leur parent.
$("ul:last-
child") : sélectionne le dernier enfant de la liste non ordonnée <ul>.
3. Le énième enfant
:nthchild(index) (index à partir de 1)
Sélectionne les éléments qui sont le énième enfant de leur parent. La positio
n est
Au contraire de nombreux index en jQuery, l’index ne débute pas ici à 0 mais
à 1.
$("ul li:nth-child(2)") : sélectionne le second élément <li> de la liste <ul>.
Les filtres enfants
4. Les enfants pairs et impairs (le premier élément c’est 1 )
:nthchild(even ou odd)
Sélectionne les éléments qui sont les nièmes enfants pairs (even) ou imp
Comme :nth-child dont il est une variante, l’index débute à 1.
$("table tr:nth-child(odd)") : sélectionne les lignes impaires <tr> du tableau.
5. Les enfants uniques
:onlychild
Sélectionne tous les éléments qui sont enfant unique de leur parent.
Si le parent a plusieurs enfants, aucune sélection n’est effectuée.
$("div button:only-child") : retrouve les boutons (balise <button>)
qui n’ont pas de frère(s) dans toutes les divisions rencontrées.
Les filtres
de contenu
Les filtres de contenu
1. Un texte donné
:contains(texte)
Sélectionne les éléments qui contiennent un texte ou un fragment de texte
fourni en argument. Il faut noter que l’argument texte est sensible à la casse
(case sensitive).
$("div:contains(’Eni’)") : sélectionne les divisions qui contiennent le texte "Eni"
2. Un contenu vide
:empty
Sélectionne tous les éléments qui n’ont pas d’enfants (inclus les nœuds de texte)
$("div:empty") : sélectionne les divisions vides.
3. La qualité de parent
:parent
Sélectionne les éléments qui sont parent, c’est à
dire qui ont des éléments enfants, inclus les nœuds de texte.
$("div:parent") : sélectionne les divisions qui ont des éléments enfants.
4. Un sélecteur déterminé
:has(sélecteur)
Sélectionne les éléments qui contiennent le sélecteur transmis en argument.
$("div:has(p)") : sélectionne les divisions qui contiennent un ou des
paragraphe(s).
Les filtres
de visibilité
Les filtres de visibilité
1. Élément visible
:visible
Sélectionne les éléments qui sont visibles.
$("p:visible") : sélectionne les paragraphes visibles.
2. Elément caché
:hidden
Sélectionne les éléments qui sont cachés.
$("p:hidden") : sélectionne les paragraphes cachés.
Les filtres
d’attribut
Les filtres d’attribut
1. L’attribut
[attribut]
Sélectionne les éléments dotés de l’attribut spécifié.
$("div[id]") : sélectionne les éléments qui ont un attribut id.
2. L’attribut avec une certaine valeur
[attribut=valeur]
Sélectionne les éléments dotés d’un attribut avec une valeur déterminée.
$("input[name=’newsletter’]") : sélectionne l’élément de formulaire <input>
avec un attribut name="newsletter".
3. L’attribut qui n’a pas une certaine valeur
[attribut!=valeur]
Valeur est case sensitive.
$("input[name!=newsletter]") : sélectionne les éléments de formulaire <input>
qui n’ont pas d’attribut name et ceux qui ont un attribut name avec une autr
e valeur
que newsletter
Les filtres d’attribut
4. L’attribut dont la valeur commence par
[attribut^=value]
Sélectionne les éléments qui possèdent l’attribut spécifié et dont la valeur comm
ence par les caractères indiqués.
$("input[name^=’news’]") .
5. L’attribut dont la valeur finit par
[attribut$=value]
Sélectionne les éléments qui possèdent l’attribut spécifié et dont la valeur se ter
mine par les caractères indiqués.
$("input[name$=’letter’]")
6. L’attribut dont la valeur contient
[attribut*=value]
Sélectionne les éléments qui possèdent l’attribut spécifié et dont la valeur co
mporte les caractères indiqués.
$("input[name*=’slet’]")
Les filtres d’attribut
7. Les filtres multiples d’attribut
[filtre d’attribut 1][ filtre d’attribut 2][ filtre d’attribut 3]…
Sélectionne les éléments qui répondent à tous les filtres d’attribut spécifiés.
$("input[id][name$=’man’]")
Les sélecteurs et les caractèr
es
spéciaux
Les sélecteurs et les caractères spéciaux
Les symboles repris dans la syntaxe de jQuery constituent un problème lorsqu
’ils
sont utilisés dans la partie littérale du code.
Il faut alors indiquer que ces caractères ne sont pas des symboles jQu
ery.
Pour ce faire, on fera précéder les caractères spéciaux de deux barres obl
iques inverses  (backslashes)
Par exemple :
#foo:bar
#foo[bar]
#foo.bar
La liste complète des caractères spéciaux qui appartiennent à la syntaxe de j
Query sont : # ; & , . + * ~ ’ : " ! ^ $ [ ] (
) = > | /
Il est plus raisonnable de les éviter purement et simplement.
Affectation
de classe CSS
Affectation de classe CSS
Ajouter classe
$(‘’).addClass(‘nom class’);
Supprimer une class
$(‘’).removeClass(‘nom class’);
Basculer entre deux classes
$(‘’).toggleClass(‘nom class’);
Vérifier la présence d’une classe
$(‘’). hasClass(classe);
Manipulation des attributs
Manipulation des attributs
Connaître la valeur d’un attribut .attr(‘nom attribut’)
attr(nomAttribut)
$("a").attr("title") : récupère la valeur de l’attribut title du premier lien renc
ontré.
Cette méthode retourne un objet jQuery.
Ajouter un attribut et sa valeur
attr(nomAttribut, valeur)
$("#photo").attr("alt","Parc éoliennes") : assigne à l’élément identifié par
#photo, l’attribut alt="Parc éoliennes".
Ajouter plusieurs attributs et leurs valeurs
attr({att1:val1, att2:val2,…})
$("img").attr({ src: "hat.gif", alt: "Logo jQuery!" }) : assigne les attributs src et
alt aux images.
Supprimer un attribut
removeAttr(nomAttribut)
$("#div1").removeAttr("disabled") : supprime l’attribut disabled de l’élément
identifié par div1.
Manipulation des attributs
Connaître l’attribut value
val()
$("input").val() : récupère le contenu de l’attribut value du premier champ
de formulaire de type <input>.
Modifier l’attribut value
val(valeur)
Assigne une nouvelle valeur à l’attribut value de l’élément sélectionné.
$("#input").val("Test") : ajoute la valeur Test à une ligne de texte.
la modification dynamique
des propriétés de style CSS
la modification dynamique des propriétés
de style CSS
Utilisation de la fonction CSS()
Accéder à une propriété de style
css(nom):
Permet d’accéder à une propriété de style du premier élément trouvé.
$("p").css("color"): renvoie une chaîne de caractères (String) représentant la
valeur de la propriété color (retourne la valeur par défaut).
Attribuer des propriétés de style
css(clé,valeur)
Modifie les propriétés de style d’un élément donné en utilisant la notation
clé/valeur pour les propriétés de style à
transformer.
$("p").css("color","red");
Modifier les propriétés de style
css({propriété de style})
Modifie les propriétés de style d’un élément donné en utilisant la notation
CSS clé/valeur pour les propriétés de style à transformer.
$("p").css({ “color”: "red", “background”: "blue“});
Le dimensionnement
Le dimensionnement
Récupérer l’hauteur
height()
Renvoie la hauteur, exprimée en pixels, d’un élément.
$("p").height();
Assigner une hauteur
height(valeur)
Assigne une hauteur aux éléments spécifiés. Si aucune unité n’est spécifiée
(comme em ou %), l’unité px sera choisie par défaut.
$("p").height(‘120px’);
Récupérer la largeur
width()
Renvoie la largeur, exprimée en pixels, d’un élément.
$("p").width();
Assigne une largeur
width(valeur)
Assigne une largeur aux éléments spécifiés.
$("p").width(‘120px’);
Le positionnement
Le positionnement
La position d’un élément relative à son élément parent.
position()
Renvoie la valeur top et left de la position d’un élément relative à son
élément parent (uniquement pour position : relative ou absolute ou fixed ).
$("p:first").position().top;
Cette méthode renvoie un objet de type object{top,left}.
La position d’un élément relative au document.
offset()
Renvoie la valeur top et left de la position d’un élément relative au
document.
$("p:first").offset().top;
Cette méthode renvoie un objet de type object{top,left}.
L’amplitude de la barre de défilement
scrollTop(): retourne la position de la barre de défilement verticale.
scrollTop(valeur): modifie la position de la barre de défilement verticale.
scrollLeft(): retourne la position de la barre de défilement horizontale.
scrollLeft (valeur): modifie la position de la barre de défilement horizontale.
$("html,body").scrollTop(300);
Les gestionnaires
d’événements
Les gestionnaires d’événements
Au clic de la souris
click()
Associe une fonction à l’événement clic des éléments de la sélection.
$("p").click(function(){ $(this).remove() }); supprime le paragraphe
séléctionné par le clique.
Au double clic
dblclick( )
Associe une fonction à l’événement double clic des éléments de la sélection.
$("div").dblclick();
Le focus
focus()
Associe une fonction à l’événement au focus des éléments spécifiés.
$("p").focus();
La perte du focus
blur()
Déclenche l’événement qui se produit lorsque l’élément perd le
focus$("input").blur();
Les gestionnaires d’événements
Le bouton de la souris
mousedown()
Associe une fonction pour les éléments sélectionnés lorsque l’utilisateur
presse une touche de la souris.
$("p").mousedown();
mouseup()
Associe une fonction pour les éléments de la sélection lorsque l’utilisateur
relâche le bouton de la souris.
$("p").mouseup();
Le déplacement du curseur
mousemove()
Associe une fonction lorsque l’utilisateur bouge le curseur de la souris.
$("div").mousemove();
mouseover()
Associe une fonction lorsque l’utilisateur positionne le curseur de la souris
audessus d’un élément.
$("div").mouseover();
Les gestionnaires d’événements
mouseout()
Associe une action à l’événement lorsque le curseur de la souris quitte un
élément.
$("div").mouseout();
change()
déclenche un événement lorsqu’un contrôle de formulaire est modifié, par
exemple lorsqu’une case à cocher de formulaire est activée.
submit()
déclenche un événement lorsque l’utilisateur clique sur le bouton submit
d’un formulaire et sans paramètre pour soumettre un formulaire.
$("form").submit();
Autres
keydown(), keyup() déclenchent un événement lorsqu’une touche du clavier
est pressée(vers le bas), lorsqu’une touche du clavier est relâchée (vers le
haut)
keyup(function(event){ alert(event.which)})
resize() : déclenchent un événement lorsque l’utilisateur redimensionne la
fenêtre de navigateur $(window).resize(function(){ //traitement });
Les gestionnaires d’événements
$( document ).on( events, selector, function(){});
Attache une fonction à un événement donné pour tous les éléments existants
et futurs trouvés.
$(document).on("click","p", function(){
alert( $(this).text() );
});
hover(fonction 1, fonction 2)
La méthode hover() de jquery lie deux événements fréquemment utilisés à
l’élément sélectionné ; l’un lorsque le pointeur survole et l’autre lorsqu’il le
quitte.
$("p").hover(function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
});
trigger(événement)
Déclenche un événement particulier pour les éléments de la sélection.
$("p").trigger("click");
Les gestionnaires d’événements
load (après le chargement complet)
on("load",function(){ })
Exécute le contenu de la fonction anonyme après le chargement complet de
la séléction
$("img").on("load",function(){
alert($(this).height());
});
Les animations visuelles
Les animations visuelles
Afficher et cacher
show(vitesse, fonction de rappel)
Affiche un élément sélectionné (pour autant que celui ci soit caché).
• vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet. $(’p’).show(’slow’);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin
de l’effet. $(’p’).show(’slow’, function(){alert("Fin");});
hide(vitesse, fonction de rappel)
Cache un élément sélectionné (pour autant que celuici soit visible).
•vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet. $(’p’).show(’slow’);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin
de l’effet. $(’p’).show(’slow’, function(){alert("Fin");});
Les animations visuelles
Glisser verticalement
slideDown(vitesse, fonction de rappel)
Fait glisser vers le bas (down) un élément sélectionné.
• vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet.
$(’p’).slideDown(’slow’);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin
de l’effet. $(’p’).slideDown(’slow’, function(){alert("Fin");});
slideUp(vitesse, fonction de rappel)
Fait glisser vers le haut (up) un élément sélectionné.
•vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet. $(’p’).slideUp(’slow’);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin
de l’effet. $(’p’).slideUp(’slow’, function(){alert("Fin");});
Les animations visuelles
Glisser verticalement
slideToggle(vitesse, fonction de rappel)
Cette fonction fait glisser vers le bas un élément qui est en état "Up" et fait
glisser vers le haut un élément qui est en état "Down".
• vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet.
$(’p’).slideToggle(’slow’);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin
de l’effet. $(’p’).slideToggle(’slow’, function(){alert("Fin");});
Les animations visuelles
Réaliser un effet de fondu
fadeIn(vitesse, fonction de rappel)
Fait apparaître l’élément sélectionné selon un effet de fondu.
• vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet. $(’p’).fadeIn(’slow’);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin
de l’effet. $(’p’).fadeIn(’slow’, function(){alert("Fin");});
fadeOut(vitesse, fonction de rappel)
Fait disparaître l’élément sélectionné selon un effet de fondu.
•vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet.
$(’p’).fadeOut(’slow’);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin
de l’effet. $(’p’).fadeOut(’slow’, function(){alert("Fin");});
Les animations visuelles
Réaliser un effet de fondu
fadeTo(vitesse, opacité, fonction de rappel)
Modifie l’opacité de l’élément sélectionné jusqu’à une valeur fournie dans le
script.
• vitesse (optionnel) : chaîne de caractères représentant une des trois
vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en
millisecondes correspondant à la durée de l’effet. $(’p’).fadeTo(’slow’,0.7);
• fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de
l’effet. $(’p’).fadeTo(’slow’,0.7, function(){alert("Fin");});
Les animations visuelles
Créer une animation
animate(paramètres, vitesse, fonction de rappel)
paramètres : conteneurs d’attributs de style que vous souhaitez
animer et à quelle valeur (A noter que ces propriétés devront
être spécifiées selon la notation JavaScript (CamelCase) soit par
exemple marginLeft au lieu de la notation CSS soit margin-left).
vitesse (optionnel) : chaîne de caractères représentant une des
trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le
nombre en millisecondes correspondant à la durée de l’effet.
animate( {fontSize:"24px", left:300, width: "200px", opacity: 0.5}
, 1000 )
fonction de rappel (optionnel) : fonction à exécuter à la fin de
l’animation.
Filtre des éléments DOM
Filtre des éléments DOM
Trouver les enfants directs
children(expression)
Récupère un groupe d’éléments contenant les enfants immédiats de chacun
des éléments concernés par la sélection. $("div").children().
Expression: optionnelle. La méthode children() prend alors la forme de
children(expression) qui permet de ne retenir que les éléments enfants qui
répondent à l’expression introduite.
Trouver les parents directs
parent(expression)
Récupère un groupe d’éléments contenant les parents immédiats de chacun
des éléments concernés par la sélection.
$("span").parent().
Trouver le frère précédent
prev()
Retourne le frère immédiat précédent de chaque élément de la sélection.
Avec prev(expression), les éléments retournés peuvent être filtrés de sorte
que seuls les éléments qui répondent à l’expression soient retenus.
Filtre des éléments DOMTrouver les frères précédents
prevAll([expression])
Retourne les frères immédiats précédents de chaque élément
de la sélection.
$("td").prevAll()
Trouver le frère suivant
next([expression])
Retourne le frère immédiat suivant de chaque élément de la
sélection.
$("td").next()
Trouver les frères suivants
nextAll()
Retourne les frères immédiats suivants de chaque élément de
la sélection.
$("td").nextAll()
Filtre des éléments DOM
Trouver certains descendants
find(expression ou sélecteur)
Recherche les éléments descendants répondant aux conditions
du sélecteur spécifié.
$("div").find("p")
Modifier le contenu
Modifier le contenu
html()
Récupère au format Html, le contenu de l’élément concerné.
$("div").html() : récupère au format Html, le contenu de la balise <div>.
html(valeur)
Assigne un nouveau contenu Html (voir l’argument valeur) aux éléments
concernés.
$("div").html("<b>nouveau contenu</b>") : insère comme du Html, les
éléments fournis en argument dans la balise <div>.
append(contenu)
Ajoute du contenu à la fin mais à l’intérieur de l’élément spécifié.
Le contenu peut être une chaîne de caractères, du Html ou un objet jQuery.
$("p").append("<b>Hello</b>") : insère à la fin du paragraphe, les élément
fournis en arguments.
prepend(contenu)
Ajoute du contenu au début mais à l’intérieur de l’élément spécifié.
Le contenu peut être une chaîne de caractères, du Html ou un objet jQuery.
$("p").prepend("<b>Hello</b>") : insère au début du paragraphe, les éléments
fournis en arguments.
Modifier le contenu
appendTo()
Ajoute des éléments spécifiés par le sélecteur A à la fin d’autres
spécifiés par B selon l’expression $(A).appendTo(B).
$("p").appendTo("#box") : ajoute le contenu des éléments <p>, à
la division portant l’identifiant "box" et à la fin de celleci.
prependTo()
Ajoute des éléments spécifiés par le sélecteur A au début
d’autres spécifiés par B selon l’expression $(A).appendTo(B).
$("p").prependTo("#box") : ajoute le contenu des éléments <p>,
à la division portant l’identifiant "box" et au début de celleci.
Enlever un élément
Modifier le contenu
Supprimer un élément
remove()
Supprime de l’arbre du DOM, tous les éléments répondant aux
critères de sélection. $("p").remove() : supprime le paragraphe.
Vider un élément
empty()
Supprime tous les noeuds enfants de l’élément sélectionné.
$("p").empty() : supprime le contenu du paragraphe.
Asynchronous JavaScript
and XML
Asynchronous JavaScript and XML
La requête AJAX complète
ajax(options)
Réalise une requête HTTP asynchrone (AJAX).
$.ajax({
url: "test.txt",
dataType: " html",
success: function(data ) {
$("#resultat").html(data);
}
});
url (obligatoire): une chaîne de caractères contenant l’adresse de la
requête.
type (optionnel) : une chaîne de caractères qui définit la méthode HTTP à
utiliser pour la requête (GET ou POST). La valeur par défaut est GET.
Asynchronous JavaScript and XML
• dataType (optionnel) : une chaîne de caractères qui spécifie
le format des données qui seront renvoyées par le serveur (xml,
html, json ou script). Si rien n’est spécifié, jQuery utilisera le
type MIME pour déterminer le format adéquat soit responseXML
ou ResponseText. Les types disponibles sont :
–"xml" : retourne un document XML qui pourra être
traité par jQuery.
–"html " : retourne du code Html au format texte.
–"script" : évalue la réponse en JavaScript et retourne
cette dernière au format texte.
–"json" : évalue la réponse en JSON et retourne un objet
JavaScript.
• timeout (optionnel) : nombre de millisecondes après lequel la
requête est considérée comme non réussie.
Asynchronous JavaScript and XML
• success (optionnel) : fonction à appeler si la requête s’exécute
avec succès. Un seul argument est passé en paramètre soit les
données retournées par le serveur.
• error (optionnel) : une fonction qui doit être appelée en cas
d’échec de la requête
• beforeSend (optionnel) : une fonction qui doit être exécutée
avant l’envoi de la requête.
• data (optionnel) : données à envoyer au serveur(type=‘POST’).
L’objet doit être formé de paires de
‘cle1=valeur1&cle2=valeur2&…..’
• cache (optionnel) : une valeur booléenne qui, lorsqu’elle est
mise sur false, empêche la page chargée d’être mise dans le
cache du navigateur.

Contenu connexe

Tendances

4 vb composants
4 vb composants4 vb composants
4 vb composantskkatia31
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4halleck45
 
Scrapez facilement et gratuitement
Scrapez facilement et gratuitementScrapez facilement et gratuitement
Scrapez facilement et gratuitementMadeline Pinthon
 
Exploiter php 5
Exploiter php 5Exploiter php 5
Exploiter php 5halleck45
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScriptMouna Dhaouadi
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDOAbdoulaye Dieng
 
Modèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratiqueModèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratiqueVladyslav Riabchenko
 
PHP5 - POO
PHP5 - POOPHP5 - POO
PHP5 - POOmazenovi
 
Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5Kristen Le Liboux
 
Mort au boilerplate avec scala meta
Mort au boilerplate avec scala metaMort au boilerplate avec scala meta
Mort au boilerplate avec scala metaDamien GOUYETTE
 

Tendances (16)

4 vb composants
4 vb composants4 vb composants
4 vb composants
 
Part1
Part1Part1
Part1
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4
 
Scrapez facilement et gratuitement
Scrapez facilement et gratuitementScrapez facilement et gratuitement
Scrapez facilement et gratuitement
 
Exploiter php 5
Exploiter php 5Exploiter php 5
Exploiter php 5
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Javascript
JavascriptJavascript
Javascript
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
Modèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratiqueModèle de domaine riche dans une application métier complexe un exemple pratique
Modèle de domaine riche dans une application métier complexe un exemple pratique
 
PHP5 - POO
PHP5 - POOPHP5 - POO
PHP5 - POO
 
Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
 
Mort au boilerplate avec scala meta
Mort au boilerplate avec scala metaMort au boilerplate avec scala meta
Mort au boilerplate avec scala meta
 
Php1
Php1Php1
Php1
 

Plus de Abdelaziz Elbaze

Plus de Abdelaziz Elbaze (11)

Cours module i partie 1
Cours module i partie 1Cours module i partie 1
Cours module i partie 1
 
Protocols
ProtocolsProtocols
Protocols
 
Cours réseauxf
Cours réseauxfCours réseauxf
Cours réseauxf
 
Telecharger des exercices en bureautique
Telecharger des exercices en bureautiqueTelecharger des exercices en bureautique
Telecharger des exercices en bureautique
 
Cours architecture
Cours architectureCours architecture
Cours architecture
 
Merci de répondre au question suivante
Merci de répondre au question suivanteMerci de répondre au question suivante
Merci de répondre au question suivante
 
Cours programmation
Cours programmation Cours programmation
Cours programmation
 
Correction
CorrectionCorrection
Correction
 
Www.kutub.info 16076
Www.kutub.info 16076Www.kutub.info 16076
Www.kutub.info 16076
 
Msdos
MsdosMsdos
Msdos
 
Formation ligne
Formation ligneFormation ligne
Formation ligne
 

Dernier

Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .Txaruka
 
Saint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxSaint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxMartin M Flynn
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertChristianMbip
 
7 PPT sue le project de fin d'étude.pptx
7 PPT sue le project de fin d'étude.pptx7 PPT sue le project de fin d'étude.pptx
7 PPT sue le project de fin d'étude.pptxrababouerdighi
 
Présentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxPrésentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxrababouerdighi
 
Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipM2i Formation
 
Evaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxEvaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxAsmaa105193
 
Guide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étudeGuide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étudeBenamraneMarwa
 
Fondation Louis Vuitton. pptx
Fondation      Louis      Vuitton.   pptxFondation      Louis      Vuitton.   pptx
Fondation Louis Vuitton. pptxTxaruka
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.Franck Apolis
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETMedBechir
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETMedBechir
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptxSAID MASHATE
 

Dernier (15)

Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .Annie   Ernaux  Extérieurs. pptx. Exposition basée sur un livre .
Annie Ernaux Extérieurs. pptx. Exposition basée sur un livre .
 
Saint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxSaint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptx
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expert
 
7 PPT sue le project de fin d'étude.pptx
7 PPT sue le project de fin d'étude.pptx7 PPT sue le project de fin d'étude.pptx
7 PPT sue le project de fin d'étude.pptx
 
Présentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxPrésentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptx
 
Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadership
 
Evaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxEvaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. Marocpptx
 
Guide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étudeGuide Final de rédaction de mémoire de fin d'étude
Guide Final de rédaction de mémoire de fin d'étude
 
Fondation Louis Vuitton. pptx
Fondation      Louis      Vuitton.   pptxFondation      Louis      Vuitton.   pptx
Fondation Louis Vuitton. pptx
 
Pâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie PelletierPâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie Pelletier
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSET
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
 
Evaluación Alumnos de Ecole Victor Hugo
Evaluación Alumnos de Ecole  Victor HugoEvaluación Alumnos de Ecole  Victor Hugo
Evaluación Alumnos de Ecole Victor Hugo
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
 

Formation Jquery

  • 2. Présentation de JQuery  jQuery est un framework JavaScript libre et Open Source, implanté côté client, qui porte sur l’interaction entre le DOM , JavaScript, AJAX et le Html. Cette librairie JavaScript a pou r but de simplifier les commandes communes du JavaScript.  La devise de jQuery est en effet, "Écrire moins pour faire plus " (write less do more).
  • 3. Initier un script jQuery Se référant à ce modèle, tout script jQuery commence par : $(document).ready(function() { // code jQuery }); Pour économiser des frappes de clavier, le signe dollar ($) qui fonctionne comme a lias de jQuery est presque toujours utilisé. $(function(){ //contenu exécuté lorsque le document sera chargé }); $ == JQuery La particularité de cette fonction est de charger les éléments du DOM dès que ceux- ci sont disponibles, soit bien avant le chargement complet de la page.
  • 5. Les sélecteurs de base 1. Sélection par l’identifiant #identifiant Sélectionne l’élément (unique) spécifié par l’attribut id="identifiant". $("#box") : sélectionne l’élément dont l’id est box. C’est la notation jQuery de getElementById du JavaScript classique. 2. Sélection par le nom de la balise élément Sélectionne tous les éléments (ou balises) dont le nom est spécifié. $("div") : sélectionne toutes les divisions <div> de la page. C’est la notation jQuery de getElementsByTagName du JavaScript classi que. 3. Sélection par la classe .classe Sélectionne tous les éléments (ou balises) avec la classe spécifiée. $(".texte") : sélectionne tous les éléments dotés de l ’attribut class="texte".
  • 6. Les sélecteurs hiérarchiques 1. Sélection des descendants Ascendant Descendant Sélectionne tous les descendants de l’élément noté "Descendant" par rapp ort à l’élément parent noté "Ascendant". $("#box p") : sélectionne tous les descendants de <p> contenus dans l ’élément parent identifié par box. 2. Sélection des enfants Parent > Enfant Sélectionne tous les éléments notés par "Enfant" qui sont les enfants direct s de l’élément parent noté "Parent". $("#box > p") : sélectionne tous les enfants immédiats de <p> contenus dans l ’élément parent identifié par box. 3. Sélection des frères suivants Précédent ~ Frères Cible les éléments frères situés après l’élément identifié par le sélecteur « $("#prev ~ div") .
  • 7. 4. Sélection de l’élément suivant Précédent + Suivant Cible l’élément immédiatement suivant situé après l’élément ide ntifié par le sélecteur "Précédent" et qui répond au sélecteur "Sui vant". $("#prev + div") trouve la division <div> qui suit l’élément avec #prev . Les sélecteurs hiérarchiques
  • 9. Les filtres jQuery de base 1. Le premier élément :first Sélectionne la première instance d’un élément. $("li:first") : sélectionne le premier élément de liste <li> du document. 2. Le dernier élément :last Sélectionne la dernière instance d’un élément. $("li:last") : sélectionne le dernier élément de liste <li> du document. 3. Les éléments pairs :even Sélectionne les éléments pairs selon un index commençant à 0. $("tr:even") : sélectionne les lignes d’index JavaScript 0, 2, 4.
  • 10. Les filtres jQuery de base 4. Les éléments impairs :odd Sélectionne les éléments impairs selon un index commençant à 0. $("tr:odd") : sélectionne les cellules d’index JavaScript 1, 3, 5. 5. Un élément déterminé :eq(index) Sélectionne l’élément déterminé par la valeur de l’index. Comme les index JavaScript débutent à zéro, le sélecteur second élément et ainsi de suite. $("td:eq(2)") : sélectionne la troisième cellule d’un tableau. 6. Les éléments suivants :gt(index) Sélectionne les éléments avec une valeur d’index supérieure (greater than) à la valeur fournie en paramètre. Pour rappel, les index JavaScript débutent à 0. $("a:gt(1)") : sélectionne tous les liens de la page en commençant par le troisième (soit après le second élément).
  • 11. Les filtres jQuery de base 7. Les éléments précédents :lt(index) Sélectionne les éléments avec une valeur d’index inférieure (less than) à l a valeur fournie en paramètre. Par rappel, les index JavaScript débutent à 0. $("p:lt(3)") : sélectionne tous les paragraphes situés avant le quatrième, so it les trois premiers paragraphes. 8. Les balises de titre :header Retourne tous les éléments qui sont des balises de titre comme <h1>, <h2>, <h3> , etc. $(":header") : sélectionne toutes les balises de titre de la page 9. Exclusion d’un élément :not(sélecteur) Exclut de la sélection tous les éléments qui répondent au critère spécifié par le sélecteur. $("div:not(#box)") : sélectionne toutes les divisions sauf celle identifiée par box.
  • 12. Les filtres jQuery de base 10. Vérifier les cases à couché :checked Sélectionne les éléments couchés d’un formulaire $("input[name=‘’sports]:checked") : sélectionne toutes les cases qui sont checked. 8. en cours d’une animation :animated Retourne tous les éléments qui sont en cours d’animation $("div:animated") : sélectionne toutes les div en animation. Pour la négation on utilise :not $("div:not(:animated)").
  • 14. Les filtres enfants 1. Le premier enfant :firstchild Sélectionne tous les éléments qui sont le premier enfant de leur parent. $("ul:first-child") : sélectionne le premier enfant de la liste non ordonnée <ul>. 2. Le dernier enfant :lastchild Sélectionne tous les éléments qui sont le dernier enfant de leur parent. $("ul:last- child") : sélectionne le dernier enfant de la liste non ordonnée <ul>. 3. Le énième enfant :nthchild(index) (index à partir de 1) Sélectionne les éléments qui sont le énième enfant de leur parent. La positio n est Au contraire de nombreux index en jQuery, l’index ne débute pas ici à 0 mais à 1. $("ul li:nth-child(2)") : sélectionne le second élément <li> de la liste <ul>.
  • 15. Les filtres enfants 4. Les enfants pairs et impairs (le premier élément c’est 1 ) :nthchild(even ou odd) Sélectionne les éléments qui sont les nièmes enfants pairs (even) ou imp Comme :nth-child dont il est une variante, l’index débute à 1. $("table tr:nth-child(odd)") : sélectionne les lignes impaires <tr> du tableau. 5. Les enfants uniques :onlychild Sélectionne tous les éléments qui sont enfant unique de leur parent. Si le parent a plusieurs enfants, aucune sélection n’est effectuée. $("div button:only-child") : retrouve les boutons (balise <button>) qui n’ont pas de frère(s) dans toutes les divisions rencontrées.
  • 17. Les filtres de contenu 1. Un texte donné :contains(texte) Sélectionne les éléments qui contiennent un texte ou un fragment de texte fourni en argument. Il faut noter que l’argument texte est sensible à la casse (case sensitive). $("div:contains(’Eni’)") : sélectionne les divisions qui contiennent le texte "Eni" 2. Un contenu vide :empty Sélectionne tous les éléments qui n’ont pas d’enfants (inclus les nœuds de texte) $("div:empty") : sélectionne les divisions vides. 3. La qualité de parent :parent Sélectionne les éléments qui sont parent, c’est à dire qui ont des éléments enfants, inclus les nœuds de texte. $("div:parent") : sélectionne les divisions qui ont des éléments enfants. 4. Un sélecteur déterminé :has(sélecteur) Sélectionne les éléments qui contiennent le sélecteur transmis en argument. $("div:has(p)") : sélectionne les divisions qui contiennent un ou des paragraphe(s).
  • 19. Les filtres de visibilité 1. Élément visible :visible Sélectionne les éléments qui sont visibles. $("p:visible") : sélectionne les paragraphes visibles. 2. Elément caché :hidden Sélectionne les éléments qui sont cachés. $("p:hidden") : sélectionne les paragraphes cachés.
  • 21. Les filtres d’attribut 1. L’attribut [attribut] Sélectionne les éléments dotés de l’attribut spécifié. $("div[id]") : sélectionne les éléments qui ont un attribut id. 2. L’attribut avec une certaine valeur [attribut=valeur] Sélectionne les éléments dotés d’un attribut avec une valeur déterminée. $("input[name=’newsletter’]") : sélectionne l’élément de formulaire <input> avec un attribut name="newsletter". 3. L’attribut qui n’a pas une certaine valeur [attribut!=valeur] Valeur est case sensitive. $("input[name!=newsletter]") : sélectionne les éléments de formulaire <input> qui n’ont pas d’attribut name et ceux qui ont un attribut name avec une autr e valeur que newsletter
  • 22. Les filtres d’attribut 4. L’attribut dont la valeur commence par [attribut^=value] Sélectionne les éléments qui possèdent l’attribut spécifié et dont la valeur comm ence par les caractères indiqués. $("input[name^=’news’]") . 5. L’attribut dont la valeur finit par [attribut$=value] Sélectionne les éléments qui possèdent l’attribut spécifié et dont la valeur se ter mine par les caractères indiqués. $("input[name$=’letter’]") 6. L’attribut dont la valeur contient [attribut*=value] Sélectionne les éléments qui possèdent l’attribut spécifié et dont la valeur co mporte les caractères indiqués. $("input[name*=’slet’]")
  • 23. Les filtres d’attribut 7. Les filtres multiples d’attribut [filtre d’attribut 1][ filtre d’attribut 2][ filtre d’attribut 3]… Sélectionne les éléments qui répondent à tous les filtres d’attribut spécifiés. $("input[id][name$=’man’]")
  • 24. Les sélecteurs et les caractèr es spéciaux
  • 25. Les sélecteurs et les caractères spéciaux Les symboles repris dans la syntaxe de jQuery constituent un problème lorsqu ’ils sont utilisés dans la partie littérale du code. Il faut alors indiquer que ces caractères ne sont pas des symboles jQu ery. Pour ce faire, on fera précéder les caractères spéciaux de deux barres obl iques inverses (backslashes) Par exemple : #foo:bar #foo[bar] #foo.bar La liste complète des caractères spéciaux qui appartiennent à la syntaxe de j Query sont : # ; & , . + * ~ ’ : " ! ^ $ [ ] ( ) = > | / Il est plus raisonnable de les éviter purement et simplement.
  • 27. Affectation de classe CSS Ajouter classe $(‘’).addClass(‘nom class’); Supprimer une class $(‘’).removeClass(‘nom class’); Basculer entre deux classes $(‘’).toggleClass(‘nom class’); Vérifier la présence d’une classe $(‘’). hasClass(classe);
  • 29. Manipulation des attributs Connaître la valeur d’un attribut .attr(‘nom attribut’) attr(nomAttribut) $("a").attr("title") : récupère la valeur de l’attribut title du premier lien renc ontré. Cette méthode retourne un objet jQuery. Ajouter un attribut et sa valeur attr(nomAttribut, valeur) $("#photo").attr("alt","Parc éoliennes") : assigne à l’élément identifié par #photo, l’attribut alt="Parc éoliennes". Ajouter plusieurs attributs et leurs valeurs attr({att1:val1, att2:val2,…}) $("img").attr({ src: "hat.gif", alt: "Logo jQuery!" }) : assigne les attributs src et alt aux images. Supprimer un attribut removeAttr(nomAttribut) $("#div1").removeAttr("disabled") : supprime l’attribut disabled de l’élément identifié par div1.
  • 30. Manipulation des attributs Connaître l’attribut value val() $("input").val() : récupère le contenu de l’attribut value du premier champ de formulaire de type <input>. Modifier l’attribut value val(valeur) Assigne une nouvelle valeur à l’attribut value de l’élément sélectionné. $("#input").val("Test") : ajoute la valeur Test à une ligne de texte.
  • 31. la modification dynamique des propriétés de style CSS
  • 32. la modification dynamique des propriétés de style CSS Utilisation de la fonction CSS() Accéder à une propriété de style css(nom): Permet d’accéder à une propriété de style du premier élément trouvé. $("p").css("color"): renvoie une chaîne de caractères (String) représentant la valeur de la propriété color (retourne la valeur par défaut). Attribuer des propriétés de style css(clé,valeur) Modifie les propriétés de style d’un élément donné en utilisant la notation clé/valeur pour les propriétés de style à transformer. $("p").css("color","red"); Modifier les propriétés de style css({propriété de style}) Modifie les propriétés de style d’un élément donné en utilisant la notation CSS clé/valeur pour les propriétés de style à transformer. $("p").css({ “color”: "red", “background”: "blue“});
  • 34. Le dimensionnement Récupérer l’hauteur height() Renvoie la hauteur, exprimée en pixels, d’un élément. $("p").height(); Assigner une hauteur height(valeur) Assigne une hauteur aux éléments spécifiés. Si aucune unité n’est spécifiée (comme em ou %), l’unité px sera choisie par défaut. $("p").height(‘120px’); Récupérer la largeur width() Renvoie la largeur, exprimée en pixels, d’un élément. $("p").width(); Assigne une largeur width(valeur) Assigne une largeur aux éléments spécifiés. $("p").width(‘120px’);
  • 36. Le positionnement La position d’un élément relative à son élément parent. position() Renvoie la valeur top et left de la position d’un élément relative à son élément parent (uniquement pour position : relative ou absolute ou fixed ). $("p:first").position().top; Cette méthode renvoie un objet de type object{top,left}. La position d’un élément relative au document. offset() Renvoie la valeur top et left de la position d’un élément relative au document. $("p:first").offset().top; Cette méthode renvoie un objet de type object{top,left}. L’amplitude de la barre de défilement scrollTop(): retourne la position de la barre de défilement verticale. scrollTop(valeur): modifie la position de la barre de défilement verticale. scrollLeft(): retourne la position de la barre de défilement horizontale. scrollLeft (valeur): modifie la position de la barre de défilement horizontale. $("html,body").scrollTop(300);
  • 38. Les gestionnaires d’événements Au clic de la souris click() Associe une fonction à l’événement clic des éléments de la sélection. $("p").click(function(){ $(this).remove() }); supprime le paragraphe séléctionné par le clique. Au double clic dblclick( ) Associe une fonction à l’événement double clic des éléments de la sélection. $("div").dblclick(); Le focus focus() Associe une fonction à l’événement au focus des éléments spécifiés. $("p").focus(); La perte du focus blur() Déclenche l’événement qui se produit lorsque l’élément perd le focus$("input").blur();
  • 39. Les gestionnaires d’événements Le bouton de la souris mousedown() Associe une fonction pour les éléments sélectionnés lorsque l’utilisateur presse une touche de la souris. $("p").mousedown(); mouseup() Associe une fonction pour les éléments de la sélection lorsque l’utilisateur relâche le bouton de la souris. $("p").mouseup(); Le déplacement du curseur mousemove() Associe une fonction lorsque l’utilisateur bouge le curseur de la souris. $("div").mousemove(); mouseover() Associe une fonction lorsque l’utilisateur positionne le curseur de la souris audessus d’un élément. $("div").mouseover();
  • 40. Les gestionnaires d’événements mouseout() Associe une action à l’événement lorsque le curseur de la souris quitte un élément. $("div").mouseout(); change() déclenche un événement lorsqu’un contrôle de formulaire est modifié, par exemple lorsqu’une case à cocher de formulaire est activée. submit() déclenche un événement lorsque l’utilisateur clique sur le bouton submit d’un formulaire et sans paramètre pour soumettre un formulaire. $("form").submit(); Autres keydown(), keyup() déclenchent un événement lorsqu’une touche du clavier est pressée(vers le bas), lorsqu’une touche du clavier est relâchée (vers le haut) keyup(function(event){ alert(event.which)}) resize() : déclenchent un événement lorsque l’utilisateur redimensionne la fenêtre de navigateur $(window).resize(function(){ //traitement });
  • 41. Les gestionnaires d’événements $( document ).on( events, selector, function(){}); Attache une fonction à un événement donné pour tous les éléments existants et futurs trouvés. $(document).on("click","p", function(){ alert( $(this).text() ); }); hover(fonction 1, fonction 2) La méthode hover() de jquery lie deux événements fréquemment utilisés à l’élément sélectionné ; l’un lorsque le pointeur survole et l’autre lorsqu’il le quitte. $("p").hover(function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); }); trigger(événement) Déclenche un événement particulier pour les éléments de la sélection. $("p").trigger("click");
  • 42. Les gestionnaires d’événements load (après le chargement complet) on("load",function(){ }) Exécute le contenu de la fonction anonyme après le chargement complet de la séléction $("img").on("load",function(){ alert($(this).height()); });
  • 44. Les animations visuelles Afficher et cacher show(vitesse, fonction de rappel) Affiche un élément sélectionné (pour autant que celui ci soit caché). • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).show(’slow’); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).show(’slow’, function(){alert("Fin");}); hide(vitesse, fonction de rappel) Cache un élément sélectionné (pour autant que celuici soit visible). •vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).show(’slow’); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).show(’slow’, function(){alert("Fin");});
  • 45. Les animations visuelles Glisser verticalement slideDown(vitesse, fonction de rappel) Fait glisser vers le bas (down) un élément sélectionné. • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).slideDown(’slow’); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).slideDown(’slow’, function(){alert("Fin");}); slideUp(vitesse, fonction de rappel) Fait glisser vers le haut (up) un élément sélectionné. •vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).slideUp(’slow’); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).slideUp(’slow’, function(){alert("Fin");});
  • 46. Les animations visuelles Glisser verticalement slideToggle(vitesse, fonction de rappel) Cette fonction fait glisser vers le bas un élément qui est en état "Up" et fait glisser vers le haut un élément qui est en état "Down". • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).slideToggle(’slow’); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).slideToggle(’slow’, function(){alert("Fin");});
  • 47. Les animations visuelles Réaliser un effet de fondu fadeIn(vitesse, fonction de rappel) Fait apparaître l’élément sélectionné selon un effet de fondu. • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).fadeIn(’slow’); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).fadeIn(’slow’, function(){alert("Fin");}); fadeOut(vitesse, fonction de rappel) Fait disparaître l’élément sélectionné selon un effet de fondu. •vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).fadeOut(’slow’); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).fadeOut(’slow’, function(){alert("Fin");});
  • 48. Les animations visuelles Réaliser un effet de fondu fadeTo(vitesse, opacité, fonction de rappel) Modifie l’opacité de l’élément sélectionné jusqu’à une valeur fournie dans le script. • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ‘fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. $(’p’).fadeTo(’slow’,0.7); • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. $(’p’).fadeTo(’slow’,0.7, function(){alert("Fin");});
  • 49. Les animations visuelles Créer une animation animate(paramètres, vitesse, fonction de rappel) paramètres : conteneurs d’attributs de style que vous souhaitez animer et à quelle valeur (A noter que ces propriétés devront être spécifiées selon la notation JavaScript (CamelCase) soit par exemple marginLeft au lieu de la notation CSS soit margin-left). vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet. animate( {fontSize:"24px", left:300, width: "200px", opacity: 0.5} , 1000 ) fonction de rappel (optionnel) : fonction à exécuter à la fin de l’animation.
  • 51. Filtre des éléments DOM Trouver les enfants directs children(expression) Récupère un groupe d’éléments contenant les enfants immédiats de chacun des éléments concernés par la sélection. $("div").children(). Expression: optionnelle. La méthode children() prend alors la forme de children(expression) qui permet de ne retenir que les éléments enfants qui répondent à l’expression introduite. Trouver les parents directs parent(expression) Récupère un groupe d’éléments contenant les parents immédiats de chacun des éléments concernés par la sélection. $("span").parent(). Trouver le frère précédent prev() Retourne le frère immédiat précédent de chaque élément de la sélection. Avec prev(expression), les éléments retournés peuvent être filtrés de sorte que seuls les éléments qui répondent à l’expression soient retenus.
  • 52. Filtre des éléments DOMTrouver les frères précédents prevAll([expression]) Retourne les frères immédiats précédents de chaque élément de la sélection. $("td").prevAll() Trouver le frère suivant next([expression]) Retourne le frère immédiat suivant de chaque élément de la sélection. $("td").next() Trouver les frères suivants nextAll() Retourne les frères immédiats suivants de chaque élément de la sélection. $("td").nextAll()
  • 53. Filtre des éléments DOM Trouver certains descendants find(expression ou sélecteur) Recherche les éléments descendants répondant aux conditions du sélecteur spécifié. $("div").find("p")
  • 55. Modifier le contenu html() Récupère au format Html, le contenu de l’élément concerné. $("div").html() : récupère au format Html, le contenu de la balise <div>. html(valeur) Assigne un nouveau contenu Html (voir l’argument valeur) aux éléments concernés. $("div").html("<b>nouveau contenu</b>") : insère comme du Html, les éléments fournis en argument dans la balise <div>. append(contenu) Ajoute du contenu à la fin mais à l’intérieur de l’élément spécifié. Le contenu peut être une chaîne de caractères, du Html ou un objet jQuery. $("p").append("<b>Hello</b>") : insère à la fin du paragraphe, les élément fournis en arguments. prepend(contenu) Ajoute du contenu au début mais à l’intérieur de l’élément spécifié. Le contenu peut être une chaîne de caractères, du Html ou un objet jQuery. $("p").prepend("<b>Hello</b>") : insère au début du paragraphe, les éléments fournis en arguments.
  • 56. Modifier le contenu appendTo() Ajoute des éléments spécifiés par le sélecteur A à la fin d’autres spécifiés par B selon l’expression $(A).appendTo(B). $("p").appendTo("#box") : ajoute le contenu des éléments <p>, à la division portant l’identifiant "box" et à la fin de celleci. prependTo() Ajoute des éléments spécifiés par le sélecteur A au début d’autres spécifiés par B selon l’expression $(A).appendTo(B). $("p").prependTo("#box") : ajoute le contenu des éléments <p>, à la division portant l’identifiant "box" et au début de celleci.
  • 58. Modifier le contenu Supprimer un élément remove() Supprime de l’arbre du DOM, tous les éléments répondant aux critères de sélection. $("p").remove() : supprime le paragraphe. Vider un élément empty() Supprime tous les noeuds enfants de l’élément sélectionné. $("p").empty() : supprime le contenu du paragraphe.
  • 60. Asynchronous JavaScript and XML La requête AJAX complète ajax(options) Réalise une requête HTTP asynchrone (AJAX). $.ajax({ url: "test.txt", dataType: " html", success: function(data ) { $("#resultat").html(data); } }); url (obligatoire): une chaîne de caractères contenant l’adresse de la requête. type (optionnel) : une chaîne de caractères qui définit la méthode HTTP à utiliser pour la requête (GET ou POST). La valeur par défaut est GET.
  • 61. Asynchronous JavaScript and XML • dataType (optionnel) : une chaîne de caractères qui spécifie le format des données qui seront renvoyées par le serveur (xml, html, json ou script). Si rien n’est spécifié, jQuery utilisera le type MIME pour déterminer le format adéquat soit responseXML ou ResponseText. Les types disponibles sont : –"xml" : retourne un document XML qui pourra être traité par jQuery. –"html " : retourne du code Html au format texte. –"script" : évalue la réponse en JavaScript et retourne cette dernière au format texte. –"json" : évalue la réponse en JSON et retourne un objet JavaScript. • timeout (optionnel) : nombre de millisecondes après lequel la requête est considérée comme non réussie.
  • 62. Asynchronous JavaScript and XML • success (optionnel) : fonction à appeler si la requête s’exécute avec succès. Un seul argument est passé en paramètre soit les données retournées par le serveur. • error (optionnel) : une fonction qui doit être appelée en cas d’échec de la requête • beforeSend (optionnel) : une fonction qui doit être exécutée avant l’envoi de la requête. • data (optionnel) : données à envoyer au serveur(type=‘POST’). L’objet doit être formé de paires de ‘cle1=valeur1&cle2=valeur2&…..’ • cache (optionnel) : une valeur booléenne qui, lorsqu’elle est mise sur false, empêche la page chargée d’être mise dans le cache du navigateur.