Página inicial Explorar Ajuda
Entrar
bh
/
ipi-jquery
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

Add another example

Benoît Hubert 8 anos atrás
pai
f2be27bb73
commit
c4383f46f0
2 arquivos alterados com 110 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 106 0
      dom-vs-jquery.html
  2. 4 0
      index.html

+ 106 - 0
dom-vs-jquery.html
Ver arquivo 

@@ -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>

+ 4 - 0
index.html
Ver arquivo 

@@ -22,6 +22,10 @@
 
 
         <!-- 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>
 
             <p>Hello world! This is HTML5 Boilerplate.</p>
 
             <p>Today's date: <span id="todaysDate"></span>.</p>
 
             <p>Enter your name please:</p>