Jquery : les bases

jQuery – les bases

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


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>



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



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



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



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


Jquery : les bases

Contenu connexe

Tendances

En vedette

Similaire à Jquery : les bases

Plus de Voyelle Voyelle

Jquery : les bases