bh
/
ipi-jquery


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!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;
            box-sizing: border-box;
        }
        .bordure-flashy {
            border: 2px solid red;
        }
        </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>jQuery</h2>
            <form id="formNouveauProduit">
                <input id="nomProduit" name="nomProduit" type="text" />
                <input type="submit" class="blue" value="Ajouter" />
            </form>

            <div id="produits">
                <div>
                    <span>Produit 2a</span><button class="red" id="monBouton2a">Supprimer</button>
                </div>
                <div>
                    <span>Produit 2b</span><button class="red" id="monBouton2b">Supprimer</button>
                </div>
                <div>
                    <span>Produit 2c</span><button class="red" id="monBouton2c">Supprimer</button>
                </div>
                <div>
                    <span>Produit 2d</span><button class="red" id="monBouton2d">Supprimer</button>
                </div>
            </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>
          "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')
            .html('Remove')
            .removeClass('red')
            .addClass('green');

            $('button')
            .click(
                function(event) {
                    var button = $(this);
                    var row = button.parent();
                    row.remove();
                }
            )

            $('#formNouveauProduit')
            .submit(
                function(event) {
                    event.preventDefault();
                    var nomProduit = $('#nomProduit').val();
                    var ligneProduit = $('<div><span>' + nomProduit + '</span><button class="red">Supprimer</button></div>');
                    ligneProduit.appendTo('#produits');

                }
            )

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

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