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 d'un click de souris ?

$(selecteur).on('click', function(){ //code })

voir la note en bas de page pour plus d'info sur la méthode on

ou avec le raccourcis: $(selecteur).click(function(){ //code })

Comment faire un "Hello World" en jQuery ?

    $(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: input[type='text']

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

Quelques méthodes

text(): récupère ou fixe le contenu texte 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

toggleClass(): supprime (si présente) ou ajoute (si absente) une classe CSS

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

    $('a').each(function(i, elem){
        console.log("lien:" + $(this).attr("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

clone(): fait une copie des éléments DOM. Avec l'appel clone(true), les gestionnaires d'événements seront aussi liés

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

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

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