Finit l'exemple 1 (sélecteurs de base)

css/styles.css

@@ -29,10 +29,14 @@ body {
 .panel-inner {
   padding: 10px;
 }
-nav ul {
+#left-panel nav {
+  display: inline-block;
+}
+#left-panel nav ul {
   padding-left: 0;
+  margin: 0;
 }
-nav ul li {
+#left-panel nav ul li {
   display: inline-block;
 }
 a {
@@ -57,9 +61,9 @@ button.active {
 #editor {
   font-size: 90%;
   position: absolute;
-  top: 110px;
+  top: 90px;
   right: 0;
-  bottom: 200px;
+  bottom: 0; /*200px;*/
   left: 0;
   border-top: 1px solid #aaa;
   border-bottom: 1px solid #aaa;
@@ -106,6 +110,13 @@ button {
   border: 2px solid red;
 }
 
+#html-content h5 {
+  margin: 20px 0 5px 0;
+}
+#html-content p {
+  margin: 10px 0;
+}
+
 /**
  * Styles communs pour les différents exemples
  */

exemples/selecteurs-base/contenu.html

@@ -1,12 +1,17 @@
-<h5>Sélection par id et toggleClass</h5>
-<button id="ex1-button1">Ajouter/enlever la classe "red"</button>
+<h5>Sélection par id</h5>
+<button id="ex1-button1">Ajouter/enlever "red"</button>
 
-<p>Cliquer sur un de ces boutons lui ajoutera/enlèvera la classe "blue"</p>
+<h5>Sélection par classe</h5>
 <button class="ex1-buttons">Gris</button>
 <button class="ex1-buttons">Gris</button>
 <button class="ex1-buttons">Gris</button>
 
+<h5>Sélection par tag</h5>
 <p>Cliquer sur un de ces liens lui ajoutera la classe "active" et l'enlèvera aux autres</p>
 <a href="#">Lien 1</a> |
 <a href="#">Lien 2</a> |
-<a href="#">Lien 3</a>
+<a href="#">Lien 3</a>
+
+<h5>"Envelopper" un élément DOM</h5>
+<p>Même chose que le 1er bouton, sauf pour la manière de récupérer l'élément</p>
+<button id="ex1-button2">Ajouter/enlever "red"</button>

exemples/selecteurs-base/script.js

@@ -5,11 +5,23 @@ $('#ex1-button1').click(function() {
 
 // Sélection par classe
 $('.ex1-buttons').click(function() {
-  $(this).toggleClass('blue');
+  var clickedButton = $(this);
+  clickedButton.toggleClass('blue');
+  var text = clickedButton.hasClass('blue') ? 'Bleu' : 'Gris';
+  clickedButton.html(text);
 });
 
+// Sélection par tag
 $('a').click(function(e) {
-  e.preventDefault();
+  e.preventDefault(); // Empêche le lien de fonctionner
   $('a').removeClass('active');
   $(this).addClass('active');
+});
+
+// Envelopper un élément DOM
+var button2 = document.getElementById('ex1-button2');
+// Ici button2 n'est pas une chaîne de caractères
+// mais un élément DOM
+$(button2).click(function() {
+  $(this).toggleClass('red');
 });