Jquery : les bases

jQuery – les bases

1 Voyelle - 6 place de l'église à St Jean Sur Vilaine - [email protected]



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"></script>

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js



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>



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

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

















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



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).



Les fonctions principales .hide() Cette fonction met un display:none un élément. On peut lui ajouter un temps (1000 correspond à une seconde). .animate() Cette fonction permet de créer une animation .stop() Cette fonction arrête les animations des éléments sélectionnés. .css() Cette fonction permet d’ajouter des styles css à un élément.

.css("color", "red") ou .css({"color":"red", "background":"blue"}) .addClass() removeClass() Ces fonctions permettent d’ajouter ou de supprimer une classe css. .attr() .removeAttr() Ces fonctions permettent entre autre d’ajouter des attributs id, rel, title, alt… .remove() Cette fonction supprime des éléments du DOM mais les garde en mémoire dans l’objet jQuery.



.html() Cette fonction permet de modifier par exemple le contenu d’un élément. .appendTo() .append() Ces fonctions permettent de modifier le contenu d’un élément. $(A).appendTo(B) = $(B).append(A) .toggle() Cette fonction permet de switcher deux fonctions à chaque clic de la sélection. .toggleClass() Cette fonction permet d’ajouter ou de supprimer une classe.

.hover() Cette fonction permet d’exécuter des actions au passage de la souris et lors de son retrait. .parent() .children() .sliblings() Ces fonctions récupèrent tous les parents, enfants ou frères de l’élément sélectionné. .fadeOut() .fadeIn() Cette fonction met ou enlève un display:none un élément. On peut lui ajouter un temps (1000 correspond à une seconde).



.slideUp() slideDown() .slideToggle() Ces fonctions permettent de cacher (up) ou d’afficher (down) les éléments 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.

Pour en savoir plus : http://jquery.developpeur-web2.com/documentation.php

Self Improvement

Jquery : les bases