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>
$(document).ready(function() { // Votre code ici } );
// 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;
// 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");
// 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()
// 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). |
// 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"); } } )