SlideShare une entreprise Scribd logo
1  sur  23
UX-DAY
JQuery
Write less, Do more
SMAHI Zakaria <z_smahi@esi.dz>
C'est quoi JQuery ?

Javascript framework

Interaction entre JavaScript (AJAX inclus) et HTML.

John Resig Janvier 2006. 120Ko (19ko compressé en format
gzip).

Populaire, Open Source ( MIT & Gnu GPL), bien documenté et
extensible.

Nombreux plugins.

Mis à jour réguliérement. (version 1.9 et 2.0).

Normalise les différences entre les navigateurs web.

Sites: Google, Amazon, Mozilla.org, Facebook, Wordpress,
Drupal...etc.
Que Faire/Ne pas faire ?

Faire :

Gérer les interactions avec
l'utilisateur.

Prétraiter les formulaires.

Créer des animations et effets.

Manipuler le DOM.

Utiliser AJAX simplement.

Créer des RIA (rich Internet
Applications).

Ne pas Faire :

Remplacer par un langage
coté serveur ( php, asp,
jsp).

Remplacer totalement flash
et HTML.

Remplacer un rôle
sécuritaire.
Outils de développement

Editeur de texte (Notepad++, Gedit, Notepad ...etc. ).

Navigateur web (Mozilla Firefox, Google Chrome ).

Extension de développement (Firebug sous firefox,
Outils de développement sous Chrome ...etc. )
$( )

Fonction de base de JQuery.

Alias de la fonction JQuery.

Permet d'associer le démarrage du script sur
l'event ready du document + sélectionner les
éléments de la page à manipuler par la suite.
$(doument).ready()

Démarre la fonction anonyme lorsque les
éléments de la page sont prêts.

<script type= « text/javascript » >
$(document).ready(function(){
// ici du code ;
}) ;
</script>
Sélécteurs

Viser les éléments de la page à manipuler.

La fonction $().

Syntaxe des sélécteurs CSS( 1, 2 et 3) et XPath.

Renvoie un ou plusieurs objets JQuery.
var objet = $(« sélécteur ») ;

var objet = $(« #monId ») ; // Id

var objet = $(« .maClasse ») ; // Classe

var objet = $(« div ») ; // Tag
Sélécteurs

<div>
<ul>
<li>
</li>
</ul>
</div>
<p> paragraphe 1 </p>
<p> paragraphe 2 </p>
<p> paragraphe 3 </p>

Hiérarchie : ancêtre et
descendant
$(« div ul ») ; $(« div ul li ») ;

Hiérarchie : parent et enfant
$(« div > ul ») ;

Hiérarchie : précédent et suivant
$(« div + p ») ;

Hiérarchie : frère et frères
$(« div ~ p ») ;
Sélécteurs Magiques
(Filtres)

:first, :last, :even, :odd, :eq, :lt,
:gt

:nth-child(), :first-child(), :last-
child(), :only-child()

:hidden,:visible

:header

:parent

:has(élément)

:contains(« texte »)

:empty, :not(négation)

Sur attribut :
$(« input [type=submit] ») ;
$(« input [type !=submit] ») ;

Expression réguliéres :
^= ( débute par …).
$= ( finit par …).
*= (contient la valeur …).

[attr1][attr2] : contient les
attributs...

Formulaires :
$(« #formulaire :checkbox ») ;
$(« #formulaire
:checkbox:checked») ;
Collections JQuery

$('div.section') retourne une collection JQuery.

La collection peut être manipulée comme un tableau :

$('div.section').length (ou .size) = n° des éléments.

$('div.section')[0] : le 1er élément DOM sous div

$('div.section')[2]

$('div.section').each(function() {
console.log(this);
});

$('div.section').each(function(i) {
console.log("Item " + i + " is ", this);
});
HTML futzing

$('span#msg').text('The thing was updated!');

$('div#intro').html('<em>Look, HTML</em>');
Attribute futzing

$('a.nav').attr('href', 'http://flickr.com/');

$('a.nav').attr({
'href': 'http://flickr.com/',
'id': 'flickr'
});

$('#intro').removeAttr('id');
CSS futzing

$('#intro').addClass('highlighted');

$('#intro').removeClass('highlighted');

$('#intro').toggleClass('highlighted');

$('p').css('font-size', '20px');

$('p').css({'font-size': '20px', color: 'red'});
Méthodes et Valeurs

Certaines méthodes font retourner un(des)
résultat(s) depuis le 1er élément
correspondant.

var height = $('div#intro').height();

var src = $('img.photo').attr('src');

var lastP = $('p:last').html()

var hasFoo = $('p').hasClass('foo');

var email = $('input#email').val();
Manipulation du DOM

JQuery fournit plusieurs méthodes pour manipuler
le DOM( Document Object Model)

Manipulation du contenu: selector.html( )

Remplacement d'un élément DOM:
selector.replaceWith( content )

Supprimer un élément : selector.remove( [ expr ]) |
selector.empty( )

Insertion d'un élément : selector.after( content ) |
selector.before( content ).
Traverser le DOM

$('div.section').parent()

$('div.section').next()

$('div.section').prev()

$('div.section').nextAll('div')

$('h1:first').parents()
Gestion des événements

$('a:first').click(function(ev) {
$(this).css({backgroundColor: 'orange'});
return false; // Or ev.preventDefault();
});

$('a:first').click();
Astuce cool ;)

$(document).ready(function() {
alert('DOM est prêt!');
});

$(function() {
alert('DOM est prêt!');
});
Chainage

La plupart des méthodes JQuery retournent un
autre objet JQuery → Possibilté de chainer les
méthodes entre eux :

$('div.section').hide().addClass('gone');

$('#intro').css('color',
'#cccccc').find('a').addClass('highlighted').end().
find('em').css('color', 'red').end()
AJAX

JQuery supporte très bien AJAX.

$('div#intro').load('/some/file.html');

$.get(url, params, callback)

$.post(url, params, callback)

$.getJSON(url, params, callback)

$.getScript(url, callback)
Animations

JQuery a quelques effets d'animations :
$('h1').hide('slow');
$('h1').slideDown('fast');
$('h1').fadeOut(2000);

Un chainage : $('h1').fadeOut(1000).slideDown()

Créer vos propres animation ;)
$("#block").animate({
width: "+=60px",
opacity: 0.4,
fontSize: "3em",
borderWidth: "10px"
}, 1500);
Plugins

JQuery est extensible via des plugins ; permettant de lui ajouter
d'autres méthodes :

Form : meilleure manipulation des forms.

UI : Drag&Drop et les widgets.

$('img[@src$=.png]').ifixpng()

Une dizaine d'autres plugins .

jQuery.fn.hideLinks = function() {
return this.find('a[href]').hide().end();
}

$('p').hideLinks();
Aller plus loin

http://jquery.com/

http://docs.jquery.com/

http://visualjquery.com/ - API reference

http://simonwillison.net/tags/jquery/

http://www.unheap.com/

Contenu connexe

Tendances

Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
hugomallet
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
kate2013
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
davrous
 

Tendances (19)

jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
 
Manualjquery
ManualjqueryManualjquery
Manualjquery
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
Javascript
JavascriptJavascript
Javascript
 
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
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
 
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
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql cours
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
 
HTML5
HTML5HTML5
HTML5
 
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
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
Les données transitoires (transients) vous veulent du bien
Les données transitoires (transients) vous veulent du bienLes données transitoires (transients) vous veulent du bien
Les données transitoires (transients) vous veulent du bien
 

En vedette

jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancées
Rémi Prévost
 

En vedette (7)

Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Jqery formation-jquery
Jqery formation-jqueryJqery formation-jquery
Jqery formation-jquery
 
Html5, css3, js, jQuery
Html5, css3, js, jQueryHtml5, css3, js, jQuery
Html5, css3, js, jQuery
 
Javascript et JQuery
Javascript et JQueryJavascript et JQuery
Javascript et JQuery
 
jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancées
 
Alphorm.com Formation jQuery
Alphorm.com Formation jQueryAlphorm.com Formation jQuery
Alphorm.com Formation jQuery
 

Similaire à Apprenez le jQuery

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
Aurélien Maury
 
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
Horacio Gonzalez
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelier
Algeria JUG
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
svuillet
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
VincentBweka
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
Rémi Prévost
 

Similaire à Apprenez le jQuery (20)

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
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
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
 
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
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelier
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Html5 2
Html5 2Html5 2
Html5 2
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
 
TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)
 
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
 

Plus de Club Scientifique de l'ESI - CSE

Plus de Club Scientifique de l'ESI - CSE (20)

CSE Welcome Day 2015
CSE Welcome Day 2015CSE Welcome Day 2015
CSE Welcome Day 2015
 
Gazette de l'ESI #5
Gazette de l'ESI #5Gazette de l'ESI #5
Gazette de l'ESI #5
 
Atelier 1 Introduction aux Réseaux Informatiques
Atelier 1 Introduction aux Réseaux InformatiquesAtelier 1 Introduction aux Réseaux Informatiques
Atelier 1 Introduction aux Réseaux Informatiques
 
Gazette De L'ESI - N°3
Gazette De L'ESI - N°3Gazette De L'ESI - N°3
Gazette De L'ESI - N°3
 
Introduction à unity 3D
Introduction à unity 3DIntroduction à unity 3D
Introduction à unity 3D
 
Jeux video
Jeux videoJeux video
Jeux video
 
"Introduction aux exploits et à la faille BufferOverflow"
"Introduction aux exploits et à la faille BufferOverflow""Introduction aux exploits et à la faille BufferOverflow"
"Introduction aux exploits et à la faille BufferOverflow"
 
La 2ème partie de la présentation PHP
La 2ème partie de la présentation PHPLa 2ème partie de la présentation PHP
La 2ème partie de la présentation PHP
 
La première partie de la présentation PHP
La première partie de la présentation PHPLa première partie de la présentation PHP
La première partie de la présentation PHP
 
Gazette de l'ESI - Edition 2, Décembre 2013
Gazette de l'ESI - Edition 2, Décembre 2013Gazette de l'ESI - Edition 2, Décembre 2013
Gazette de l'ESI - Edition 2, Décembre 2013
 
Présentation MotivationDay
Présentation MotivationDayPrésentation MotivationDay
Présentation MotivationDay
 
Conférence Virtualisation - Day 1 : Introduction à la vitualisation
Conférence Virtualisation - Day 1 : Introduction à la vitualisationConférence Virtualisation - Day 1 : Introduction à la vitualisation
Conférence Virtualisation - Day 1 : Introduction à la vitualisation
 
Section Developpement Mobile Atelier #1
Section Developpement Mobile Atelier #1Section Developpement Mobile Atelier #1
Section Developpement Mobile Atelier #1
 
Gazette de l'ESI - Edition 1, Novembre 2013.
Gazette de l'ESI - Edition 1, Novembre 2013.Gazette de l'ESI - Edition 1, Novembre 2013.
Gazette de l'ESI - Edition 1, Novembre 2013.
 
Atelier Section Sécurité
Atelier Section SécuritéAtelier Section Sécurité
Atelier Section Sécurité
 
Théorie d’esthétique - UX Day
Théorie d’esthétique - UX DayThéorie d’esthétique - UX Day
Théorie d’esthétique - UX Day
 
Natural User Interface - UX Day
Natural User Interface - UX DayNatural User Interface - UX Day
Natural User Interface - UX Day
 
Faire un scan du réseau avec NMAP
Faire un scan du réseau avec NMAPFaire un scan du réseau avec NMAP
Faire un scan du réseau avec NMAP
 
Neutraliser un Virus/Worm ‘RECYCLER’ manuellement
Neutraliser un Virus/Worm ‘RECYCLER’ manuellementNeutraliser un Virus/Worm ‘RECYCLER’ manuellement
Neutraliser un Virus/Worm ‘RECYCLER’ manuellement
 
Casser un mot de passe Windows
Casser un mot de passe WindowsCasser un mot de passe Windows
Casser un mot de passe Windows
 

Apprenez le jQuery