Aide-Mémoire jQuery

Installation JQuery

Installation JQuery

Pour des raisons de performance, il est préférable de faire l'appel à la fin du corps de la page, soit avant le "</body>".

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Execution de script au chargement de la page

$(document).ready(function() 
   {  // Votre code ici 
   }
);

Utilisation JQuery

Le sélecteur d'objet

// Pointe sur le document, la fenêtre
$(document)
$(window)

// Pointe sur l'objet courant
$(this)

// Pointe sur tous les objets
$("*")

// Pointe sur tous les objets de tag défini
$("div")
$("li")

// Pointe sur tous les objets ayant une classe précise ou un identifiant
$(".ZeClasse")
$("div.ZeClasse")
$("#ZeID")
$("div.#ZeID")

// Pointe sur tous les objets dont un attribut a une valeur précise
$("[attribut|=valeur]")
$("tag[attribute|=valeur]")

// Pointe sur tous les objets dont un attribut contient une valeur
$("[attribut*=valeur]")
$("tag[attribute*=valeur]")

// Pointe sur tous les enfants d'un objet.
$("obj obj")
$("ul.topnav li")

// Pointe sur tous les enfants direct d'un objet.
$("obj > obj")
$("ul.topnav > li")

// Pointe sur tous les frères d'un objet.
$("obj ~ p")

// Pointe sur les 2èmes enfants.
$("ul li:nth-child(2)")

// Pointe sur le 1er ou 3ème ou dernier objet.
$("ul:first")
$("ul:eq(2)")  // Tableau base 0 !
$("ul:last")

// Pointe sur tous les objets contenant un texte.
$("div:contains('UnTexte')")

// Pointe sur tous les objets visible ou caché.
$("div:visible")
$("div:hidden")

// Pointe sur tous les lignes paires ou impaires (tableau base 0).
$("tr":even")
$("tr:odd")

// Nombre d'éléments trouvés.
$("img").length;

Navigation dans le DOM

// Recherche
$("ul.toto").find("li")

// Enfant et parent de l'objet
$("ul.toto").children()
$("ul.toto").parent()

// Premier, 3ème ou dernier objet
$("p").first()
$("p").eq(2)  // Tableau base 0 !
$("p").last()

// Objet suivant
$("p").first().next()

// Frères
$("p").siblings()

// Execute une fonction pour chaque element
$("li").each(function(index)
{  alert(index + ": " + $(this).text()); }
);

// Les objets qui ne sont pas
$("li").not(".zeClass");

Manipulation

// Changement de contenu
$("p.test").text("Nouveau contenu")
$("p.test").html("Nouveau contenu")

// Ajout et suppression de classes
$("p.test").addClass("selected rouge")
$("p.test").addClass("selected")
$("p.test").removeClass("selected")
$("p.test").removeClass("selected").addClass("rouge")
// Bascule une classe sur un objet (ajout/retrait)
$("p.test").toggleClass("selected")
// Contient une class
if ($("p.test").hasClass("selected")) {...}

// Ajout contenu
$("p.test").before("<p>Coucou</p>")      // avant l'objet
$("p.test").prepend("<p>Coucou</p>")     // dans et au début de l'objet
$("p.test").append("<p>Coucou</p>")      // dans et à la fin de l'objet
$("p.test").after("<p>Coucou</p>")       // après l'objet
$("p.test").wrap("<div id="grp"></div>") // autour de l'objet
$("p.test").wrapInner("<div id="grp"></div>") // autour du contenu de l'objet

// Suppression d'objet
$("p.test").remove()
$("p.test").detach()  // Cet element pourra être réinséré
$("p.test").empty()   // vide un objet 

// Déplacement d'objet
$("p").before(".test")

// Récupération ou ajout de style
$("p.test").css("color", "red")
LaCouleur = $("p.test").css("color")

// Largeur, hauteur, position
var larg = $("p.test").width()
var larg = $("p.test").height()
var largfen = $(window).width()
var largdoc = $(document).width()
$("p.test").width(300)
var larg = $("p.test").outerWidth()  // Avec padding + border
var larg = $("p.test").innerWidth()  // Avec padding 
var pos = $("p.test").position().top // Position par rapport au parent
var pos = $("p.test").offset().top   // Position par rapport au document
var pos = $("p.test").scrollTop()   // Position du scroll

// Modification d'un attribut
$(this).Attr("src","images/image.jpg")
$(this).removeAttr("disabled")

// Remplacement d'un objet par :
$(this).replaceWith("<div>" + $(this).text() + "</div>")

// Valeur du 1er objet :
var singleValues = $("#single").val()

Evenements

// Attache un Evenement à un objet
$("p#toto").bind("click", function() 
  {   ...   
  }
);

// Attache un Click à un objet
$("p#toto").click(function() 
  {   ...   
  }
);

// Envoi une action Click à un objet
$("p#toto").click() ;

// Hover : Arrivée et retrait
$("#objet").hover(function(){... si arrivée ...},function(){... si départ ...}) ;

// Retaillage de la fenetre
$(window).resize(function() 
{  $('#log').append('<div>Handler for .resize() called.</div>');
});

Evènement Attachable :

Evènements	Description
.click()	Click
.dblclick()	Double click
.focus() .focusin() .focusout()	Focus (objet activé)
.hover()	Objet survolé par la souris
.load()	Objet chargé
.keydown() .keypress() .keyup()	Action clavier
.mousedown() .mouveenter .mouseleave() .mousemove() .mouseout() .mouseover()	Action souris
.scroll()	Action de Scroll (ascenseur).

Effets

// Défilement vertical pour menu
$("div#bt").click(function () 
   { if ($("div#obj").is(":hidden")) 
     { $("div#obj").slideDown("slow");
     } else 
     { $("div#obj").slideUp("fast");
     }
   }
)


// Apparition par transparence
$("div#bt").click(function () 
   { if ($("div#obj").is(":hidden")) 
     { $("div#obj").fadeIn("slow");
     } else 
     { $("div#obj").fadeOut("fast");
     }
   }
)


// Apparition par zoom (ou immédiat sans paramètre)
$("div#bt").click(function () 
   { if ($("div#obj").is(":hidden")) 
     { $("div#obj").show("slow");
     } else 
     { $("div#obj").hide("fast");
     }
   }
)