Ajout d'exemples .replaceWith(), manip attrs avec .attr() .prop() et .data()

exemples/jquery/manipulation-dattributs-data/config.json

@@ -0,0 +1,10 @@
+{
+  "slug": "manipulation-dattributs-data",
+  "title": "Manipulation d'attributs data",
+  "category": "misc",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/manipulation-dattributs-data/example.html

@@ -0,0 +1,9 @@
+<!-- Manipulation d'attributs data -->
+<div id="lang-selector">
+  <a href="#fr">Français</a> | <a href="#en">Anglais</a>    
+</div>
+
+<h1 data-translate="the_title">Questions essentielles</h1>
+<h2 data-translate="the_subtitle">Des questions que tout le monde se pose</h2>
+<p data-translate="the_1st_paragraph">Le 1er paragraphe explique des choses vitales à la compréhension de l'Univers.</p>
+<p data-translate="the_2nd_paragraph">Le 2nd paragraphe explique plus modestement comment cuire des pois chiches.</p>

exemples/jquery/manipulation-dattributs-data/script.js

@@ -0,0 +1,30 @@
+// Manipulation d'attributs data
+
+// Cela pourrait être récupéré d'un fichier JSON externe.
+var translations = {
+    "fr": {
+        "the_title": "Questions essentielles",
+        "the_subtitle": "Des questions que tout le monde se pose",
+        "the_1st_paragraph": "Le 1er paragraphe explique des choses vitales à la compréhension de l'Univers.",
+        "the_2nd_paragraph": "Le 2nd paragraphe explique plus modestement comment cuire des pois chiches."
+    },
+    "en": {
+        "the_title": "Essential questions",
+        "the_subtitle": "Questions everyone's asking oneself",
+        "the_1st_paragraph": "1st paragraph explains things vital to the understanding of the Universe.",
+        "the_2nd_paragraph": "2nd paragraphe more modestly explains how to cook chick peas."
+    }    
+};
+
+$('#lang-selector a').click(function(e) {
+    e.preventDefault();
+    // Supprimer le # du début. Notez qu'ici on utise .attr() car on ne veut
+    // pas l'URL absolue qui aurait été calculée avec .prop().
+    var lang = $(this).attr('href').substr(1);
+    // Démontre une autre fonction: .each()
+    $('[data-translate]').each(function(index, elem) {
+       var jqElem = $(this);
+       var translateKey = jqElem.data('translate');
+       jqElem.html( translations[lang][translateKey] );
+    });
+})

exemples/jquery/manipulation-dattributs-data/translate-en.json

@@ -0,0 +1 @@
+undefined

exemples/jquery/manipulation-dattributs-proprietes/config.json

@@ -0,0 +1,10 @@
+{
+  "slug": "manipulation-dattributs-proprietes",
+  "title": "Manipulation d'attributs / propriétés",
+  "category": "misc",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/manipulation-dattributs-proprietes/example.html

@@ -0,0 +1,11 @@
+<!-- Manipulation d'attributs / propriétés -->
+<h2>Manipulation d'attributs </h2>
+<p>Résultats : ouvrir outils développeur et voir la console</p>
+<input type="checkbox" id="the-choice" checked />
+<label for="the-choice">J'aime les patates</label>
+<br>
+<input type="checkbox" id="the-2nd-choice" />
+<label for="the-choice">J'aime les frites</label>
+<br>
+<p>On va manipuler cet élément après un timeout de 3 secondes.</p>
+<input type="checkbox" />

exemples/jquery/manipulation-dattributs-proprietes/script.js

@@ -0,0 +1,22 @@
+// Manipulation d'attributs / propriétés
+var theChoice = $('#the-choice');
+var the2ndChoice = $('#the-2nd-choice');
+
+// Similaire
+console.log("theChoice.attr('id')", theChoice.attr('id')); // renvoie "the-choice"
+console.log("theChoice.prop('id')", theChoice.prop('id')); // renvoie "the-choice"
+// Différent
+console.log("theChoice.attr('checked')", theChoice.attr('checked')); // renvoie "checked"
+console.log("theChoice.prop('checked')", theChoice.prop('checked')); // renvoie true
+
+// Différent
+console.log("the2ndChoice.attr('checked')", the2ndChoice.attr('checked')); // renvoie undefined
+console.log("the2ndChoice.prop('checked')", the2ndChoice.prop('checked')); // renvoie false
+
+setTimeout(function() {
+   var the3rdChoice = $('input[type="checkbox"]:eq(2)');
+   the3rdChoice.attr('id', 'the-3rd-choice');
+   the3rdChoice.prop('checked', true);
+   the3rdChoice.after(' <label for="the-3rd-choice">J\'aime les pâtes</label>' );
+   console.log("the3rdChoice.attr('id')", the3rdChoice.attr('id'));
+}, 3000);

exemples/jquery/remplacement-replacewith/config.json

@@ -0,0 +1,10 @@
+{
+  "slug": "remplacement-replacewith",
+  "title": "Remplacement : replaceWith",
+  "category": "misc",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/remplacement-replacewith/example.html

@@ -0,0 +1,7 @@
+<!-- Remplacement : replaceWith -->
+<p>On va remplacer la deuxième div par un h2.</p>
+<div class="container">
+  <div class="inner first">Hello</div>
+  <div class="inner second">And</div>
+  <div class="inner third">Goodbye</div>
+</div>

exemples/jquery/remplacement-replacewith/script.js

@@ -0,0 +1,2 @@
+// Remplacement : replaceWith
+$( "div.second" ).replaceWith( "<h2>New heading</h2>" );