JQuery

objectif Découvrir et maîtriser le framework jQuery pour développer des sites Web dynamiques basés sur les technologies HTML et JavaScript. public concerné Développeurs de sites et applications Web pré-requis Connaissance de base de HTML et de Javascript
Programme
Démarrer avec jQuery

• Le retour du JavaScript

• Présentation de jQuery

• Les points forts de jQuery

• jQuery 2.0 ou jQuery 1.10

• Mise en place de jQuery

• Initier un script jQuery

• Une première application jQuery

• La documentation relative à jQuery

• Outils de développement et de débogage

Les sélecteurs en jQuery

• Introduction

• Les sélecteurs de base
  • Sélection par l'identifiant
  • Sélection par le nom de la balise
  • Sélection par la classe

• Les sélecteurs hiérarchiques
  • Sélection des descendants
  • Sélection des enfants
  • Sélection des frères suivants
  • Sélection de l'élément suivant

• Les filtres jQuery de base
  • Premier, dernier, éléments précédent, suivant
  • Les éléments pairs, impairs
  • Un élément déterminé
  • Les balises de titre
  • Exclusion d'un élément
  • Les éléments selon le type

• Les filtres enfants
  • Le premier, dernier, énième enfant
  • Les enfants pairs et impairs
  • Les enfants uniques

• Les filtres de contenu
  • Un texte donné
  • Un contenu vide
  • La qualité de parent
  • Un sélecteur déterminé

• Les filtres de visibilité

• Les filtres d'attribut
  • L'attribut
  • L'attribut avec une certaine valeur
  • L'attribut qui n'a pas une certaine valeur
  • L'attribut dont la valeur commence par , finit par, contient
  • Les filtres multiples d'attribut

• Les sélecteurs et filtres de formulaires

• Les sélecteurs et les caractères spéciaux

Manipuler les attributs et les propriétés

• Introduction

• Ajouter ou supprimer une classe

• Vérifier la présence d'une classe

• Basculer entre deux classes

• Connaître la valeur d'un attribut

• Ajouter un attribut et sa valeur, plusieurs

• Supprimer un attribut

• Connaître, modifier l'attribut value

• Connaître, modifier, supprimer la propriété d'un élément

Manipuler les feuilles de style CSS

• Accéder, modifier une propriété de style

• Attribuer des propriétés de style

• Le dimensionnement

• Le positionnement

• Exemples
  • Redimensionner la taille des caractères
  • Zoom sur image avec une légende
  • Une infobulle avec jQuery

Les événements

• Les gestionnaires d'événements
  • Au clic, double clic de la souris
  • Le focus
  • La barre de défilement
  • Le déplacement du curseur
  • L'entrée et la sortie du curseur
  • Soumettre une requête
  • Les autres événements

• Méthodes ou gestionnaires d'événements avancés
  • Lier un événement à un objet (on)
  • Lier un événement à un objet (bind)
  • Déléguer un événement
  • Exécuter une fonction une seule fois
  • Déclencher un événement particulier
  • Au survol de la souris

• Exemples
  • Un menu décalé
  • Zoom sur vignette

Les effets

• Afficher et cacher

• Glisser verticalement

• Réaliser un effet de fondu

• Basculer d'un effet à l'autre

• Différer un effet

• Créer une animation
  • Une animation sur une division
  • Une animation évoluée
  • Un effet original au survol de la souris

Utiliser le DOM

• Trouver les enfants, les parents directs, tous les parents

• Trouver les parents jusqu'à

• Trouver les frères

• Trouver le contenu

• Trouver certains parents

• Trouver certains descendants

• Ajouter des éléments à la sélection

• Une loupe pour agrandir les vignettes

• Modifier le contenu

• Insérer à l’intérieur, à l’extérieur

• Entourer un élément

• Remplacer un élément

• Enlever un élément

• Copier un élément

• Quelques exemples
  • Ajouter un pied de page et des liens de retour
  • Ajouter et enlever des éléments d'une liste
  • Ajouter une icône aux liens externes

• Le filtrage des éléments du DOM
  • Par une expression
  • Par une fonction

• Trouver un élément déterminé

• Trouver une séquence d'éléments

• Trouver un élément selon un critère

• Supprimer un élément

• Former un tableau (Array) d'éléments

• Applications
  • Filtrer une liste
  • Filtrer une liste selon deux critères
  • Une navigation par onglets

AJAX vu par jQuery

• Les requêtes AJAX raccourcies
  • Charger un fichier
  • Ne charger qu'en cas de modification
  • Charger selon la méthode GET ou POST
  • Charger un script

• La requête AJAX complète

• Définir une requête par défaut

• Les événements associés à la requête
  • ajaxSend()
  • ajaxStart()
  • ajaxStop()
  • ajaxSuccess()
  • ajaxComplete()
  • ajaxError()

• Les fonctions différées

• Sérialiser les données

• Exemples
  • Une icône de chargement
  • Un lexique en AJAX

Quelques méthodes utilitaires

• Introduction

• Éviter les conflits

• Itérations en jQuery

• Stocker et reprendre des données

• Retrouver un élément du DOM

• Rechercher un élément donné

• Connaître le nombre d'éléments

• Convertir en Array les éléments trouvés

Les formulaires

• Introduction

• Les sélecteurs de formulaires

• Les filtres de sélection

• Exemple
  • Sélectionner toutes les cases à cocher
  • Confirmer une commande
  • Un formulaire d'inscription original

Les plug-ins jQuery

• Introduction

• Concevoir un plug-in jQuery

• Utiliser un plug-in jQuery

• Quelques plug-ins
  • jQuery UI
  • Des bordures variées
  • Des textes arrondis
  • Des infobulles
  • Dévoiler les mots de passe
  • Zoomer sur une image
  • Agrandir une vignette
  • Un carrousel d'images
  • Un menu façon Mac
  • Des graphiques à partir d'un tableau
  • Trier un tableau de données