catégorisation des exemples et ajouts

exemples/jquery/insertion-after-before-etc/config.json

@@ -0,0 +1,10 @@
+{
+  "slug": "insertion-after-before-etc",
+  "title": "Insertion : after, before, etc.",
+  "category": "manipulation-dom",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/insertion-after-before-etc/example.html

@@ -0,0 +1,2 @@
+<!-- Insertion : after, before, etc. -->
+<div id="milieu">Au milieu</div>

exemples/jquery/insertion-after-before-etc/script.js

@@ -0,0 +1,14 @@
+// Insertion : after, before, etc.
+$('#milieu')
+.before('<div id="presque-debut">Presque au début</div>');
+
+$('<div id="tout-debut">Tout au début</div>')
+.insertBefore('#presque-debut')
+.css('background', '#afe');
+
+$('#milieu')
+.after('<div id="presque-fin">Presque à la fin</div>');
+
+$('<div id="toute-fin">Tout à la fin</div>')
+.insertAfter('#presque-fin')
+.css('background', '#fea');

exemples/jquery/insertion-append-et-appendto/config.json

@@ -1,7 +1,7 @@
 {
   "slug": "insertion-append-et-appendto",
   "title": "Insertion : append et appendTo",
-  "category": "misc",
+  "category": "manipulation-dom",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],

exemples/jquery/insertion-prepend-et-prependto/config.json

@@ -1,7 +1,7 @@
 {
   "slug": "insertion-prepend-et-prependto",
   "title": "Insertion : prepend et prependTo",
-  "category": "misc",
+  "category": "manipulation-dom",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [],

exemples/jquery/insertion-wrap-et-unwrap/config.json

@@ -1,6 +1,6 @@
 {
   "title": "Insertion : wrap et unwrap",
-  "category": "misc",
+  "category": "manipulation-dom",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [ "styles.css" ],

exemples/jquery/insertion-wrap-et-unwrap/example.html

@@ -11,7 +11,7 @@
   <div class="niveau-2">Au revoir</div>
 </div>
 
-<h3>Exemple .wrapAll (en plus du .wrap initial)</h3>
+<h3>Exemple .wrapAll</h3>
 <div class="niveau-0">
   <div class="niveau-3">Hola</div>
   <div class="niveau-3">Adios</div>

exemples/jquery/repo-config.json

@@ -7,6 +7,10 @@
       "title": "Sélecteurs"
     },
     {
+      "slug": "manipulation-dom",
+      "title": "Manipulation du DOM"
+    },
+    {
       "slug": "evenements",
       "title": "Évènements"
     },

exemples/jquery/filtres-de-contenu/config.json

@@ -1,6 +1,6 @@
 {
   "title": "Filtres de contenu",
-  "category": "misc",
+  "category": "selecteurs",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
   "css": [ "styles.css" ],

exemples/jquery/filtres-de-contenu/example.html

@@ -13,7 +13,7 @@
   <li>The Star</li>
 </ul>
 
-<h3>Filtre <code>:empty()</code></h3>
+<h3>Filtre <code>:empty</code></h3>
 <p>
     Comme on cible tous les éléments vides de la liste <code>#parent</code>,
     les 2ème et 3ème <code>li</code> correspondent, ainsi que le

exemples/jquery/suppression-delements/config.json

@@ -0,0 +1,9 @@
+{
+  "title": "Suppression d'éléments",
+  "category": "manipulation-dom",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [ "styles.css" ],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/suppression-delements/example.html

@@ -0,0 +1,18 @@
+<!-- Suppression d'éléments -->
+<p>Toutes les div ici (<code>#des-trucs</code> et <code>#dautres-trucs</code>)
+ont un fond gris pour être mises en évidence.</p>
+<h3>Par <code>.empty()</code></h3>
+
+<p>Ici la div a été vidée de son contenu.</p>
+<div id="des-trucs">
+  <h1>Un titre</h1>
+  <p>Un paragraphe</p>
+</div>
+
+<h3>Par <code>.remove()</code></h3>
+<p>Ici la div elle-même a disparu.</p>
+
+<div id="dautres-trucs">
+  <h1>Un titre</h1>
+  <p>Un paragraphe</p>
+</div>

exemples/jquery/suppression-delements/script.js

@@ -0,0 +1,7 @@
+// Suppression d'éléments
+
+// .empty()
+$('#des-trucs').empty();
+
+// .remove()
+$('#dautres-trucs').remove();

exemples/jquery/suppression-delements/styles.css

@@ -0,0 +1,5 @@
+/* styles.css */
+div {
+    padding: 20px;
+    background: #ddd;
+}