|
|
@@ -0,0 +1,106 @@
|
|
|
+<!doctype html>
|
|
|
+<html class="no-js" lang="">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
+ <title>Formation jQuery</title>
|
|
|
+ <meta name="description" content="">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+
|
|
|
+ <link rel="manifest" href="site.webmanifest">
|
|
|
+ <link rel="apple-touch-icon" href="icon.png">
|
|
|
+ <!-- Place favicon.ico in the root directory -->
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="css/normalize.css">
|
|
|
+ <link rel="stylesheet" href="css/main.css">
|
|
|
+ <link rel="stylesheet" href="css/styles.css">
|
|
|
+ <style type="text/css">
|
|
|
+ .cell {
|
|
|
+ border: 1px solid #aaa;
|
|
|
+ background: #ddd;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!--[if lte IE 9]>
|
|
|
+ <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
|
|
+ <![endif]-->
|
|
|
+
|
|
|
+ <!-- Add your site or application content here -->
|
|
|
+ <div class="container">
|
|
|
+ <ul>
|
|
|
+ <li><a href="index.html">Accueil</a></li>
|
|
|
+ <li><a href="dom-vs-jquery.html">DOM vs jQuery</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <h1>DOM vs jQuery</h1>
|
|
|
+
|
|
|
+ <h2>DOM</h2>
|
|
|
+ <div id="dom"></div>
|
|
|
+
|
|
|
+ <h2>jQuery</h2>
|
|
|
+ <div id="jquery"></div>
|
|
|
+ </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>
|
|
|
+ <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
|
|
|
+ <script src="js/plugins.js"></script>
|
|
|
+ <script src="js/main.js"></script>
|
|
|
+
|
|
|
+ <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
|
|
|
+ <script>
|
|
|
+ window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
|
|
|
+ ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
|
|
|
+ </script>
|
|
|
+ <script src="https://www.google-analytics.com/analytics.js" async defer></script>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ // DOM: Crée table de 5 lignes x 3 colonnes
|
|
|
+ var dom = document.getElementById('dom');
|
|
|
+ var table1 = document.createElement('table');
|
|
|
+ table1.id = 'table1';
|
|
|
+ dom.appendChild(table1);
|
|
|
+ for(var i = 0 ; i < 5 ; i++) {
|
|
|
+ var row = document.createElement('tr');
|
|
|
+ table1.appendChild(row);
|
|
|
+ for (j = 0 ; j < 3 ; j++) {
|
|
|
+ var cell = document.createElement('td');
|
|
|
+ cell.classList = 'cell';
|
|
|
+ row.appendChild(cell);
|
|
|
+ cell.innerHTML = 'Cellule ' + i + ',' + j;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Puis change leur background
|
|
|
+ function changeCellsBackgroundDom() {
|
|
|
+ var table1 = document.getElementById('table1');
|
|
|
+ var cells = table1.getElementsByClassName('cell');
|
|
|
+ for(c = 0 ; c < cells.length ; c++) {
|
|
|
+ cells[c].style.background = '#acf';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setTimeout(changeCellsBackgroundDom, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ // jQuery: Crée table de 5 lignes x 3 colonnes
|
|
|
+ var jquery = $('#jquery');
|
|
|
+ var table2 = $('<table></table>').appendTo(jquery);
|
|
|
+ table2.attr('id', 'table2');
|
|
|
+ for(var i = 0 ; i < 5 ; i++) {
|
|
|
+ var row = $('<tr></tr>').appendTo(table2);
|
|
|
+ for (j = 0 ; j < 3 ; j++) {
|
|
|
+ var cell = $('<td></td>').appendTo(row);
|
|
|
+ cell.addClass('cell');
|
|
|
+ cell.html( 'Cellule ' + i + ',' + j );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Puis change leur background
|
|
|
+ function changeCellsBackgroundJQuery() {
|
|
|
+ $('#table2 .cell').css('background','#caf');
|
|
|
+ }
|
|
|
+ setTimeout(changeCellsBackgroundJQuery, 1000);
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
