Formation complet Ajax jQuery

(1)

JQuery Emeline DOREY Présentation Installation Syntaxe Sélecteurs Méthodes de manipulation du DOM Les évènements Les effets Propriété Parcours des listes AJAX

JQuery

Emeline DOREY

Mars 2018

(2)

1 Pr´

esentation

2 _Installation

3 Syntaxe

4 S´

electeurs

5 M´

ethodes de manipulation du DOM

6 Les ´

ev`

enements

7 Les effets

8 Propri´

et´

e

9 Parcours des listes

(3)

Pr´

esentation

JQuery ⇒ biblioth`

eque JavaScript (libre) qui porte sur

l’interaction entre JavaScript et HTML.

D´

eveloppement de scripts plus rapide.

Scripts plus concis.

Commandes communes de JavaScript simplifi´

ees.

Compatible avec beaucoup de navigateurs.

Premi`

ere version ⇒ Janvier 2006.

(4)

Pr´

e-requis ⇒ connaˆıtre :

HTML ⇒ au moins les balises,

CSS ⇒ au moins les s´

electeurs,

JavaScript (les ´

ev´

enements...),

DOM.

(5)

Installation

JQuery est un fichier JS ⇒ A t´

el´

echarger sur

jquery.com

Version de production ⇒ compress´

ee, pour les versions

publiques des sites. Le code source n’est pas destin´

e `

a

ˆ

etre consult´

e.

Version de d´

eveloppement ⇒ code source lisible.

Int´

egrer ce JS dans la page Web

Si la librairie se nomme jquery.js et se trouve dans le

mˆ

eme r´

epertoire que la page courante, au niveau du

head de cette page, il faut d´

eclarer :

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

script>

(6)

La syntaxe jQuery permet la s´

election d’´

el´

ements

HTML et l’ex´

ecution d’actions sur ces ´

el´

ements.

Syntaxe de base ⇒ $(selecteur).action()

$ ⇒ d´

efinition d’un objet de classe jQuery

(selecteur) ⇒ requˆ

ete de s´

election des ´

el´

ements HTML

action() ⇒ action `

a ex´

ecuter sur les ´

el´

ements

s´

electionn´

es

Exemples :

$(this).hide() ⇒ Masque l’´

el´

ement courant

$(’div’).hide() ⇒ Masque les ´

el´

ements div

$(’.toto’).hide() ⇒ Masque les ´

el´

ements ayant

class=’toto’

(7)

S´

electeurs

Avantage de jQuery ⇒ int`

egre la syntaxe de diff´

erents

s´

electeurs, permettant de cibler facilement les ´

el´

ements

HTML `

a traiter :

Les s´

electeurs CSS.

(8)

* Sélecteur universel Tous les éléments de la page #id Sélecteur d’ID Cible un élément par son identifiant (id unique) .class Sélecteur de classes Cible des éléments par leur classe

A Sélecteur de type Cible les éléments A (c’est à dire un élément de type A) A,B,C Sélecteur de type Cible les éléments A, B et C

A B Sélecteur descendant Cible l’élément B, enfant de l’élément A A > B Sélecteur d’enfant Cible l’élément B, enfant direct de l’élément A A + B Sélecteur adjacent Cible l’élément B, précédé immédiatement par un élément A A ∼ B Sélecteur adjacent (Semblable à A+B, en moins strict.)Cible les éléments B qui suivent un élément A A[attr] Sélecteur d’attribut Cible tout élément A ayant un attribut attr

A[attr=”valeur”] Sélecteur d’attribut Cible tout élément A ayant un attribut attr égal à valeur A[attr*=”valeur”] Sélecteur d’attribut Cible tout élément A ayant un attribut attr contenant valeur A[attrˆ=”valeur”] Sélecteur d’attribut Cible tout élément A ayant un attribut attr commencant par valeur A[attr$=”valeur”] Sélecteur d’attribut Cible tout élément A ayant un attribut attr qui se termine par valeur

A[attr∼=”valeur”] Sélecteur d’attribut Cible tout élément A dont l’attribut attr a pour valeur une liste de valeurs séparées par des espaces et dont l’une d’elle est valeur A[attr|=”valeur”] Sélecteur d’attribut Cible tout élément A dont l’attribut attr a pour valeur une liste des valeurs séparées par des tirets. Cette liste commence par valeur A:checked Pseudo-classe Cible les éléments A qui sont cochés (bouton radio ou case à cocher)

A:hover Pseudo-classe Survole de l’´el´ement A

A:not(selecteur) Pseudo classe de négativation Cible les éléments A qui ne répondent pas au selecteur A:first-child Pseudo-classe Cible le premier enfant de l’élément A A:last-child Pseudo-classe Cible le dernier enfant de l’élément A

(9)

Quelques s´

electeurs jQuery

:eq(index) Cible l’élément présent à l’indice spécifié (index) $(’p:eq(0)’) sélectionne le premier paragraphe de la page :gt(index) Sélectionne tous les éléments ayant un indice supérieur à index (’p:gt(1)’)

:lt(index) Sélectionne tous les éléments ayant un indice inférieur à index (’p:lt(3)’)

:even Cible les éléments paires $(’td:even’) toutes les colonnes paires :odd Cible les éléments impaires $(’td:odd’) toutes les colonnes impaires

(10)

JQuery Emeline DOREY Présentation Installation Syntaxe Sélecteurs Méthodes de manipulation du DOM

Les évènements Les effets Propriété Parcours des listes AJAX

$(document).ready(function(){

// code jQuery...

});

M´

ethode permettant d’attendre le chargement total de

la page.

$(function(){

// code jQuery...

});

JQuery ex´

ecutera cette fonction lorsque le DOM sera

charg´

e.

(11)

M´

ethodes de manipulation du DOM

Insertion

Quelques m´

ethodes d’insertion :

after(elt) ⇒ Insertion de l’´

el´

ement elt apr`

es les

´

el´

ements s´

electionn´

es.

$(’div’).after(’<p>Nouveau texte</p>’);

Insertion du paragraphe apr`

es le bloc.

before(elt) ⇒ Insertion de l’´

el´

ement elt avant les

´

el´

ements s´

electionn´

es.

$(’div’).before(’<p>Nouveau texte</p>’);

Insertion du paragraphe avant le bloc.

(12)

Insertion

append(elt) ⇒ Insertion de l’´

el´

ement elt `

a la fin des

´

el´

ements s´

electionn´

es.

$(’div’).append(’Nouveau texte’);

Insertion du texte `

a la fin du bloc.

appendTo(selecteur) ⇒ Insertion des ´

el´

ements de la

liste `

a la fin des ´

el´

ements cibl´

es par selecteur.

//Creation d’une image

var image = $(’<img src="toto.png" alt="toto" />’);

//Insertion de cette image dans le bloc ’zone’

image.appendTo($(’div#zone’));

(13)

M´

ethodes de manipulation du DOM

Insertion

prepend(elt) ⇒ Insertion de l’´

el´

ement elt au d´

ebut des

´

el´

ements s´

electionn´

es.

$(’div’).prepend(’Nouveau texte’);

(14)

Suppression

Quelques m´

ethodes de suppression :

remove(selecteur) ⇒ Suppression des ´

el´

ements qui

correspondent au s´

electeur pass´

e en param`

etre.

$(’div’).remove(’$(p)’);

Suppression des paragraphes pr´

esents dans les blocs de

la page.

remove() ⇒ Suppression des ´

el´

ements s´

electionn´

es.

$(’#lstBlocs’).children().remove();

Suppression de tous les ´

el´

ements enfants pr´

esents dans

(15)

M´

ethodes de manipulation du DOM

Suppression

empty() ⇒ Suppression du contenu des ´

el´

ements

s´

electionn´

es (ne supprime pas l’´

el´

ement lui-mˆ

eme).

$(’p’).empty();

(16)

Contenu textuel

text() ⇒ retourne le contenu textuel de l’´

el´

ement

courant.

text(’txt’) ⇒ affecte le texte txt `

a l’´

el´

ement courant.

//Retourne le contenu textuel des paragraphes

$(’p’).text();

//Affectation du texte "Coucou" au paragraphe "titi"

$(’p#titi’).text("Coucou");

(17)

M´

ethodes de manipulation du DOM

S´

election d’´

el´

ements

find(selecteur) ⇒ r´

ecup`

ere tous les ´

el´

ements

selecteur.

$(’div#liste’).find(’h3’);

Retourne toutes les balises h3 pr´

esentent dans la balise

(18)

Attributs

attr(nomAttribut) ⇒ retourne la valeur de l’attribut

nomAttribut.

$(’em’).attr(’title’);

(19)

M´

ethodes de manipulation du DOM

Attributs

attr(nomAttribut, valeur) ⇒ affecte valeur `

a

l’attribut nomAttribut.

$(’img#toto’).attr(’alt’,’image1’);

Affecte `

a la balise img, ayant l’identifiant toto,

(20)

CSS

css(nomPropriete) ⇒ retourne la propri´

et´

e CSS

nomPropriete.

$(this).css(’background-color’);

(21)

M´

ethodes de manipulation du DOM

CSS

css(nomPropriete, valeur) ⇒ affecte valeur `

a la

propri´

et´

e CSS nomPropriete.

$(this).css(’background-color’, ’#FFB300’);

Affecte la couleur ’#FFB300’ `

a l’arri`

ere plan de

(22)

Les ´ev`enements

Les effets Propri´et´e Parcours des listes AJAX

Gestionnaire d’´

ev`

enements

on(typeEvnt, appelFonction) ⇒ instruction qui

permet d’attacher des ´

ev`

enements aux ´

el´

ements

s´

electionn´

es. L’´

ev`

enement de type typeEvnt

d´

eclenchera la fonction appelFonction.

$(’#btn’).on(’click’, jouer);

Lancement de la fonction JS jouer lors du clique sur

(23)

Les ´ev`enements

Les effets Propri´et´e Parcours des listes AJAX

Les ´

ev`

enements

Gestionnaire d’´

ev`

enements

off(typeEvnt) ⇒ suppression du gestionnaire

d’´

ev`

enement ajout´

e pr´

ec´

edemment, pour l’´

ev`

enement

typeEvnt sp´

ecifi´

e.

$(’#btn’).off(’click’);

L’´

element ayant pour identifiant btn ne dispose plus

(24)

JQuery Emeline DOREY Présentation Installation Syntaxe Sélecteurs Méthodes de manipulation du DOM Les évènements

Les effets

Propri´et´e Parcours des listes AJAX

Afficher/Masquer

show() ⇒ m´

ethode permettant d’afficher les ´

el´

ements

cach´

es s´

electionn´

es.

Elle travaille sur des ´

el´

ements cach´

es par les m´

ethodes

jQuery ou par display:none dans CSS.

Elle ne fonctionne par sur l’instruction CSS

visibility:hidden.

$(’p#para1’).show();

Affiche le paragraphe ayant pour identifiant para1.

hide() ⇒ m´

ethode permettant de masquer les ´

el´

ements

s´

electionn´

es.

(25)

JQuery Emeline DOREY Présentation Installation Syntaxe Sélecteurs Méthodes de manipulation du DOM Les évènements Les effets

Propri´et´e

Parcours des listes AJAX

Propri´

et´

e - length

.length ⇒ propri´

et´

e qui retourne le nombre d’´

el´

ements

s´

electionn´

es.

var nbDiv = $(’div’).length;

(26)

JQuery Emeline DOREY Présentation Installation Syntaxe Sélecteurs Méthodes de manipulation du DOM Les évènements Les effets Propriété

Parcours des listes

AJAX

.each(function(index,[element])) ⇒ parcourt la liste

d’´

el´

ements s´

electionn´

es.

index ⇒ commence `

a 0

element ⇒ ´

el´

ement DOM de la liste pr´

esent `

a l’indice

index. Non obligatoire, il peut ˆ

etre acc´

ed´

e dans la

fonction par la valeur this.

$(’li’).each

(

function(index){

var txt = $(this).text();

alert(txt);

}

);

(27)

JQuery Emeline DOREY Présentation Installation Syntaxe Sélecteurs Méthodes de manipulation du DOM Les évènements Les effets Propriété Parcours des listes

AJAX

AJAX est int´

egr´

e `

a JQuery, via la fonction :

$.ajax({parametres});

Cette fonction retourne l’objet XMLHttpRequest qu’il

cr´

eer

Les principaux param`

etres de cette fonction sont :

type ⇒ GET, POST, PUT, DELETE (GET par

d´

efaut)

url ⇒ url vers laquelle la requˆ

ete sera envoy´

ee

data ⇒ donn´

ees `

a envoyer

dataType ⇒ type de donn´

ees attendu en retour du

serveur (xml, html, script, json, jsonp, text). S’il

(28)

AJAX

$.ajax({parametres});

success ⇒ traitements `

a effectuer en cas de succ`

es de

la requˆ

ete (retours HTTP 2..)

error ⇒ traitements `

a effectuer en cas d’erreur de la

requˆ

ete (retours HTTP 4.. ou 5..)

complete ⇒ fonction appel´

ee `

a la fin de la requˆ

ete

(apr`

es ex´

ecution des services de succ`

es et de retours

(29)

AJAX

AJAX - Exemple d’appel avec param`

etre

$. ajax({

type : ’ get ’ ,

url : ’ simulateur . php’,

data: ’ mode=xml’,

dataType: ’ xml’ ,

success : function (dataXml, textStatus , jqXHR){

//La reponse du serveur est contenue dans ’dataXml’

//Coder les traitements a lancer en cas de succes ...

traitementEtabs(dataXml);

},

error : function (jqXHR, textStatus, errorThrown){

//Une erreur s ’ est produite lors de la requete

alert ( ’ ERREUR retour serveur’);

}

(30)

AJAX

ajaxExemple1 jquery.html

<!DOCTYPE html>

<html>

<head>

<meta http−equiv=”Content−Type” content=”text/html; charset=UTF

−8”>

<script type=”text/ javascript ” src=”js/jquery−1.8.3. js ”></script>

<script type=”text/ javascript ” src=”ajaxExemple1 jquery.js”></script

>

</head>

<body>

<form name=”ajax” method=”POST” action=””>

<p>

<input type=”button” value=”Submit” onclick=”submitForm();”>

</p>

<div id=”zoneModif”>

Texte de depart

</div>

</form>

</body>

</html>

(31)

AJAX

AJAX - Exemple complet

ajaxExemple1 jquery.js

function submitForm()

{

$. ajax({

type : ’ get ’ ,

url : ’ tab.html’ ,

dataType: ’ html’ ,

success : function (dataXml, textStatus , jqXHR){

//La rponse du serveur est contenue dans ’dataXml’

document.getElementById(”zoneModif”).innerHTML = dataXml;

},

error : function (jqXHR, textStatus, errorThrown){

//Une erreur s ’ est produite lors de la

requte

document.getElementById(”zoneModif”).innerHTML =”Erreur:

code d’etat ” + errorThrown + ” ” + textStatus;

}

}) ;

}

(32)

AJAX

tab.html

<h1>Test Ajax</h1>

<table border=”1”>

<tr colspan=”2”>Tableau</tr>

<tr>

<td>colonne 1</td>

<td>colonne 2</td>

</tr>

<table>

(33)

AJAX

AJAX - GET

Autre m´

ethode pour charger une page avec la m´

ethode

GET :

$.get(url, [data], [function(data, textStatus, jqXHR)

], [dataType]);

url ⇒ (obligatoire) url de la page `

a charger

data ⇒ (optionnel ) donn´

ees `

a envoyer au serveur avec

la requˆ

ete

(34)

AJAX

$.get(url, [data], [function(data, textStatus, jqXHR)

], [dataType]);

function(data, textStatus, jqXHR) ⇒ (optionnel )

fonction `

a ex´

ecuter lorsque les donn´

ees de retours du

serveur sont charg´

ees avec succ`

es

data ⇒ contient les donn´

ees r´

esultat de la requˆ

ete

textStatus ⇒ contient le statut de la requˆ

ete

(’success’, ’notmodified’, ’error’, ’timeout’ ou

’parsererror’)

jqXHR ⇒ contient l’objet XMLHttpRequest

dataType ⇒ (optionnel ) sp´

ecifie le format des donn´

ees

renvoy´

ees par le serveur `

a la fonction pr´

ec´

edente (xml,

html, script, json, jsonp, text)

(35)

AJAX

AJAX - GET

$.get(url, [data], [function(data, textStatus, jqXHR)

], [dataType]);

Valeur de retour ⇒ XMLHttpRequest

Fonction raccourcis ne permettant que le traitement des

requˆ

etes

Si vous devez appeler des fonctions pour les retours

’success’ et ’error’, vous devez utiliser la fonction $.ajax

(36)

AJAX

$.get(

’ simulateur . php’,

’ mode=xml’,

function (data, textStatus , jqXHR){

traitementEtabs(data) ;

},

’ xml’

) ;

(37)

AJAX

AJAX - POST

Autre m´

ethode pour charger une page avec la m´

ethode

POST :

$.post(url, [data], [function(data, textStatus, jqXHR

)], [dataType]);