Write less, do more

Découverte de jQuery

A propos de moi

Adrien Guéret
Adrien Guéret
76.34224367@gotosupinfo.com

Ce que nous allons voir

Durant ces deux heures, nous allons...

Un peu plus sur jQuery...

John Resig
John Resig
Né en 1984, créateur de jQuery

Juste une mise au point

Commençons à coder...

Entrons dans le vif du sujet !

Installer jQuery

Un simple fichier JavaScript, trois possibilités d'installation.

Il suffit de l'inclure dans le <head> de notre page comme tout fichier JavaScript.

<script src="/chemin_vers_jquery.js"></script>

Un petit rappel avant de continuer

Il est possible en JavaScript de stocker des fonctions dans des variables.

//On stocke une fonction dans une variable
var monAlert = function(x) 
{
	alert('Vous avez demandé l\'affichage de '+x);
};

//Et on appelle cette fonction !
monAlert(10);

Une simple fonction JavaScript !

Une fonction qui se nomme... jQuery()

jQuery(); //Tout simplement !

Nous sommes développeurs, nous sommes fainéants !

$(); //Equivalent au code ci-dessus

Cette fonction accepte une multitude de paramètres.

Une fonction en paramètre

 var maFonction = function(){alert('DOM chargé !');};
$(maFonction);

Equivalent à :

$(function()
{
	alert('DOM chargé !');
});

La fonction passée en paramètre s'exécutera lorsque le DOM sera chargé : essayez !

Sélectionner les éléments

N'importe quel sélecteur CSS3 !

$(function()
{
    var $paragaphes = $('p'),
        $importants = $('.important'),
        $enTete = $('#enTete'),
        $megaMix = $('p.important span');
});

Ces variables contiendront des objets jQuery.

Qu'est-ce qu'un objet jQuery ?

 var $p = $('p');

Représentation d'un objet jQuery

Modifier le style des éléments

Avec la méthode css(propriete_css, nouvelle_valeur).

 var $p = $('p'),
    color = $('p').css('color');
//La propriété "color" se récupère en RGB !
if(color == 'rgb(0, 0, 0)')
{
    $p.css('color', 'red');
}
else
{
    $p.css('color', 'black');
}

Exercice !

Faire plus que du CSS...

Manipuler les éléments du DOM

Créer un nouvel élément

On utilise encore la fonction $() !

 var $newP = $('<p></p>'),
    $newH1 = $('<h1>Un titre !</h1>'),
    $newDiv = $('<div class="important" />');

Attention : créer un élément ne signifie pas l'ajouter dans le DOM !

Intéragir avec le DOM

 var $newLi = $('<li></li>');
$newLi.html('Cet élément a été inséré avec <em>jQuery</em> !')
    .appendTo($('#maListe'));	
				

Afficher/Cacher des éléments

 var $liste = $('#maListe');
if($liste.is(':visible'))
{
    $liste.slideUp(500); //500 ms
}
else
{
    $liste.fadeIn('slow'); //600ms
}
				

Des callbacks pour ces fonctions...

Vous rappelez-vous des fonctions passées en paramètres ?

 var $p = $('#monParagraphe');
if(!$p.is(':animated'))
{
    $p.slideDown(400,function()
    {
        $(this).slideUp(1500); //$(this) ?
    });
}

Le mot-clé this

Représente l'élément HTML concerné.

 var $p = $('#monParagraphe');
//On le fait disparaitre progessivement
$p.fadeOut('slow',function()
{
    //Une fois invisible, on le supprime du DOM
    this.parentNode.removeChild(this);
	
    //Equivalent au code ci-dessous :	
    $(this).remove();
});

Parcourir les éléments

Avec la méthode each().

 var liens = '';
$('section a').each(function(i)
{
    if(i<3)
    {
        liens += $(this).attr('href')+''\n'';
    }
    else
    {
        return false;
    }
});
alert(liens);

Exercice !

Plus d'interactions

Gérer les événements

Attacher des événements

 var $input = $('#monInput'),
    $span = $input.next('span');
	
$input.focus(function() //Quand le champ a le focus
{
    $span.css('color', 'blue');
})
.blur(function() //Quand il perd le focus
{
    if($(this).val().length>0)
    {
        $span.css('color', 'green');
    }
    else
    {
        $span.css('color', 'red');
    }
});

Ce champ est obligatoire.

De manière un peu plus complète...

Avec les méthodes on() et off().

 //Fonction à attacher
var modifierTexte = function()
{
    alert('Ceci ne sera affiché qu\'une fois, profitez-en !');
    $(this).off('click', modifierTexte)
           .text('Clic désactivé !');
};

$('#myButton').on('click', modifierTexte);

Exercice !

Exercice : quelques pistes

 /*
    Le code ci-dessous vous permet de
    centrer verticalement votre image
*/
$img.css('margin-top',
           Math.ceil(($img.parent().height()-$img.height())/2)
        );

Le temps nous empêche d'aller plus loin...

Beaucoup de choses n'ont pas été abordées...

Liens utiles

Ce cours est terminé !

Merci à vous !

Avez-vous des questions ?

Astuce : appuyez sur F11 pour mettre en plein écran !

Par Adrien GUERET (#76342)