Médiaforma

All posts tagged élément

Tapez le code suivant et sauvegardez-le dans le dossier c:\jquery sous le nom premier.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Affichage dans le DOM</title>
    <script src="jquery.js"></script>
    <script>
      $(function(){
        $('#textejq').html('Ce texte est écrit par jQuery');
      });
    </script>
  </head>
  <body>
    Ce texte est affiché en HTML<br />
    <span id="textejq"></span>
  </body>
</html>

 

Exécutez ce code dans Firefox en tapant c:/jquery/premier.htm dans la barre de titre. Voici ce que vous devez obtenir :

Le corps du document contient un peu de texte et une balise <span> :

Ce texte est affiché en HTML<br />
<span id="textejq"></span>

 

Lorsque le DOM est prêt :

$(function(){

 

Le code jQuery ajoute du texte dans la balise d’identifiant textejq :

$('#textejq').html('Ce texte est écrit par jQuery');

 

La première partie de l’instruction sélectionne la balise d’identifiant textejq :

$('#textejq')

La fonction html() ajoute alors le texte “Ce texte est écrit par jQuery” dans la balise sélectionnée.

Pour vous assurer que c’est bien jQuery qui affiche le texte “Ce texte est écrit par jQuery”, mettez la ligne qui fait référence à la bibliothèque jquery.js en commentaires :

<!-- <script src="jquery.js"></script>  -->

Sauvegardez le fichier et rafraîchissez le navigateur en appuyant sur F5. La deuxième ligne n’est plus affichée. C’est donc bien jQuery qui se charge de cet affichage.


Dans les rubriques précédentes, vous avez appris à positionner un élément à un emplacement bien précis. Je vous propose maintenant d’apprendre à faire flotter un élément par rapport à un autre. Cela vous permettra par exemple d’enrouler du texte autour d’une image.

La technique à utiliser est élémentaire : il vous suffit de définir l’attribut float dans l’élément que vous désirez voir flotter et de lui affecter la valeur left ou right en fonction de l’emplacement souhaité.

Ici par exemple, l’image chat-poisson.png flotte à droite et le texte qui suit s’enroule autour :

Si vous affectez la valeur left à la propriété float, l’image flotte à gauche et le texte s’enroule autour :