Introduction à jQuery – Cours PDF

Plan de cours

• Le gestionnaire d’événement « ready »
• Le DOM (Document Object Model)
• Le gestionnaires pour l’événement « click »
• Les filtres
• Les sélecteurs

Extrait de cours

Ce code définit un gestionnaire pour l’événement « ready » du document. Cet événement se produit lorsque le DOM (Document Object Model) est entièrement construit.

Ce gestionnaire définit à son tour des gestionnaires pour l’événement « click » de tous les paragraphes. Ces gestionnaires cachent tout paragraphe sur lequel on clique ($(this).hide()).

Le code ci-dessus peut se découper comme ceci :

function cacher()

{

$(this).hide();

}

function definirClicParagraphes()

{

$(‘p’).click(cacher);

}

$(document).ready(definirClicParagraphes);

Si on ne veut pas définir l’événement click pour tous les paragraphes mais uniquement pour un élément particulier, on spécifie comme sélecteur le « id » de cet élément au lieu du sélecteur « p » :

$(‘#menu’).click(function(){ $(this).hide(); });

Si on veut cacher un élément « menu » en cliquant sur un bouton dont l’attribut id est « bOK » :

$(‘#bOK’).click(function(){ $(‘#menu’).hide(); }); Si on veut que l’effet se produit non pas lorsqu’on clique (click) mais lorsque le pointeur de souris passe dessus (mouseover), on remplace l’événement click par l’événement mouseover (ou hover) :

$(‘#bOK’).mouseover(function(){ $(‘#menu’).hide(); });

Profitez de ce manuel de formation en PDF pour comprendre mieux le JQuery et enrichir votre connaissance.

Commencez à télécharger ce cours adapté pour vous et à apprendre JQuery.

A. Toudeft
jQuery – Introduction
$(document).ready( function(){
$(« p »).click( function(){
$(this).hide();
});
});
Ce code définit un gestionnaire pour l’événement « ready » du document. Cet événement se
produit lorsque le DOM (Document Object Model) est entièrement construit.
Ce gestionnaire définit à son tour des gestionnaires pour l’événement « click » de tous les
paragraphes. Ces gestionnaires cachent tout paragraphe sur lequel on cli que ( $(this).hide() ).
Le code ci -dessus peut se découper comme ceci :
function cacher ()
{
$(this).hide();
}
function definirClicParagraphes ()
{
$(« p »).click( cacher );
}
$(document).ready( definirClicParagraphes );

Si on ne veut pas définir l’événement click pour tous les paragraphes mais uniquement pour un
élément particulier, on spécifie comme sélecteur le « id » de cet élément au lieu du sélecteur
« p » :
$( » #menu « ).click( function(){
$(this).hide();
});
Si on veut cacher un élément « menu » en cliquant sur un bouton dont l’attribut id est « bOK » :
$( » #bOK « ).click(function(){
$( » #menu « ).hide();
});
Si on veut que l’effet se produit non pas lorsqu’on clique ( click ) mais lorsque le pointeur de
souris passe dessus ( mouseover ), on remp lace l’événement click par l’événement mouseover (ou
hover ) :
$(« #bOK »). mouseover (function(){
$(« #menu »).hide();
});