jQuery – les basesVoyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr   1
jQuery – les basesjQuery est une bibliothèque javascript qui permet de réduireconsidérablement l’écriture pour obtenir des...
jQuery – les basesLes fonctions jQuery de votre document seront appelées sous la forme :<script type="text/javascript">   ...
jQuery – les basesModifier et manipuler le DOMAvec jQuery, il est possible très facilement de manipuler des éléments de vo...
jQuery – les basesModifier et manipuler le DOM (suite)Avec jQuery, il est possible très facilement de manipuler des élémen...
jQuery – les basesL’objet $(this)Lorsqu’un gestionnaire d’événements est invoqué, le mot clé this fait référenceà l’élémén...
jQuery – les basesLes fonctions principales                                  .css("color", "red")                         ...
jQuery – les bases.html()                                                    .hover()Cette fonction permet de modifier par...
jQuery – les bases.slideUp() slideDown() .slideToggle()    Pour en savoir plus :Ces fonctions permettent de cacher       h...
Prochain SlideShare
Chargement dans…5
×

Jquery : les bases

2 505 vues

Publié le

Rappels des bases de jQuery et des principales fonctions

Publié dans : Développement personnel
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 505
Sur SlideShare
0
Issues des intégrations
0
Intégrations
141
Actions
Partages
0
Téléchargements
69
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Jquery : les bases

  1. 1. jQuery – les basesVoyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 1
  2. 2. jQuery – les basesjQuery est une bibliothèque javascript qui permet de réduireconsidérablement l’écriture pour obtenir des résultats dynamiques efficacesque ce soit pour l’animation d’éléments de la page ou pour le chargement dedonnées à la volée (AJAX).Pour commencer à coder en jQuery, il suffit d’ajouter le fichier .js dans leheader de la page. Ce fichier peut-être soit déposé sur votre hébergement, soitappelé d’une URL externe (via jquery google par exemple qui propose un choixde 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><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 2
  3. 3. jQuery – les basesLes fonctions jQuery de votre document seront appelées sous la forme :<script type="text/javascript"> $(function(){…}); // pour la version courte – permet de définir lesinstructions à exécuter dès que le html et le script qui contient l’appel sontchargés. Cette fonction n’attend pas le chargement de tous les éléments de lapage (css, images…)ou $().ready(function(){…}); // la même chose mais un peu développéeou $(document).ready(function(){…}); // la même chose mais développéeou $(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 conflitsavec 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. 4. jQuery – les basesModifier et manipuler le DOMAvec jQuery, il est possible très facilement de manipuler des éléments de votrepage.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 lesliens$("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 leslignes paires, :nth-child(x) pour définir la ligne numéro x ou :eq(x) pour laligne 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 esttitre en opacité de 50%.En savoir plus :http://www.notoon.com/43-css3-selecteurs-pseudo-classes-et-pseudo-elementshttp://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. 5. jQuery – les basesModifier et manipuler le DOM (suite)Avec jQuery, il est possible très facilement de manipuler des éléments de votrepage.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 atous les liens dont l’id est monID$("li.maListe").hide(); // met en display:none les li dont la classe est maListede toutes les listes Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 5
  6. 6. jQuery – les basesL’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 estmémorisée dans $(this). Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 6
  7. 7. jQuery – les basesLes 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 desstyles css à un élément. Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 7
  8. 8. jQuery – les bases.html() .hover()Cette fonction permet de modifier par Cette fonction permet d’exécuter desexemple 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 unsélection. display:none un élément. On peut lui ajouter un temps (1000 correspond à.toggleClass() une seconde).Cette fonction permet d’ajouter ou desupprimer une classe. Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 8
  9. 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.phpsélectionnés. La fonction slideTogglepermet de switcher de l’un vers l’autre..click() . .dblclick()Ces fonctions associent une action audéclenchement des autres fonctionsavec un click ou un double click.$("p").click( function() {…} );.size() .lengthCes fonctions retournent le nombred’éléments trouvés. Voyelle - 6 place de léglise à St Jean Sur Vilaine - contact@voyelle.fr 9

×