|
|
@@ -14,6 +14,13 @@
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
|
+ <style>
|
|
|
+ a,
|
|
|
+ span,
|
|
|
+ button {
|
|
|
+ margin: 5px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!--[if lte IE 9]>
|
|
|
@@ -22,17 +29,19 @@
|
|
|
|
|
|
<!-- Add your site or application content here -->
|
|
|
<div class="container">
|
|
|
- <p>Hello world! This is HTML5 Boilerplate.</p>
|
|
|
- <p>Today's date: <span id="todaysDate"></span>.</p>
|
|
|
- <p>Enter your name please:</p>
|
|
|
- <form id="helloForm">
|
|
|
- <input id="inputName" value="" />
|
|
|
- <button class="blue" type="submit">Say hello again</button>
|
|
|
- </form>
|
|
|
- <button class="red" id="clearForm" type="button">Clear form</button>
|
|
|
-
|
|
|
- <div id="ajax"></div>
|
|
|
- <button class="blue" id="getAjax" type="button">Get HTML with Ajax</button>
|
|
|
+ <a href="#" class="main">lien 1</a> <a href="#">lien 2</a>
|
|
|
+
|
|
|
+ <h2>DOM</h2>
|
|
|
+ <span>Produit 1a</span><button class="blue" id="monBouton1a">Supprimer</button><br>
|
|
|
+ <span>Produit 1b</span><button class="blue" id="monBouton1b">Supprimer</button><br>
|
|
|
+ <span>Produit 1c</span><button class="blue" id="monBouton1c">Supprimer</button><br>
|
|
|
+ <span>Produit 1d</span><button class="blue" id="monBouton1d">Supprimer</button><br>
|
|
|
+
|
|
|
+ <h2>jQuery</h2>
|
|
|
+ <span>Produit 2a</span><button class="red" id="monBouton2a">Supprimer</button><br>
|
|
|
+ <span>Produit 2b</span><button class="red" id="monBouton2b">Supprimer</button><br>
|
|
|
+ <span>Produit 2c</span><button class="red" id="monBouton2c">Supprimer</button><br>
|
|
|
+ <span>Produit 2d</span><button class="red" id="monBouton2d">Supprimer</button><br>
|
|
|
</div>
|
|
|
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
|
|
@@ -47,42 +56,47 @@
|
|
|
</script>
|
|
|
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
|
|
|
<script>
|
|
|
+ "use strict";
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
- var form = $('#helloForm');
|
|
|
- var input = $('#inputName');
|
|
|
- var clearButton = $('#clearForm');
|
|
|
- var dateSpan = $('#todaysDate');
|
|
|
- var ajaxButton = $('#getAjax');
|
|
|
-
|
|
|
- function sayHelloAgain(e) {
|
|
|
- e.preventDefault();
|
|
|
- alert('Hello ' + input.val());
|
|
|
- }
|
|
|
-
|
|
|
- function clearForm() {
|
|
|
- input.val('');
|
|
|
- }
|
|
|
+ // var button1 = document.getElementById('monBouton1');
|
|
|
+ // button1.innerHTML = 'Click me (DOM)';
|
|
|
|
|
|
- function showDate() {
|
|
|
- var date = new Date().toString();
|
|
|
- dateSpan.html(date);
|
|
|
- }
|
|
|
+ // var button2 = $('#monBouton2');
|
|
|
+ // button2.html('Click me (jQuery)');
|
|
|
|
|
|
- showDate();
|
|
|
- setInterval(showDate, 1000);
|
|
|
+ // var buttons1 = document.getElementsByClassName('blue');
|
|
|
+ // for(var i = 0 ; i < buttons1.length ; i++) {
|
|
|
+ // buttons1[i].innerHTML = 'Remove';
|
|
|
+ // }
|
|
|
|
|
|
- function loadDoc() {
|
|
|
- $.get('some-text.html', function(html) {
|
|
|
- $('#ajax').html(html);
|
|
|
- });
|
|
|
- }
|
|
|
+ $('.red,.blue')
|
|
|
+ .html('Remove')
|
|
|
+ .removeClass('red')
|
|
|
+ .addClass('green');
|
|
|
|
|
|
- form.submit(sayHelloAgain);
|
|
|
- clearButton.click(clearForm);
|
|
|
- ajaxButton.click(loadDoc);
|
|
|
+ $('a')
|
|
|
+ .find('.main')
|
|
|
+ .css({
|
|
|
+ 'text-decoration': 'none',
|
|
|
+ color: 'green'
|
|
|
+ });
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
