bh
/
ipi-jquery


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!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);

        // Puis ajoute une checkbox
        function addCheckboxesToRowsDom() {
            var table1 = document.getElementById('table1');
            var rows = table1.getElementsByTagName('tr');
            for(r = 0 ; r < rows.length ; r++) {
                var row = rows[r];
                var cells = row.getElementsByTagName('td');
                var newCell = document.createElement('td');
                newCell = row.insertBefore(newCell, cells[0]);
                var checkbox = document.createElement('input');
                checkbox.type = "checkbox";
                newCell.appendChild(checkbox);
            }
        }

        setTimeout(addCheckboxesToRowsDom, 2000);


        // jQuery: Crée table de 5 lignes x 3 colonnes
        var jquery = $('#jquery');
        var table2 = $('<table id="table2"></table>').appendTo(jquery);
        for(var i = 0 ; i < 5 ; i++) {
            var row = $('<tr></tr>').appendTo(table2);
            for (j = 0 ; j < 3 ; j++) {
                var cell = $('<td>Cellule ' + i + ',' + j + '</td>').appendTo(row);
                cell.addClass('cell');
            }
        }

        // Puis change leur background
        function changeCellsBackgroundJQuery() {
            $('#table2 .cell').css('background','#caf');
        }
        setTimeout(changeCellsBackgroundJQuery, 1000);

        // Puis ajoute une checkbox
        function addCheckboxesToRowsJQuery() {
            $('#table2 tr').find('td:first')
            .before('<td><input type="checkbox" /></td>');
        }

        setTimeout(addCheckboxesToRowsJQuery, 2000);

        </script>
    </body>
</html>