Tp 2

Questionnaire jQuery

Comment afficher ou cacher un noeud du DOM avec jQuery ?

$(selecteur).hide(), $(selecteur).show() ou $(selecteur).toggle() (toggle passe de l'état visible à invisible et inversement)

Comment lier une fonction à l'événement du click de souris ?

$(selecteur).click(function(){ //code })

Comment faire un "Hello World" en jQuery ?

    $("document").ready(function(){
       alert('Hello World');
    });
                    

Résumé de quelques fonctionnalités de jQuery

Quelques sélecteurs

Par identifiant: "#id"

Par classe CSS: ".nomDeLaClasse"

Par nom de balise: "h2"

Par hiérarchie: ".nomDeLaClasse p"

Par attribut (utilisation d'une filtre): input[type='text']

Et bien d'autres: référence jQuery

Quelques méthodes

html(): récupère ou fixe le contenu d'un noeud du DOM

val(): récupère ou fixe la valeur d'un champ de formulaire

addClass(): ajoute une classe CSS à l'élément

removeClass(): supprime une classe CSS de l'élément

each(function (index, elem){//code}) : exécute une fonction sur tous les éléments selectionnés, le parametre "index" indiquera l'indice de l'élément dans la liste des éléments et le paramètre "elem" sera identique au "this", c'est à dire à l'élément DOM sur lequel la fonction s'éxécute. Exemple:

    $("a").each(function(i, elem){
        $(this).removeAttr("href");
    })
                        

append(content): ajoute un contenu à la fin d'un élément

prepend(content): ajoute un contenu au début d'un élément

next(): retourne le frêre suivant d'un noeud DOM

prev(): retourne le frêre précédant d'un noeud

children(): retourne les descendants directes d'un noeud

parent(): retourne le noeud parent d'un noeud

Liste des principaux événements gérés par jQuery

blur() : événement de perte du focus

change() : modification d'un élément (ex: la sélection dans un liste déroulante)

click() : click de souris

dblclick() : double click

focus() : un élément obtient le focus

hover() : la souris "passe sur" ou "sort de" l'élément

keydown() : une touche du clavier est enfoncée (ex: dans un champ "input text")

keyup() : une touche du clavier est relachée

mousedown() : le bouton de la souris est enfoncé

mousemove() : le curseur de la souris bouge

mouseout() : la souris passe en dehors de l'élément

mouseover() : la souris passe sur l'élément

mouseup() : le bouton de la souris est relâché

Et d'autres: référence jQuery

Notes

Nouvelle note