Dans ce nouvel épisode dédié à l'apprentissage du langage jQuery de manière simple, rapide et efficace, nous allons voir comment il est possible de positionner des éléments HTML par rapport à d'autres éléments HTML.
Cette nouvelle compétences va nous permettre de positionner facilement des éléments HTML dans le DOM.
Ainsi, peu importe où se trouve un bloc HTML dans le code source, nous aurons la possibilité de le positionner avant ou après un autre bloc de manière simple et efficace.
Au programme de ce tuto comment positionners des éléments HTML avec jQuery ?
Ce sont 6 nouvelles méthodes jQuery qui sont au programme de ce cours :
- append,
- prepend,
- before,
- after,
- remove,
- removeattr.
Afin de bien assimiler ces nouvelles méthodes jQuery, nous allons réaliser un exercice pratique sur la base d'une recette de cuisine, en lançant un "pas à pas" qui fera apparaître la suite de la recette, une fois l'étape réalisée.
Je mets les codes de cet exercice à votre disposition.
Si vous avez louper le début de cette série, je vous invite à suivre le premier cours dédié à la philosophie de jQuery, qui est gratuit !
Table des matières de cette formation jQuery (durée : 1h26m)
-
Positionner des éléments HTML
- Découvrir la méthode append 00:09:52
- Découvrir la méthode prepend 00:04:13
- Découvrir la méthode before 00:04:58
- Découvrir la méthode after 00:01:47
- Découvrir la méthode remove 00:04:38
- Découvrir la méthode removeattr 00:03:19
-
Application
- Mettre en place le code HTML 00:10:52
- Mettre en forme les bases du document 00:10:30
- Mettre en forme les sections 00:06:53
- Afficher, cacher et positionner des éléments avec jQuery 00:06:12
- Faire apparaitre la section suivante 00:03:58
- Boucler sur les boutons 00:09:55
- Compter le nombre de sections 00:05:54
-
Pour la prochaine fois
- Pour la prochaine fois 00:03:12
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci Carl pour cette énième tutoriel.
-
Merci pour cet épisode, et au suivant: du sodium dans le pain, ça promet d'être explosif!
-
Atelier très clair et pratique avec documentation jointe. Merci 👍. Je suis impatient de la sortie du tutoriel nro 8 présenté en fin de formation. Cordialement, JIPE
-
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