KDJS_1/exo7.html at master · YoannCHVR/KDJS_1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>

<head>

  <meta charset="utf-8" />

  <title>Exercice 07</title>
  <meta name="description" content="Description de la page">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

  <style>
    body{ font-family: 'Quicksand', sans-serif; }
	</style>

  <script src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      //transforme tous les champs de texte en bouton
      $("input[type='text']").attr("type", "button");
      //remplace toutes les images par une image que de votre choix
      $("img").attr("src", "image0.png");
    });
  </script>
</head>

<body>
  <img src="https://blog.netapsys.fr/wp-content/uploads/2016/07/jquery.gif" height="100" style="float:right" />
  <h1>Kit de Survie Javascript</h1>
  <h3>Page d'exercice pour la manipulation de jQuery</h3>


  <div class="entete">
    <p class="paragraphe">Ce fichier sert à la manipulation du DOM à l'aide de jQuery</p>
    <p>Il est écrit en HTML, et permet d'y écrire directement le code jQuery dans son entête</p>

    <p class="paragraphe">Il contient des listes d'éléments comme celle-ci:</p>
    <ul id="liste01" class="liste">
      <li>Elément #1</li>
      <li>Elément #2</li>
      <li>Elément #3</li>
      <li>Elément #4</li>
    </ul>
    <p>Ou celle-la:</p>
    <ul id="liste02" class="liste">
      <li><a href="#">Lien #1</a></li>
      <li><a href="#">Lien #2</a></li>
    </ul>
    <p>Et enfin celle-la:</p>
    <ul id="liste03" class="liste">
      <li>
        <img src="https://www.quizz.biz/uploads/quizz/796095/6_Grt93.jpg" height=100 />
      </li>
      <li>
        <img src="https://i.imgur.com/kMFAHYa.jpg" height=100 />
      </li>
      <li>
        <img src="https://www.quizz.biz/uploads/quizz/796095/10_XR1XO.jpg" height=100 />
      </li>
    </ul>
  </div>


  <div class="formulaire">
    <h4>Un formulaire</h4>
    <form action="#" method="get">
      <input type="text" name="nom" placeholder="Nom" value="Dupont" />
      <br />
      <input type="text" name="prenom" placeholder="Prénom" />
      <br />
      <input type="number" name="age" placeholder="Age" />
      <br />
      <label for="langage">Langage préféré</label><br />
      <select name="langage" id="langage">
        <option>C++</option>
        <option>Javascript</option>
        <option>Java</option>
      </select>
      <br />
      <input type="submit" />
    </form>
  </div>


</body>

</html>