SlideShare une entreprise Scribd logo
Introduction à jQuery
Title | Date
Qu’est-ce que
jQuery ?
jQuery est une bibliothèque JavaScript libre et
multiplateforme créé pour faciliter le scripting coté
client pour manipuler de l’HTML et du CSS.
Title | Date
À quoi ça sert ?
• une approche ‘Write less, do more’
• Parcourir et modifier le DOM
• Manipuler et gérer les événements
• Mettre en place des effets visuels et des animations
• Manipuler des feuilles de style CSS
• Ajax
• Utilitaires
Title | Date
Commencer avec jQuery
• Inclure jQuery dans votre document avant la
balise </body>
• En local : <script src=“js/jquery.js”></
script>
• Une bibliothèque hébérgée :
• <script src=“https://ajax.googleapis.com/
ajax/libs/jquery/2.1.3/jquery.min.js”></
script>
Title | Date
Commencer avec jQuery
• Les fonctions jQuery devraient s’exécuter
uniquement une fois le DOM (la structure HTML)
de votre page chargé. Pour s’en assurer, on les
englobe dans une fonction globale qui
s’active uniquement quand le DOM est chargé
:

$(document).ready(function(){

// YOUR CODE GOES HERE

});
Title | Date
Quelques exemples de jQuery
• $(‘div’).hide();
• $(‘#form’).addClass(‘alert’);
• $(‘.address-box’).css(‘background-
color’,’blue’);
• $(‘button’).click(function(){

$(‘div’).show();

})
Title | Date
L’enchaînement des méthodes jQuery
• Les méthodes jQuery peuvent s’enchaîner pour
faire plusieurs actions sur le le même élément.
• $(‘div’).css(‘background-
color’,’brown’).fadeIn().append(‘<p>Success!</p>’);
Title | Date
La fonction jQuery()
• La fonction jQuery() peut s’écrire aussi comme
$(). Elle est la fonction de base de jQuery et
elle permet d’accéder à toutes les méthodes
de la bibliothèque.
Title | Date
La fonction jQuery()
• Sélectionner des éléments avec les sélecteurs CSS
• jQuery(‘#mon_id’) ou $(‘#mon_id’)
• jQuery(‘.ma_classe’) ou $(‘.ma_class’)
• jQuery(‘div’) ou $(‘div’)
• Appeler des méthodes sur les éléments sélectionnés :
• $(‘#mon_id’).addClass(“blue");
• $(‘p’).hide();
• Appeler d’autres méthodes jQuery :
• $.get( "test.php", function( data ) {

alert( "Data Loaded: " + data );

});
Title | Date
La fonction jQuery()
• Sélectionner des éléments avec les sélecteurs CSS
• jQuery(‘#mon_id’) ou $(‘#mon_id’)
• jQuery(‘.ma_classe’) ou $(‘.ma_class’)
• jQuery(‘div’) ou $(‘div’)
• Appeler des méthodes sur les éléments sélectionnés :
• $(‘#mon_id’).addClass(“blue");
• $(‘p’).hide();
• Appeler d’autres méthodes jQuery :
• $.get( "test.php", function( data ) {

alert( "Data Loaded: " + data );

});
Title | Date
Exercises
• Télécharger les documents HTML via ce lien : http://
cours.marknightingale.net/files/jquery/exo1.zip
• Avec jQuery et en ajoutant et supprimant des classes :
• Rendre le premier div bleu
• Rendre le deuxième div vert
• Rendre le premier div bleue, le deuxième vert, le
troisième jaune
• Rendre tous les trois divs de test jaune
Title | Date
Les méthodes de jQuery
• La documentation de jQuery
est très complète : https://
api.jquery.com
• Quelques méthodes utiles :
• .hide()
• .show()
• .toggle()
• .html()
• .text()
• .val()
• .append()
• .prepend()
• .css()
• .attr()
• .addClass()
• .removeClass()
• .toggleClass()
Title | Date
.hide(), .show(), .toggle()
Les méthodes .hide(), .show() et .toggle()
permettent d’afficher ou cacher des éléments
du DOM. En effet ces méthodes définissenent
simplement des styles inline sur la propriété
‘display:’.
Toggle permet d’alterner entre hide() et show()
en fonction de l’état actuel de l’élément : si
l’élément est actuellement caché il sera affiché,
et vice-versa.
Title | Date
.html(), .val(), .text()
Ces méthodes permettent de récupérer et définir le
contenu d’un élément.
var contenu = $(‘div’).html() > récupère le contenu
entier d’un div (HTML, texte etc.).
var text = $(‘div’).text() > récupère le text du div (sans
les balises HTML)
var val = $(‘input’).val() > récupère la valeur d’un
champ input
Title | Date
.html(), .val(), .text()
Les méthodes peuvent également être utilisées pour définir ces
mêmes attributs
$(‘div’).html(‘<p>Paragraphe</p>’) > défini le contenu du div (on
remplace le contenu avec un <p>
$(‘div’).text(‘Paragraphe’) > Remplace le contenu du div avec
le text ‘Paragraphe’.
N.B $(‘div’).text(‘<p>Paragraphe</p>’) écrira <p>Paragraphe</p> à
l’intérieur du div, les <p></p> étant affichés à l’écran en tant que text et
pas du HTML
$(‘input).val(‘contact@strasweb.fr’) > remplace la valeur d’un
champs input par contact@strasweb.fr
Title | Date
.append() et .prepend()
Lorsque .html() remplace l’HTML d’un élément,
ces deux méthodes permettent d’insérer du
HTML (append après le contenu existant,
prepend avant).
Title | Date
.css()
.css() 

permet de récuperer ou définir la valeur d’une
propriété CSS d’un élément
var backgroundColor = $(‘div’).css(‘background-
color’) 

Récupère la couleur de fond d’un élément
$(‘div’).css(‘background-color’,’green’) 

défini la couleur de fond comme vert
Title | Date
.attr()
.attr() permet de récupérer ou définir un attribut
HTML d’un élément.
var imgSrc = $(‘img’).attr(‘src’) 

récupère l’URL de l’image
$(‘img’).attr(‘src’,’http://mondomaine.com/
image.png') 

définir l’URL de l’image (et change donc l’image
affichée).
Title | Date
.addClass(), .removeClass(), .toggleClass
()
Permet d’ajouter, enlever ou toggle les classes
d’un élement.
.toggleClass() fonctionne de la même manière
que .toggle()
Title | Date
Les gestionnaires d’événements jQuery
• jQuery permet aussi de gérer les événements
Javascript, et d’y associer des fonctions :
• $(‘.button’).click(function(){

// Do something on click here like change 

the color

$(‘.text’).css(‘color’,’red’); 

});
Title | Date
Les gestionnaires d’événements jQuery
• Le syntaxe suivant doit être respecté :
• 



$(‘.button’).click(function(){

$(‘.text’).css(‘color’,’red’); 

});
selecteur
fonction ‘helper’ qui associe à
l’événement ‘click’ sur cet élément
fonction qui contient les
instructions de ce qu’il faut faire
quand on clique
Title | Date
Les gestionnaires d’événements jQuery
• Quelques ‘event
binders’ utiles :
• .click()
• .hover()
• .ready()
• .load()
• .focus()
• .blur()
• .submit()
Title | Date
Exercises jQuery
Quelques exercices jQuery : http://www.w3resource.com/
jquery-exercises/jquery-core-exercises.php (en)
Quelques drills jQuery : http://jqexercise.droppages.com/ (en)
Encore quelques méthodes utiles :
.clone()
.insertAfter()
.insertBefore()
Title | Date
Exercises jQuery
Quelques exercices à faire avec le template de l’Exercice 1 :
• Insérer l’HTML suivant dans le document : 

<button id=“mybutton”>Hop-là!</button>
• Avec jQuery créer les fonctions qui permettent :
• De changer le couleur de fond (de <body>) à red quand on clique sur le bouton.
• De cacher tous les divs test quand on clique sur le bouton
• De supprimer un div quand on clique sur le bouton (méthode .remove())
• D’ajouter la classe ‘green’ à tous les divs quand on clique
• D’enlever toutes les classes quand on clique
• D’ajouter la classe ‘green’ à un div quand on le survole (astuce : utilisez le mot-clé $
(this) pour sélectionner l’élément qui a déclenché l’événement. )

Contenu connexe

Tendances

Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
kadzaki
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql cours
zan
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
Pierre Faure
 
CocoaHeads Toulouse - Getting to the core of Core Data
CocoaHeads Toulouse - Getting to the core of Core DataCocoaHeads Toulouse - Getting to the core of Core Data
CocoaHeads Toulouse - Getting to the core of Core DataCocoaHeads France
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Marzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEEMarzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEE
abderrahim marzouk
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
kadzaki
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Netvibes
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
abderrahim marzouk
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575kate2013
 
Draft - Developper Sur Elgg
Draft - Developper Sur ElggDraft - Developper Sur Elgg
Draft - Developper Sur Elgg
Brice Gaillard
 

Tendances (18)

Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql cours
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
CocoaHeads Toulouse - Getting to the core of Core Data
CocoaHeads Toulouse - Getting to the core of Core DataCocoaHeads Toulouse - Getting to the core of Core Data
CocoaHeads Toulouse - Getting to the core of Core Data
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Marzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEEMarzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEE
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
HTML5
HTML5HTML5
HTML5
 
Javascript
JavascriptJavascript
Javascript
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
 
Draft - Developper Sur Elgg
Draft - Developper Sur ElggDraft - Developper Sur Elgg
Draft - Developper Sur Elgg
 

En vedette

jQuery Best Practice
jQuery Best Practice jQuery Best Practice
jQuery Best Practice
chandrashekher786
 
jQuery
jQueryjQuery
jQuery
jQueryjQuery
jQuery
Jay Poojara
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
Dominic Arrojado
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Marc Grabanski
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Olivier Le Goaër
 

En vedette (8)

jQuery Best Practice
jQuery Best Practice jQuery Best Practice
jQuery Best Practice
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 

Similaire à Jquery - introduction au langage

Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
Abdoulaye Dieng
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Korteby Farouk
 
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssOWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssParis Open Source Summit
 
Jquery
JqueryJquery
Jquery
krymo
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelierAlgeria JUG
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
Abdoulaye Dieng
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
OualidBelbrik
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
radjadjouambi1
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
Philippe Sfeir
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 
CSS 3
CSS 3CSS 3
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
PROFPROF11
 
Html5 2
Html5 2Html5 2
Html5 2
TECOS
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
DNG Consulting
 
2014 03-12-fr schema design and app architecture-2
2014 03-12-fr schema design and app architecture-22014 03-12-fr schema design and app architecture-2
2014 03-12-fr schema design and app architecture-2MongoDB
 

Similaire à Jquery - introduction au langage (20)

Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWiki
 
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssOWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
 
Jquery
JqueryJquery
Jquery
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelier
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
CSS 3
CSS 3CSS 3
CSS 3
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
 
Html5 2
Html5 2Html5 2
Html5 2
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
2014 03-12-fr schema design and app architecture-2
2014 03-12-fr schema design and app architecture-22014 03-12-fr schema design and app architecture-2
2014 03-12-fr schema design and app architecture-2
 

Plus de StrasWeb

Audit de site web
Audit de site webAudit de site web
Audit de site web
StrasWeb
 
Initiation au référencement
 Initiation au référencement Initiation au référencement
Initiation au référencement
StrasWeb
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
StrasWeb
 
Les MOOC, apprendre autrement grâce à Internet
 Les MOOC, apprendre autrement grâce à Internet Les MOOC, apprendre autrement grâce à Internet
Les MOOC, apprendre autrement grâce à Internet
StrasWeb
 
Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?
StrasWeb
 
Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiantsStrasWeb
 
E-marketing pour les débutants
E-marketing pour les débutantsE-marketing pour les débutants
E-marketing pour les débutants
StrasWeb
 
JavaScript
JavaScriptJavaScript
JavaScript
StrasWeb
 
Utiliser les réseaux sociaux pour communiquer
 Utiliser les réseaux sociaux pour communiquer Utiliser les réseaux sociaux pour communiquer
Utiliser les réseaux sociaux pour communiquer
StrasWeb
 
Licences libres : utopie ou modèle économique ?
 Licences libres : utopie ou modèle économique ? Licences libres : utopie ou modèle économique ?
Licences libres : utopie ou modèle économique ?
StrasWeb
 
Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.
StrasWeb
 
L'auto hébergement
L'auto hébergementL'auto hébergement
L'auto hébergement
StrasWeb
 
Initiation au php
Initiation au phpInitiation au php
Initiation au php
StrasWeb
 
Naviguer en sécurité
Naviguer en sécuritéNaviguer en sécurité
Naviguer en sécurité
StrasWeb
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
StrasWeb
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site web
StrasWeb
 
Les tendances du webdesign
Les tendances du webdesignLes tendances du webdesign
Les tendances du webdesign
StrasWeb
 
Initiation au CSS
Initiation au CSSInitiation au CSS
Initiation au CSS
StrasWeb
 
Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
StrasWeb
 
Découverte des licences libres
Découverte des licences libresDécouverte des licences libres
Découverte des licences libres
StrasWeb
 

Plus de StrasWeb (20)

Audit de site web
Audit de site webAudit de site web
Audit de site web
 
Initiation au référencement
 Initiation au référencement Initiation au référencement
Initiation au référencement
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
Les MOOC, apprendre autrement grâce à Internet
 Les MOOC, apprendre autrement grâce à Internet Les MOOC, apprendre autrement grâce à Internet
Les MOOC, apprendre autrement grâce à Internet
 
Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?
 
Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiants
 
E-marketing pour les débutants
E-marketing pour les débutantsE-marketing pour les débutants
E-marketing pour les débutants
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Utiliser les réseaux sociaux pour communiquer
 Utiliser les réseaux sociaux pour communiquer Utiliser les réseaux sociaux pour communiquer
Utiliser les réseaux sociaux pour communiquer
 
Licences libres : utopie ou modèle économique ?
 Licences libres : utopie ou modèle économique ? Licences libres : utopie ou modèle économique ?
Licences libres : utopie ou modèle économique ?
 
Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.
 
L'auto hébergement
L'auto hébergementL'auto hébergement
L'auto hébergement
 
Initiation au php
Initiation au phpInitiation au php
Initiation au php
 
Naviguer en sécurité
Naviguer en sécuritéNaviguer en sécurité
Naviguer en sécurité
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site web
 
Les tendances du webdesign
Les tendances du webdesignLes tendances du webdesign
Les tendances du webdesign
 
Initiation au CSS
Initiation au CSSInitiation au CSS
Initiation au CSS
 
Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
 
Découverte des licences libres
Découverte des licences libresDécouverte des licences libres
Découverte des licences libres
 

Jquery - introduction au langage

  • 2. Title | Date Qu’est-ce que jQuery ? jQuery est une bibliothèque JavaScript libre et multiplateforme créé pour faciliter le scripting coté client pour manipuler de l’HTML et du CSS.
  • 3. Title | Date À quoi ça sert ? • une approche ‘Write less, do more’ • Parcourir et modifier le DOM • Manipuler et gérer les événements • Mettre en place des effets visuels et des animations • Manipuler des feuilles de style CSS • Ajax • Utilitaires
  • 4. Title | Date Commencer avec jQuery • Inclure jQuery dans votre document avant la balise </body> • En local : <script src=“js/jquery.js”></ script> • Une bibliothèque hébérgée : • <script src=“https://ajax.googleapis.com/ ajax/libs/jquery/2.1.3/jquery.min.js”></ script>
  • 5. Title | Date Commencer avec jQuery • Les fonctions jQuery devraient s’exécuter uniquement une fois le DOM (la structure HTML) de votre page chargé. Pour s’en assurer, on les englobe dans une fonction globale qui s’active uniquement quand le DOM est chargé :
 $(document).ready(function(){
 // YOUR CODE GOES HERE
 });
  • 6. Title | Date Quelques exemples de jQuery • $(‘div’).hide(); • $(‘#form’).addClass(‘alert’); • $(‘.address-box’).css(‘background- color’,’blue’); • $(‘button’).click(function(){
 $(‘div’).show();
 })
  • 7. Title | Date L’enchaînement des méthodes jQuery • Les méthodes jQuery peuvent s’enchaîner pour faire plusieurs actions sur le le même élément. • $(‘div’).css(‘background- color’,’brown’).fadeIn().append(‘<p>Success!</p>’);
  • 8. Title | Date La fonction jQuery() • La fonction jQuery() peut s’écrire aussi comme $(). Elle est la fonction de base de jQuery et elle permet d’accéder à toutes les méthodes de la bibliothèque.
  • 9. Title | Date La fonction jQuery() • Sélectionner des éléments avec les sélecteurs CSS • jQuery(‘#mon_id’) ou $(‘#mon_id’) • jQuery(‘.ma_classe’) ou $(‘.ma_class’) • jQuery(‘div’) ou $(‘div’) • Appeler des méthodes sur les éléments sélectionnés : • $(‘#mon_id’).addClass(“blue"); • $(‘p’).hide(); • Appeler d’autres méthodes jQuery : • $.get( "test.php", function( data ) {
 alert( "Data Loaded: " + data );
 });
  • 10. Title | Date La fonction jQuery() • Sélectionner des éléments avec les sélecteurs CSS • jQuery(‘#mon_id’) ou $(‘#mon_id’) • jQuery(‘.ma_classe’) ou $(‘.ma_class’) • jQuery(‘div’) ou $(‘div’) • Appeler des méthodes sur les éléments sélectionnés : • $(‘#mon_id’).addClass(“blue"); • $(‘p’).hide(); • Appeler d’autres méthodes jQuery : • $.get( "test.php", function( data ) {
 alert( "Data Loaded: " + data );
 });
  • 11. Title | Date Exercises • Télécharger les documents HTML via ce lien : http:// cours.marknightingale.net/files/jquery/exo1.zip • Avec jQuery et en ajoutant et supprimant des classes : • Rendre le premier div bleu • Rendre le deuxième div vert • Rendre le premier div bleue, le deuxième vert, le troisième jaune • Rendre tous les trois divs de test jaune
  • 12. Title | Date Les méthodes de jQuery • La documentation de jQuery est très complète : https:// api.jquery.com • Quelques méthodes utiles : • .hide() • .show() • .toggle() • .html() • .text() • .val() • .append() • .prepend() • .css() • .attr() • .addClass() • .removeClass() • .toggleClass()
  • 13. Title | Date .hide(), .show(), .toggle() Les méthodes .hide(), .show() et .toggle() permettent d’afficher ou cacher des éléments du DOM. En effet ces méthodes définissenent simplement des styles inline sur la propriété ‘display:’. Toggle permet d’alterner entre hide() et show() en fonction de l’état actuel de l’élément : si l’élément est actuellement caché il sera affiché, et vice-versa.
  • 14. Title | Date .html(), .val(), .text() Ces méthodes permettent de récupérer et définir le contenu d’un élément. var contenu = $(‘div’).html() > récupère le contenu entier d’un div (HTML, texte etc.). var text = $(‘div’).text() > récupère le text du div (sans les balises HTML) var val = $(‘input’).val() > récupère la valeur d’un champ input
  • 15. Title | Date .html(), .val(), .text() Les méthodes peuvent également être utilisées pour définir ces mêmes attributs $(‘div’).html(‘<p>Paragraphe</p>’) > défini le contenu du div (on remplace le contenu avec un <p> $(‘div’).text(‘Paragraphe’) > Remplace le contenu du div avec le text ‘Paragraphe’. N.B $(‘div’).text(‘<p>Paragraphe</p>’) écrira <p>Paragraphe</p> à l’intérieur du div, les <p></p> étant affichés à l’écran en tant que text et pas du HTML $(‘input).val(‘contact@strasweb.fr’) > remplace la valeur d’un champs input par contact@strasweb.fr
  • 16. Title | Date .append() et .prepend() Lorsque .html() remplace l’HTML d’un élément, ces deux méthodes permettent d’insérer du HTML (append après le contenu existant, prepend avant).
  • 17. Title | Date .css() .css() 
 permet de récuperer ou définir la valeur d’une propriété CSS d’un élément var backgroundColor = $(‘div’).css(‘background- color’) 
 Récupère la couleur de fond d’un élément $(‘div’).css(‘background-color’,’green’) 
 défini la couleur de fond comme vert
  • 18. Title | Date .attr() .attr() permet de récupérer ou définir un attribut HTML d’un élément. var imgSrc = $(‘img’).attr(‘src’) 
 récupère l’URL de l’image $(‘img’).attr(‘src’,’http://mondomaine.com/ image.png') 
 définir l’URL de l’image (et change donc l’image affichée).
  • 19. Title | Date .addClass(), .removeClass(), .toggleClass () Permet d’ajouter, enlever ou toggle les classes d’un élement. .toggleClass() fonctionne de la même manière que .toggle()
  • 20. Title | Date Les gestionnaires d’événements jQuery • jQuery permet aussi de gérer les événements Javascript, et d’y associer des fonctions : • $(‘.button’).click(function(){
 // Do something on click here like change 
 the color
 $(‘.text’).css(‘color’,’red’); 
 });
  • 21. Title | Date Les gestionnaires d’événements jQuery • Le syntaxe suivant doit être respecté : • 
 
 $(‘.button’).click(function(){
 $(‘.text’).css(‘color’,’red’); 
 }); selecteur fonction ‘helper’ qui associe à l’événement ‘click’ sur cet élément fonction qui contient les instructions de ce qu’il faut faire quand on clique
  • 22. Title | Date Les gestionnaires d’événements jQuery • Quelques ‘event binders’ utiles : • .click() • .hover() • .ready() • .load() • .focus() • .blur() • .submit()
  • 23. Title | Date Exercises jQuery Quelques exercices jQuery : http://www.w3resource.com/ jquery-exercises/jquery-core-exercises.php (en) Quelques drills jQuery : http://jqexercise.droppages.com/ (en) Encore quelques méthodes utiles : .clone() .insertAfter() .insertBefore()
  • 24. Title | Date Exercises jQuery Quelques exercices à faire avec le template de l’Exercice 1 : • Insérer l’HTML suivant dans le document : 
 <button id=“mybutton”>Hop-là!</button> • Avec jQuery créer les fonctions qui permettent : • De changer le couleur de fond (de <body>) à red quand on clique sur le bouton. • De cacher tous les divs test quand on clique sur le bouton • De supprimer un div quand on clique sur le bouton (méthode .remove()) • D’ajouter la classe ‘green’ à tous les divs quand on clique • D’enlever toutes les classes quand on clique • D’ajouter la classe ‘green’ à un div quand on le survole (astuce : utilisez le mot-clé $ (this) pour sélectionner l’élément qui a déclenché l’événement. )