SlideShare a Scribd company logo
1 of 9
Download to read offline
jQuery – les bases




Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   1
jQuery – les bases



jQuery est une bibliothèque javascript qui permet de réduire
considérablement l’écriture pour obtenir des résultats dynamiques efficaces
que ce soit pour l’animation d’éléments de la page ou pour le chargement de
données à la volée (AJAX).

Pour commencer à coder en jQuery, il suffit d’ajouter le fichier .js dans le
header de la page. Ce fichier peut-être soit déposé sur votre hébergement, soit
appelé d’une URL externe (via jquery google par exemple qui propose un choix
de frameworks javascripts dont jQuery).

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

ou

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scrip
t>


                     Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   2
jQuery – les bases

Les fonctions jQuery de votre document seront appelées sous la forme :

<script type="text/javascript">
         $(function(){…}); // pour la version courte – permet de définir les
instructions à exécuter dès que le html et le script qui contient l’appel sont
chargés. Cette fonction n’attend pas le chargement de tous les éléments de la
page (css, images…)
ou
         $().ready(function(){…}); // la même chose mais un peu développée
ou
         $(document).ready(function(){…}); // la même chose mais développée
ou
         $(window).load(function(){…}); // permet de définir les instructions à
exécuter une fois que l’ensemble des éléments de la page sont chargés.
ou
         jQuery.noConflict();
         jQuery(document).ready(function($){…}); // pour éviter des conflits
avec d’autres bibliothèques javascripts chargées dans la page. En abrégé
jQuery(function($){…});
</script>

                     Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   3
jQuery – les bases



Modifier et manipuler le DOM

Avec jQuery, il est possible très facilement de manipuler des éléments de votre
page.
Pour cela, il suffit de bien indiquer sur quel(s) élément(s) intervenir.

Pour intervenir sur des balises :
$("a").addClass("maclasse »); // pour ajouter la classe .maclasse a tous les
liens
$("li:first »).hide(); // met en display:none le premier li de toutes les listes.
:last pour la dernière ligne, :even pour les lignes impaires et :odd pour les
lignes paires, :nth-child(x) pour définir la ligne numéro x ou :eq(x) pour la
ligne x+1 car là la première ligne est numérotée 0.
$("img[title=titre]").css("opacity", ".5"); // met les images dont le title est
titre en opacité de 50%.

En savoir plus :
http://www.notoon.com/43-css3-selecteurs-pseudo-classes-et-pseudo-elements
http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre


                         Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   4
jQuery – les bases



Modifier et manipuler le DOM (suite)

Avec jQuery, il est possible très facilement de manipuler des éléments de votre
page.
Pour cela, il suffit de bien indiquer sur quel(s) élément(s) intervenir.

Pour intervenir sur des classes ou des ID :
$("#monID").addClass("maclasse »); // pour ajouter la classe .maclasse a
tous les liens dont l’id est monID
$("li.maListe").hide(); // met en display:none les li dont la classe est maListe
de toutes les listes




                     Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   5
jQuery – les bases



L’objet $(this)

Lorsqu’un gestionnaire d’événements est invoqué, le mot clé this fait référence
à l’élémént du DOM auquel le comportement a été associé.

Exemple :

$("dt").mouseover(function(){
$(this).css("color","#334A2B");
});

Lorsque la souris passe sur une balise dt, celle-ci se voit attribuer une couleur.
Il n’est pas nécessaire de répéter $("dt") dans la fonction mouseover, elle est
mémorisée dans $(this).




                      Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   6
jQuery – les bases



Les fonctions principales                                  .css("color", "red")
                                                           ou .css({"color":"red",
.hide()                                                    "background":"blue"})
Cette fonction met un display:none un
élément. On peut lui ajouter un temps .addClass() removeClass()
(1000 correspond à une seconde).         Ces fonctions permettent d’ajouter ou
                                         de supprimer une classe css.
.animate()
Cette fonction permet de créer une       .attr() .removeAttr()
animation                                Ces fonctions permettent entre autre
                                         d’ajouter des attributs id, rel, title, alt…
.stop()
Cette fonction arrête les animations des .remove()
éléments sélectionnés.                   Cette fonction supprime des éléments
                                         du DOM mais les garde en mémoire
.css()                                   dans l’objet jQuery.
Cette fonction permet d’ajouter des
styles css à un élément.


                      Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   7
jQuery – les bases



.html()                                                    .hover()
Cette fonction permet de modifier par                      Cette fonction permet d’exécuter des
exemple le contenu d’un élément.                           actions au passage de la souris et lors
                                                           de son retrait.
.appendTo() .append()
Ces fonctions permettent de modifier                       .parent() .children() .sliblings()
le contenu d’un élément.                                   Ces fonctions récupèrent tous les
$(A).appendTo(B) = $(B).append(A)                          parents, enfants ou frères de l’élément
                                                           sélectionné.
.toggle()
Cette fonction permet de switcher                          .fadeOut() .fadeIn()
deux fonctions à chaque clic de la                         Cette fonction met ou enlève un
sélection.                                                 display:none un élément. On peut lui
                                                           ajouter un temps (1000 correspond à
.toggleClass()                                             une seconde).
Cette fonction permet d’ajouter ou de
supprimer une classe.



                     Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr        8
jQuery – les bases



.slideUp() slideDown() .slideToggle()    Pour en savoir plus :
Ces fonctions permettent de cacher       http://jquery.developpeur-
(up) ou d’afficher (down) les éléments web2.com/documentation.php
sélectionnés. La fonction slideToggle
permet de switcher de l’un vers l’autre.

.click() . .dblclick()
Ces fonctions associent une action au
déclenchement des autres fonctions
avec un click ou un double click.
$("p").click( function() {…} );

.size() .length
Ces fonctions retournent le nombre
d’éléments trouvés.




                    Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr   9

More Related Content

What's hot

Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Abdelouahed Abdou
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575kate2013
 
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
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09Claude Coulombe
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Claude Coulombe
 
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 MVCPierre Faure
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql courszan
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScriptKristen Le Liboux
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partiekadzaki
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partiekadzaki
 
Javascript
JavascriptJavascript
Javascriptkarousn
 

What's hot (17)

Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
 
Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
 
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
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
 
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
 
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
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Javascript
JavascriptJavascript
Javascript
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Javascript
JavascriptJavascript
Javascript
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 

Viewers also liked

Ppmpwmnwe
PpmpwmnwePpmpwmnwe
Ppmpwmnwebvsrtgp
 
Ipc questions.
Ipc questions.Ipc questions.
Ipc questions.parkin1
 
Programme actualisé
Programme actualiséProgramme actualisé
Programme actualiséOBFG
 
Airmis Etude de marché de l'IT 2012
Airmis Etude de marché de l'IT 2012Airmis Etude de marché de l'IT 2012
Airmis Etude de marché de l'IT 2012Airmis
 
El evangelio de la promesa
El evangelio de la promesaEl evangelio de la promesa
El evangelio de la promesaCarlos Henao
 
VO PAED Medienkulturforschung
VO PAED MedienkulturforschungVO PAED Medienkulturforschung
VO PAED MedienkulturforschungAxel Maireder
 
Guide utilisateur
Guide utilisateurGuide utilisateur
Guide utilisateurOBFG
 
Les solutions ksb pour les utilités, process et environnement
Les solutions ksb pour les utilités, process et environnementLes solutions ksb pour les utilités, process et environnement
Les solutions ksb pour les utilités, process et environnementannuairebtobeurope
 
Questionnaire results
Questionnaire resultsQuestionnaire results
Questionnaire resultsuzys
 
Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...
Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...
Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...marcosgabo
 
Anencefalia y gastrosquisis en el hospital materno infantil german urquidi
Anencefalia y gastrosquisis en  el hospital materno infantil german urquidiAnencefalia y gastrosquisis en  el hospital materno infantil german urquidi
Anencefalia y gastrosquisis en el hospital materno infantil german urquidiAbigail Rojas
 
Google Analytics IQ Lessons
Google Analytics IQ LessonsGoogle Analytics IQ Lessons
Google Analytics IQ LessonsSilvia Guillén
 
DLC淨妍卸妝
DLC淨妍卸妝DLC淨妍卸妝
DLC淨妍卸妝pro1666888
 
ITOF (IT Operations Factory)
ITOF (IT Operations Factory)ITOF (IT Operations Factory)
ITOF (IT Operations Factory)Airmis
 

Viewers also liked (20)

Die Lieb
Die LiebDie Lieb
Die Lieb
 
Ppmpwmnwe
PpmpwmnwePpmpwmnwe
Ppmpwmnwe
 
Le projet ASA-SHS – enjeux, objectifs et résultats, 5 décembre 2011
Le projet ASA-SHS – enjeux, objectifs et résultats, 5 décembre 2011Le projet ASA-SHS – enjeux, objectifs et résultats, 5 décembre 2011
Le projet ASA-SHS – enjeux, objectifs et résultats, 5 décembre 2011
 
Ipc questions.
Ipc questions.Ipc questions.
Ipc questions.
 
Programme actualisé
Programme actualiséProgramme actualisé
Programme actualisé
 
Indice cosmologia y cultura en el valle central
Indice cosmologia y cultura en el valle centralIndice cosmologia y cultura en el valle central
Indice cosmologia y cultura en el valle central
 
Airmis Etude de marché de l'IT 2012
Airmis Etude de marché de l'IT 2012Airmis Etude de marché de l'IT 2012
Airmis Etude de marché de l'IT 2012
 
El evangelio de la promesa
El evangelio de la promesaEl evangelio de la promesa
El evangelio de la promesa
 
VO PAED Medienkulturforschung
VO PAED MedienkulturforschungVO PAED Medienkulturforschung
VO PAED Medienkulturforschung
 
Guide utilisateur
Guide utilisateurGuide utilisateur
Guide utilisateur
 
Les solutions ksb pour les utilités, process et environnement
Les solutions ksb pour les utilités, process et environnementLes solutions ksb pour les utilités, process et environnement
Les solutions ksb pour les utilités, process et environnement
 
Questionnaire results
Questionnaire resultsQuestionnaire results
Questionnaire results
 
Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...
Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...
Ley+del+sistema+nacional+de+datos+públicos+de+los+registros+de+la+propiedad%2...
 
Uitnodiging
UitnodigingUitnodiging
Uitnodiging
 
Anencefalia y gastrosquisis en el hospital materno infantil german urquidi
Anencefalia y gastrosquisis en  el hospital materno infantil german urquidiAnencefalia y gastrosquisis en  el hospital materno infantil german urquidi
Anencefalia y gastrosquisis en el hospital materno infantil german urquidi
 
Google Analytics IQ Lessons
Google Analytics IQ LessonsGoogle Analytics IQ Lessons
Google Analytics IQ Lessons
 
Programme du colloque "L’Atelier de Sémiotique Audiovisuelle"
Programme du colloque "L’Atelier de Sémiotique Audiovisuelle" Programme du colloque "L’Atelier de Sémiotique Audiovisuelle"
Programme du colloque "L’Atelier de Sémiotique Audiovisuelle"
 
DLC淨妍卸妝
DLC淨妍卸妝DLC淨妍卸妝
DLC淨妍卸妝
 
ITOF (IT Operations Factory)
ITOF (IT Operations Factory)ITOF (IT Operations Factory)
ITOF (IT Operations Factory)
 
Diferencias
Diferencias Diferencias
Diferencias
 

Similar to Jquery : les bases

Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.pptPROFPROF11
 
jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesRémi Prévost
 
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 web5pidou
 
Les bonnes pratiques de l'architecture en général
Les bonnes pratiques de l'architecture en généralLes bonnes pratiques de l'architecture en général
Les bonnes pratiques de l'architecture en généralGeoffrey Bachelet
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptxlaabid1
 
Solution Linux 2009 JavaScript
Solution Linux 2009 JavaScriptSolution Linux 2009 JavaScript
Solution Linux 2009 JavaScriptRaphaël Semeteys
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJean-Pierre Vincent
 
P2 éléments graphiques android
P2 éléments graphiques androidP2 éléments graphiques android
P2 éléments graphiques androidLilia Sfaxi
 
Activity
ActivityActivity
Activitydido
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++coursuniv
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hoodsvuillet
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basiczineblahib2
 
Chapitre4 cours de java
Chapitre4 cours de javaChapitre4 cours de java
Chapitre4 cours de javainfo1994
 

Similar to Jquery : les bases (20)

Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
 
jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancées
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
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
 
Les bonnes pratiques de l'architecture en général
Les bonnes pratiques de l'architecture en généralLes bonnes pratiques de l'architecture en général
Les bonnes pratiques de l'architecture en général
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Solution Linux 2009 JavaScript
Solution Linux 2009 JavaScriptSolution Linux 2009 JavaScript
Solution Linux 2009 JavaScript
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Php1
Php1Php1
Php1
 
De legacy à symfony
De legacy à symfonyDe legacy à symfony
De legacy à symfony
 
P2 éléments graphiques android
P2 éléments graphiques androidP2 éléments graphiques android
P2 éléments graphiques android
 
Activity
ActivityActivity
Activity
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
Chapitre4 cours de java
Chapitre4 cours de javaChapitre4 cours de java
Chapitre4 cours de java
 
Hibernate et jsf
Hibernate et jsfHibernate et jsf
Hibernate et jsf
 

More from Voyelle Voyelle

Construire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapesConstruire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapesVoyelle Voyelle
 
Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2Voyelle Voyelle
 
La publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'internationalLa publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'internationalVoyelle Voyelle
 
Etablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’internationalEtablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’internationalVoyelle Voyelle
 
Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...Voyelle Voyelle
 
Essentiel medias et reseaux sociaux
Essentiel medias et reseaux sociauxEssentiel medias et reseaux sociaux
Essentiel medias et reseaux sociauxVoyelle Voyelle
 
Prezi community management par Pierre AVRIL
Prezi community management par Pierre AVRILPrezi community management par Pierre AVRIL
Prezi community management par Pierre AVRILVoyelle Voyelle
 
Edo2016 démarrer son activité les outils de communication c. guezou
Edo2016  démarrer son activité les outils de communication c. guezouEdo2016  démarrer son activité les outils de communication c. guezou
Edo2016 démarrer son activité les outils de communication c. guezouVoyelle Voyelle
 
Comment développer la visibilité de mon commerce sur le web ?
Comment développer la visibilité de mon commerce sur le web  ?Comment développer la visibilité de mon commerce sur le web  ?
Comment développer la visibilité de mon commerce sur le web ?Voyelle Voyelle
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour WordpressVoyelle Voyelle
 
Support de formation pour les pages Google+
Support de formation pour les pages Google+Support de formation pour les pages Google+
Support de formation pour les pages Google+Voyelle Voyelle
 
Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ? Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ? Voyelle Voyelle
 
Les outils pour animer votre site web
Les outils pour animer votre site webLes outils pour animer votre site web
Les outils pour animer votre site webVoyelle Voyelle
 
Présentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! PipesPrésentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! PipesVoyelle Voyelle
 

More from Voyelle Voyelle (20)

Construire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapesConstruire mon plan d'action webmarketing en 5 étapes
Construire mon plan d'action webmarketing en 5 étapes
 
Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2Le digital pour se developper à l'international 2
Le digital pour se developper à l'international 2
 
La publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'internationalLa publicité digital pour tester son marché à l'international
La publicité digital pour tester son marché à l'international
 
Etablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’internationalEtablir une stratégie réseaux sociaux à l’international
Etablir une stratégie réseaux sociaux à l’international
 
Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...Développer l’export en qualifiant vos prospects et en les convertissant avec...
Développer l’export en qualifiant vos prospects et en les convertissant avec...
 
Essentiel medias et reseaux sociaux
Essentiel medias et reseaux sociauxEssentiel medias et reseaux sociaux
Essentiel medias et reseaux sociaux
 
Prezi community management par Pierre AVRIL
Prezi community management par Pierre AVRILPrezi community management par Pierre AVRIL
Prezi community management par Pierre AVRIL
 
Edo2016 facebook
Edo2016  facebookEdo2016  facebook
Edo2016 facebook
 
Edo2016 twitter
Edo2016  twitterEdo2016  twitter
Edo2016 twitter
 
Edo2016 démarrer son activité les outils de communication c. guezou
Edo2016  démarrer son activité les outils de communication c. guezouEdo2016  démarrer son activité les outils de communication c. guezou
Edo2016 démarrer son activité les outils de communication c. guezou
 
Comment développer la visibilité de mon commerce sur le web ?
Comment développer la visibilité de mon commerce sur le web  ?Comment développer la visibilité de mon commerce sur le web  ?
Comment développer la visibilité de mon commerce sur le web ?
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
 
Support de formation pour les pages Google+
Support de formation pour les pages Google+Support de formation pour les pages Google+
Support de formation pour les pages Google+
 
Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ? Conférence : Et si l’avenir de mon magasin passait par Internet ?
Conférence : Et si l’avenir de mon magasin passait par Internet ?
 
Les outils pour animer votre site web
Les outils pour animer votre site webLes outils pour animer votre site web
Les outils pour animer votre site web
 
Google analytics
Google analyticsGoogle analytics
Google analytics
 
Présentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! PipesPrésentation des modules de Yahoo! Pipes
Présentation des modules de Yahoo! Pipes
 
Mailjet
MailjetMailjet
Mailjet
 
CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
 
Formation html5
Formation html5Formation html5
Formation html5
 

Jquery : les bases

  • 1. jQuery – les bases Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 1
  • 2. jQuery – les bases jQuery est une bibliothèque javascript qui permet de réduire considérablement l’écriture pour obtenir des résultats dynamiques efficaces que ce soit pour l’animation d’éléments de la page ou pour le chargement de données à la volée (AJAX). Pour commencer à coder en jQuery, il suffit d’ajouter le fichier .js dans le header de la page. Ce fichier peut-être soit déposé sur votre hébergement, soit appelé d’une URL externe (via jquery google par exemple qui propose un choix de frameworks javascripts dont jQuery). <script src="jquery-1.2.6.pack.js" type="text/javascript"></script> ou <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scrip t> Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 2
  • 3. jQuery – les bases Les fonctions jQuery de votre document seront appelées sous la forme : <script type="text/javascript"> $(function(){…}); // pour la version courte – permet de définir les instructions à exécuter dès que le html et le script qui contient l’appel sont chargés. Cette fonction n’attend pas le chargement de tous les éléments de la page (css, images…) ou $().ready(function(){…}); // la même chose mais un peu développée ou $(document).ready(function(){…}); // la même chose mais développée ou $(window).load(function(){…}); // permet de définir les instructions à exécuter une fois que l’ensemble des éléments de la page sont chargés. ou jQuery.noConflict(); jQuery(document).ready(function($){…}); // pour éviter des conflits avec d’autres bibliothèques javascripts chargées dans la page. En abrégé jQuery(function($){…}); </script> Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 3
  • 4. jQuery – les bases Modifier et manipuler le DOM Avec jQuery, il est possible très facilement de manipuler des éléments de votre page. Pour cela, il suffit de bien indiquer sur quel(s) élément(s) intervenir. Pour intervenir sur des balises : $("a").addClass("maclasse »); // pour ajouter la classe .maclasse a tous les liens $("li:first »).hide(); // met en display:none le premier li de toutes les listes. :last pour la dernière ligne, :even pour les lignes impaires et :odd pour les lignes paires, :nth-child(x) pour définir la ligne numéro x ou :eq(x) pour la ligne x+1 car là la première ligne est numérotée 0. $("img[title=titre]").css("opacity", ".5"); // met les images dont le title est titre en opacité de 50%. En savoir plus : http://www.notoon.com/43-css3-selecteurs-pseudo-classes-et-pseudo-elements http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 4
  • 5. jQuery – les bases Modifier et manipuler le DOM (suite) Avec jQuery, il est possible très facilement de manipuler des éléments de votre page. Pour cela, il suffit de bien indiquer sur quel(s) élément(s) intervenir. Pour intervenir sur des classes ou des ID : $("#monID").addClass("maclasse »); // pour ajouter la classe .maclasse a tous les liens dont l’id est monID $("li.maListe").hide(); // met en display:none les li dont la classe est maListe de toutes les listes Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 5
  • 6. jQuery – les bases L’objet $(this) Lorsqu’un gestionnaire d’événements est invoqué, le mot clé this fait référence à l’élémént du DOM auquel le comportement a été associé. Exemple : $("dt").mouseover(function(){ $(this).css("color","#334A2B"); }); Lorsque la souris passe sur une balise dt, celle-ci se voit attribuer une couleur. Il n’est pas nécessaire de répéter $("dt") dans la fonction mouseover, elle est mémorisée dans $(this). Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 6
  • 7. jQuery – les bases Les fonctions principales .css("color", "red") ou .css({"color":"red", .hide() "background":"blue"}) Cette fonction met un display:none un élément. On peut lui ajouter un temps .addClass() removeClass() (1000 correspond à une seconde). Ces fonctions permettent d’ajouter ou de supprimer une classe css. .animate() Cette fonction permet de créer une .attr() .removeAttr() animation Ces fonctions permettent entre autre d’ajouter des attributs id, rel, title, alt… .stop() Cette fonction arrête les animations des .remove() éléments sélectionnés. Cette fonction supprime des éléments du DOM mais les garde en mémoire .css() dans l’objet jQuery. Cette fonction permet d’ajouter des styles css à un élément. Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 7
  • 8. jQuery – les bases .html() .hover() Cette fonction permet de modifier par Cette fonction permet d’exécuter des exemple le contenu d’un élément. actions au passage de la souris et lors de son retrait. .appendTo() .append() Ces fonctions permettent de modifier .parent() .children() .sliblings() le contenu d’un élément. Ces fonctions récupèrent tous les $(A).appendTo(B) = $(B).append(A) parents, enfants ou frères de l’élément sélectionné. .toggle() Cette fonction permet de switcher .fadeOut() .fadeIn() deux fonctions à chaque clic de la Cette fonction met ou enlève un sélection. display:none un élément. On peut lui ajouter un temps (1000 correspond à .toggleClass() une seconde). Cette fonction permet d’ajouter ou de supprimer une classe. Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 8
  • 9. jQuery – les bases .slideUp() slideDown() .slideToggle() Pour en savoir plus : Ces fonctions permettent de cacher http://jquery.developpeur- (up) ou d’afficher (down) les éléments web2.com/documentation.php sélectionnés. La fonction slideToggle permet de switcher de l’un vers l’autre. .click() . .dblclick() Ces fonctions associent une action au déclenchement des autres fonctions avec un click ou un double click. $("p").click( function() {…} ); .size() .length Ces fonctions retournent le nombre d’éléments trouvés. Voyelle - 6 place de l'église à St Jean Sur Vilaine - contact@voyelle.fr 9