Resumo eventos e exercicio

gmarcon83 · Mar 25, 2021 · 9e9a070 · 9e9a070
1 parent 41dfe1c
commit 9e9a070
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 15 deletions.
diff --git a/Dia 40 - jQuery - HTML/D40E3 - jQuery Scroll.html b/Dia 40 - jQuery - HTML/D40E3 - jQuery Scroll.html
@@ -40,21 +40,19 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
         let alerta = true
-        $(function () {
-            $(window).scroll(function () {
-                if (alerta) {
-                    // Req 1 mostra o alerthtml
-                    alert("Você ultilizou o scroll do mouse");
-                    alerta = false;
-                }
-                // Req 2 deixa vermelha
-                $(".vermelha").last().css("background-color", "yellow")
-                // Req 3 mostra o cinza
-                if ($("html")[0].scrollTop >= 200) {
-                    $(".cinza").show()
-                }
-            })
-        });
+        $(window).scroll(function () {
+            if (alerta) {
+                // Req 1 mostra o alerthtml
+                alert("Você ultilizou o scroll do mouse");
+                alerta = false;
+            }
+            // Req 2 deixa vermelha
+            $(".vermelha").last().css("background-color", "yellow")
+            // Req 3 mostra o cinza
+            if ($("html")[0].scrollTop >= 200) {
+                $(".cinza").show()
+            }
+        })
     </script>
 
 </head>

diff --git a/Dia 41 - jQuery - Eventos/D41E1 - Eventos.html b/Dia 41 - jQuery - Eventos/D41E1 - Eventos.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <title>jQuery</title>
+
+    <style>
+        #divExterna {
+            background-color: #ccc;
+            width: 80px;
+            height: 80px;
+            padding: 70px;
+        }
+
+        #divInterna {
+            width: 80px;
+            height: 80px;
+            background-color: blue;
+        }
+    </style>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <script>
+        $(function () {
+            $("#btn1").click(function () {
+                $("#div2").css("background-color", "green")
+            })
+            $("#btn1").dblclick(function () {
+                $("#div2").css("background-color", "yellow")
+            })
+
+            $("#teclado").keydown(function (evento) {
+                $("#resultadoInput").text(evento.key)
+                if (!(evento.keyCode == 8 || evento.keyCode >= 48 && evento.keyCode <= 57 || evento.keyCode >= 96 && evento.keyCode <= 105)) {
+                    return false;
+                }
+            })
+
+        });
+    </script>
+</head>
+
+<body>
+
+    <div id="topo">
+        <h1>Eventos</h1>
+    </div>
+
+    <div>
+        <h3>Browser</h3>
+        <span>Onload: </span><span id="onload">?</span><br />
+        <span>Scroll: </span><span id="scroll">?</span><br />
+        <span>Resize window: </span><span id="xyz">?</span>
+        <div id="div1" style="height: 100px; width: 100px; border: solid 1px; overflow-y: scroll">
+            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+        </div>
+        <hr />
+
+        <h3>Mouse</h3>
+        <button id="btn1" type="button">Clique aqui</button>
+        <button id="btn2" type="button">Clique aqui 2x</button>
+        <div id="div2" style="background-color: red; width: 80px; height: 50px; margin-top: 10px; margin-bottom: 10px">
+        </div>
+        <span>Resultado do evento sobre a div</span><span id="resultadoDiv"></span>
+
+        <div id="divExterna">
+            <div id="divInterna"></div>
+        </div>
+        <span>Div Externa: </span><span id="resultadoDiv1"></span>
+        <br />
+        <span>Div Interna: </span><span id="resultadoDiv2"></span>
+        <hr />
+
+        <h3>Teclado</h3>
+        <span>Nome:</span>
+        <input id="teclado" type="text" />
+        <span id="resultadoInput">Resultado do evento sobre o input</span>
+        <hr />
+
+        <h3>Formulário</h3>
+        <form>
+            <span>Nome:</span>
+            <input type="text" />
+
+            <span>E-mail:</span>
+            <input type="text" />
+
+            <span>Motivo do contato:</span>
+            <select>
+                <option value="">-- Selecione --</option>
+                <option value="duvida">Dúvida</option>
+                <option value="sugestao">Sugestão</option>
+            </select>
+
+            <button type="button">Enviar</button>
+        </form>
+    </div>
+</body>
+
+</html>
diff --git a/_jQuery - Eventos.txt b/_jQuery - Eventos.txt
@@ -0,0 +1,41 @@
+Sintaxe básica
+
+    $("seletor").click(function () {foo...});
+
+
+Elemento
+
+    error // quando ocorre um erro no elemento
+    scroll // quando rola o elemento
+    resize // quando redimensiona o elemento
+    load // quando o elemento carrega
+    unload // quando o elemento é eliminado
+    select // quando seleciona algum texto
+
+
+Formulários
+
+    change // quando muda o value de um campo
+    focus // quando seleciona o campo
+    blur // quando desseleciona o campo
+    submit // quando os dados são enviados
+
+Mouse
+
+    click // clique do Mouse
+    dblClick // clique duplo
+    contextmenu // clique direito
+    mousedown // apertar o botao do mouse
+    mouseup // soltar o botao do mouse
+    mouseenter// o cursor entra no elemento
+    mouseover // implementação antiga do anterior
+    mouseleave// o cursor sai do elemento
+    mouseout // implementação antiga do anterior
+    mousemove // move o mouse sobre
+
+
+Teclado
+
+    keydown // pressiona uma tecla
+    keyup // solta uma tecla
+    keypress // a tecla é pressinada e solta