Exemple pratique en Jquery

$('img').addClass('titi').attr('alt', 'toto').each(function(){alert($(this).attr('src'))})

• crée un objet jQuery permettant de travailler avec pour les balises images du document;
• ajoute à chacune de ces balises la classe "titi";
• fixe la valeur de leur attribut "alt" à "toto";
• puis pour chacune affiche une boîte d'alerte contenant l'url de l'image;

Syntaxe

Pour créer un objet, appelez le constructeur jQuery, que vous pouvez abréger avec un simple $ en lui passant un sélecteur CSS correspondant aux objets à manipuler:

var toto = $(monselecteur);

Exemples:

• $("#toto") => l'élement dont l'id est toto
• $("a") => toutes les balises a
• $(".toto") => tous les éléments qui possèdent une classe toto

Tous les sélecteurs définis en CSS3 sont disponibles, cf cette liste.
$(monselecteur) va créer un objet contenant une collection d'éléments de votre documents. Vous allez ensuite appliquer des méthodes à cette collection. Voici une liste de quelque fonctions de base disponibles. N'hésitez pas à consulter la documentation, très bien faite, pour avoir la liste de toutes les méthodes disponibles.

• $(monselecteur).each(toto) : applique la fonction toto à tous les éléments. Par exemple: $("p").each(function(){alert($(this).height())}) : affiche la hauteur de chaque paragraphe du document;

• $(monselecteur).eq(n) : réduit la collection à son nième élément (n commençant à 0);

• $(monselecteur).get(n) : retourne le nième élément de la collection;

• $(monselecteur).attr() : lit ou modifie un attribut de tous les éléments de la collection. exemple: $('IMG').attr("alt", "toto") : fixe à "toto" l'attribute "alt" de toutes les images;

• $(monselecteur).css() : lit ou modifie une propriété css de tous les éléments de la collection

• $(monselecteur).addClass(class), $(monselecteur).removeClass(class), $(monselecteur).toggleClass(class), $(monselecteur).hasClass : manipule la classe CSS des éléments;

• $(monselecteur).html() et $(monselecteur).html(val) : récupère ou modifie le contenu HTML des éléments;

• $(monselecteur).text() et $(monselecteur).text(val) : récupère ou modifie le contenu texte des éléments;

• $(monselecteur).val() et $(monselecteur).val(val) : récupère ou modifie la valeur des éléments de formulaire correspondant

• $(monselecteur).filter(toto) : réduit la sélection en lui appliquant un filtre qui peut être soit un sélecteur CSS soit une fonction

• $(monselecteur).find(toto) : cherche à partir de chacun des éléments de la collection ceux qui correspondent à une expression. exemple: $('p.toto').find('span.titi') retourne une liste de span possédant la classe titi et contenus dans des paragraphes de classe toto;

• $(monselecteur).children() et $(monselecteur).parents() : renvoie les éléments enfants ou parents des éléments de la collection;

• $(monselecteur).before(toto), $(monselecteur).after(toto), $(monselecteur).append(toto) : ajoute le contenu toto avant, après ou à l'intérieur de chacun des éléments de la collection;

• $(monselecteur).click() : simule un clic sur chacun des éléments;

• $(monselecteur).clic(toto) : appelle la fonction toto quand l'utilisateur clique sur l'un des éléments de la collection;

Par ailleurs, jQuery:

• offre nativement des fonctions permettant d'appliquer quelques effets simples sur les éléments, comme modifier leur visibilité.

• offre des fonctions permettant d'effectuer facilement des requêtes Ajax et de traiter le résultat. Par exemple $.get("test.php", function(data){$('#toto').text(data);}) remplace le contenu de la balise d'id "toto" par le résultat de l'appel à l'url test.php

• possède de très nombreux plugins. Parmi ceux-ci, un certain nombre sont supportés officiellement sous le nom de jQuery UI. Ils offrent des interactions avancées (glisser-déposer par exemple), des "widgets" (onglets, accordéons, sélectionneur de date, etc), et de nombreux effets visuels.