bh
/
ipi-jquery


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!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>
        a,
        span,
        button {
            margin: 5px;
        }
        </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">
        <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>
        <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>
          "use strict";
          $(document).ready(function() {

            // var button1 = document.getElementById('monBouton1');
            // button1.innerHTML = 'Click me (DOM)';

            // var button2 = $('#monBouton2');
            // button2.html('Click me (jQuery)');

            // var buttons1 = document.getElementsByClassName('blue');
            // for(var i = 0 ; i < buttons1.length ; i++) {
            //     buttons1[i].innerHTML = 'Remove';
            // }

            $('.red,.blue')
            .html('Remove')
            .removeClass('red')
            .addClass('green');

            $('a')
            .find('.main')
            .css({
                'text-decoration': 'none',
                color: 'green'
            });

          });
        </script>
    </body>
</html>