Dans cet épisode dédié à l'apprentissage facile du langage jQuery, nous allons voir comment affecter des valeurs à des éléments HTML au travers du langage jQuery.
Nous verrons notamment
- la méthode html,
- la méthode val,
- la méthode attr,
- la méthode prop,
- comment ajouter des arguments à nos méthodes.
Les méthodes d'affectation en jQuery permettent de manipuler du DOM (Document Object Model). La but : améliorer l'expérience utilisateur dans vos pages web en manipulant l'affichage de champs de formulaire par exemple.
Après la théorie, nous passerons justement à la pratique en réalisant un exercice concret !
Ce dernier consistera à créer un formulaire de login / mot de passe.
- Dans un premier temps, seul le champ login sera visible
- Une fois rempli, le champ mot de passe apparaîtra.
- Nous contraindrons l'activation du bouton "valider" à la présence d'un certain nombre de caractères pour le mot de passe.
- Nous apprendrons au passage comment masquer l'affichage des caractères de notre mot de passe pour ce type de champ.
Nous poursuivrons dans l'édition de notre documentation personnelle sur le langage jQuery.
Je mets à votre disposition le code complet de cet exercice.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Pour découvrir la philosophie de jQuery, pensez à télécharger mon cours gratuit !
Table des matières de cette formation jQuery (durée : 1h53m)
-
Découvrir des nouvelles méthodes
- Découvrir le comportement des méthodes d'affectation 00:07:04
- Lire une méthode d'affectation pure 00:03:40
- Découvrir la méthode html 00:03:51
- Découvrir la méthode val 00:11:39
- Récupérer plusieurs infos avec la méthode val 00:10:05
- Découvrir la méthode attr 00:05:24
- Attribuer plusieurs attribues et valeurs avec la méthode attr 00:04:13
- Découvrir la méthode prop 00:05:51
- Ajout des méthodes à notre documentation 00:03:33
- Ajout d'un argument aux méthodes show et hide 00:05:24
-
Application
- Mettre en place le code HTML 00:06:32
- Mettre en forme les bases du formulaire 00:10:01
- Améliorer la mise en forme du formulaire 00:08:41
- Désactiver par défaut le bouton de validation 00:05:22
- Faire apparaitre le champ Pass su le champ User est rempli 00:05:35
- Activer le bouton de validation si le Pass contient 6 caractères 00:05:13
- Allumer le formulaire si tout est ok 00:09:29
-
Pour la prochaine fois
- Pour la prochaine fois 00:02:10
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Parfait , tuto très sympa , hâte de voir la suite !
-
Merci Carl pour cet excellent tutoriel. J'apprécie énormément ce cours que je découvre chaque semaine avec grand enthousiasme. De nombreux conseils et astuces pour des sites professionnels. La documentation contient 4 méthodes supplémentaires, ainsi qu'un TP bien conçu. Nous abordons les choses de façon pratique, comme vous avez l'habitude de le faire, cette facilité à expliquer et faire découvrir. Je vous remercie, cool 🙏 Validé 100 % JQuery facile #5/10
-
Avec quelle version de logiciel ce tuto est-il compatible ?jQuery
-
Que contient le fichier source ?Le code source de l'exercice d'application ainsi que notre documentation jQuery.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés