Les bases
Attendre la disponibilité du DOM
jQuery(document).ready(function() {
// Ici, le DOM est entièrement défini
});
$(document).ready(function() {
// Ici, le DOM est entièrement défini
});
$(function() {
// Ici, le DOM est entièrement défini
});
Manipuler les éléments du DOM
$(function() {
$('#texteJQ').html('Hello world. Ce texte est affiché par jQuery.');
// Affiche "Hello world" dans la balise id="texteJQ" de la page html
});
Sélection d'éléments
$('a').length retourne le nombre de liens hypertextes contenus dans la page
Pour accéder à un des éléments sélectionnés, précisez son indice entre crochets à la suite du sélecteur.
Par exemple :
$('a')[0] Retourne le premier lien hypertexte de la page
$('ul.bleu')[3] retourne la quatrième balise <ul> de classe bleu
Sélecteurs d'attributs
['nom*="valeur"'] Éléments qui possèdent un attribut "nom" qui contient (partiellement ou totalement) la valeur spécifiée
['nom~="valeur"'] Éléments qui possèdent un attribut "nom" qui contient la valeur spécifiée, délimité par des espaces
['nom$="valeur"'] Éléments qui possèdent un attribut "nom" qui se termine par la valeur spécifiée
['nom!="valeur"'] Éléments qui ne possèdent pas l'attribut nom, ou qui possèdent un attribut nom différent de la valeur spécifiée.
['nom^="valeur"'] Éléments qui possèdent un attribut "nom" qui commence par la valeur spécifiée
Chaînage de méthodes
$('.rouge').css('background','red').css('color','yellow');
Affecte un arrière-plan de couleur rouge et la couleur jaune aux balises de classe=" rouge"