Médiaforma

All posts tagged sélectionner

Pour sélectionner une bande de texte verticale, placez le pointeur sur le coin supérieur gauche de la bande. Maintenez enfoncés la touche Alt et le bouton gauche de la souris pendant que vous faites glisser le pointeur vers le coin inférieur droit de la bande. Dans cet exemple, les données sont réparties sur plusieurs colonnes à l’aide de tabulations. La sélection est limitée aux données situées dans la troisième colonne.


Pour sélectionner un caractère, déplacez le pointeur de la souris sur la gauche du caractère. Appuyez sur le bouton gauche de la souris et maintenez-le enfoncé pendant que vous faites glisser le pointeur vers la droite. Relâchez alors le bouton gauche de la souris.

Pour sélectionner un mot, double-cliquez sur le mot.

Pour sélectionner une ligne, cliquez dans la zone située à gauche de la ligne que vous souhaitez sélectionner.

Pour sélectionner un paragraphe(*), double-cliquez dans la zone située à gauche du paragraphe.

Enfin, pour sélectionner tout le document, appuyez simultanément sur les touches Ctrl et A du clavier.

(*) Un paragraphe peut être composé d’une ou de plusieurs lignes de texte. Il se termine toujours par un passage à la ligne, obtenu en appuyant sur la touche Entrée du clavier.


Pour sélectionner des éléments dans le DOM, il suffit de les préciser, entre apostrophes, dans les paramètres de la fonction jQuery :

$('sélecteur')

 

Le tableau suivant rassemble quelques sélecteurs qu’il faut connaître.

Sélecteur Effet
div Un nom de balise, sans les caractères < et >, permet de sélectionner cette balise. Si plusieurs balises de même nom se trouvent dans le document, toutes ces balises sont sélectionnées. Par exemple, si le document contient plusieurs balises <div>, le sélecteur CSS div sélectionne toutes ces balises.
#premier Le signe # fait référence à l’attribut id (ou identifiant) d’une balise. Par exemple, si vous définissez la balise <p id=”premier”>, le sélecteur #premier sélectionne cette balise. Notez que deux balises ne peuvent pas avoir le même identifiant.
.rouge Le point fait référence à l’attribut class d’une balise. Supposons que vous ayez défini la balise <h2 >. Le sélecteur .rouge sélectionne cette balise. Plusieurs balises peuvent avoir la même classe. Un même traitement pourra donc être appliqué à ces deux balises. Pour différencier les balises <h2> de classe rouge des balises <p> de classe rouge, vous utiliserez les sélecteurs h2.rouge et p.rouge. Ce cas particulier s’applique à toutes les balises et toutes les classes. Ainsi, le sélecteur nom_balise.nom_classe permet de sélectionner les balises nom_balise de classe nom_classe.
ul li Supposons maintenant que vous ayez défini une liste à puces <ul></ul> et une liste numérotée <ol></ol>. Chacun des éléments des deux listes est repéré par des balises <li>. Pour différencier les éléments <li> de la liste à puces des éléments <li> de la liste numérotée, vous utiliserez un « sélecteur descendant ». Ainsi, le sélecteur ul li s’adresse à tous les éléments <li> de la liste à puces <ul>, et le sélecteur ol li s’adresse à tous les éléments <li> de la liste numérotée <ol>.
[src] Certaines balises HTML peuvent contenir un ou plusieurs attributs. Par exemple, la balise <img src=”chien.jpg” width=”40″ height=”30″> contient trois attributs : src, width et height. Pour sélectionner toutes les balises qui contiennent un attribut src, vous utiliserez le sélecteur [src].
[width=”40″] Vous pouvez même aller plus loin en sélectionnant les balises dont un attribut a une certaine valeur. Par exemple, pour sélectionner toutes les balises dont l’attribut width a pour valeur 40, vous utiliserez le sélecteur [width=”40″].
* Le caractère * représente toutes les balises du document.

 

Tapez le code suivant et sauvegardez-le sous le nom selections.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <ul>
      <li>Liste à puces 1 : élément 1</li>
      <li>Liste à puces 1 : élément 2</li>
      <li>Liste à puces 1 : élément 3</li>
    </ul>
    <div>
      <ul>
        <li>Liste à puces 2 : élément 1</li>
        <li>Liste à puces 2 : élément 2</li>
        <li>Liste à puces 2 : élément 3</li>
      </ul>
    </div>
    <ol>
      <li>Liste numérotée : élément 1</li>
      <li>Liste numérotée : élément 2</li>
      <li>Liste numérotée : élément 3</li>
    </ol>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
      </script>
  </body>
</html>

 

Exercice

Pour l’instant, admettez que l’instruction suivante affecte un arrière-plan de couleur jaune à un élément HTML quelconque :

css(‘background-color’,’yellow’);

Ajoutez les sélecteurs nécessaires pour affecter la couleur d’arrière-plan yellow :

  1. à toutes les balises <ul>
  2. aux balises ul de classe vert
  3. aux balises <ul> contenues dans une balise <div>
  4. aux balises <li> contenues dans une balise <ul> contenues dans une balise <div> et dont l’attribut class vaut impair
  5. aux balises <li> contenues dans une balise <ol>
  6. aux balises <li> qui possèdent un attribut class

Solution

  1. $('ul').css('background-color','yellow');
  2. $('ul.vert').css('background-color','yellow');
  3. $('div ul').css('background-color','yellow');
  4. $('div ul li[class="impair"]').css('background-color','yellow');
  5. $('ol li').css('background-color','yellow');
  6. $('li[class]').css('background-color','yellow');

Par défaut, pour sélectionner une fenêtre, vous devez cliquer dessus avec le bouton gauche de la souris. Dans cette vidéo, je vais vous montrer comment sélectionner une fenêtre en la pointant. Read more


Pour sélectionner un caractère, déplacez le pointeur de la souris sur la gauche du caractère. Appuyez sur le bouton gauche de la souris et maintenez-le enfoncé pendant que vous faites glisser le pointeur vers la droite. Relâchez alors le bouton gauche de la souris.

Pour sélectionner un mot, double-cliquez sur le mot.

Pour sélectionner une ligne, cliquez dans la zone située à gauche de la ligne que vous souhaitez sélectionner.

Enfin, pour sélectionner un paragraphe[1], double-cliquez dans la zone située à gauche de chaque ligne du paragraphe.


[1] Un paragraphe peut être composé d’une ou de plusieurs lignes de texte. Il se termine toujours par un passage à la ligne, obtenu en appuyant sur la touche Entrée du clavier.


Pour sélectionner une bande de texte verticale, placez le pointeur sur le coin supérieur gauche de la bande. Maintenez enfoncés la touche Alt et le bouton gauche de la souris pendant que vous faites glisser le pointeur vers le coin inférieur droit de la bande. Dans cet exemple, les données sont réparties sur plusieurs colonnes à l’aide de tabulations. La sélection est limitée aux données situées dans la troisième colonne.


Cliquez ici pour accéder à tous les sujets sur Word 2010

Situé dans la partie inférieure de la barre de défilement verticale, le bouton Sélectionner l’objet parcouru vous permet de vous déplacer rapidement dans de longs documents.

Cliquez sur l’une des icônes affichées pour accéder à la page suivante, au tableau suivant, à la note suivante, à la prochaine occurrence d’un mot ou d’une expression, etc. Si les icônes ne sont pas assez parlantes, maintenez le pointeur de la souris au-dessus de l’une d’entre elles pour obtenir des précisions.

Lorsque le bouton Sélectionner l’objet parcouru a été utilisé, il vous suffit de cliquer sur la double flèche orientée vers le bas pour accéder à l’élément suivant, ou sur la double-flèche orientée vers le haut pour accéder à l’élément précédent.

Par exemple, si vous avez cliqué sur l’icône Parcourir par tableau, un simple clic vous permet de vous déplacer sur le tableau suivant ou sur le tableau précédent.