TADS:Estrutura de Dados: codigos0202: mudanças entre as edições
De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
(Criou página com ' <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script> $(document).ready(function(){ $("#botao").click(function()...') |
Sem resumo de edição |
||
| (Uma revisão intermediária pelo mesmo usuário não está sendo mostrada) | |||
| Linha 1: | Linha 1: | ||
Este código cria uma mini calculadora que a pessoa pode escolher qual operação vai ser realizada, os valores, e determina se o resultado sai em azul ou vermelho. | |||
Foi mostrado também como conseguir selecionar um elemento analisando seu atributo. Assim, quando é colocado o seguinte código: | |||
<syntaxhighlight lang="jquery"> | |||
var cor = $("input[name='cor']:checked").val(); | |||
</syntaxhighlight> | |||
o jQuery irá selecionar todos os elementos Input, que possuam um atributo nome com o valor 'cor'. | |||
Já no seguinte código: | |||
<syntaxhighlight lang="jquery"> | |||
$("input[name='linguagem']:checked").each(function(){ | |||
saida = saida + $(this).val()+ " "; | |||
}); | |||
</syntaxhighlight> | |||
pode-se ver o uso da função .each(). Esta função deve ser usada quando seu seletor selecionar mais de um elemento, porém você quer trabalhar com os elementos separadamente. Assim, ele cria uma estrutura de repetição, em que podemos acessar os valores separadamente com o uso da palavra '''this'''. | |||
<syntaxhighlight lang="jquery"> | |||
<html> | <html> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script> | ||
| Linha 65: | Linha 84: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight> | |||
Edição atual tal como às 23h57min de 4 de fevereiro de 2016
Este código cria uma mini calculadora que a pessoa pode escolher qual operação vai ser realizada, os valores, e determina se o resultado sai em azul ou vermelho.
Foi mostrado também como conseguir selecionar um elemento analisando seu atributo. Assim, quando é colocado o seguinte código:
var cor = $("input[name='cor']:checked").val();
o jQuery irá selecionar todos os elementos Input, que possuam um atributo nome com o valor 'cor'.
Já no seguinte código:
$("input[name='linguagem']:checked").each(function(){
saida = saida + $(this).val()+ " ";
});
pode-se ver o uso da função .each(). Esta função deve ser usada quando seu seletor selecionar mais de um elemento, porém você quer trabalhar com os elementos separadamente. Assim, ele cria uma estrutura de repetição, em que podemos acessar os valores separadamente com o uso da palavra this.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script>
$(document).ready(function(){
$("#botao").click(function(){
var cor = $("input[name='cor']:checked").val();
var op = $("#operacao").val();
var n1 = new Number($("#num1").val());
var n2 = new Number($("#num2").val());
if(op == "som")
$("#saida").html(n1+n2);
else if (op == "sub")
$("#saida").html(n1-n2);
else if (op == "mult")
$("#saida").html(n1*n2);
$("#saida").css("color", cor );
var saida = $("#saida").html();
$("input[name='linguagem']:checked").each(function(){
saida = saida + $(this).val()+ " ";
});
$("#saida").html(saida);
$("#num1").val("");
$("#num2").val("");
//var antes = $("#saida").html();
//$("#saida").html(antes + "<h1>Ola</h1>");
});
});
</script>
<head></head>
<body>
<select id="operacao">
<option value="som">Somar</option>
<option value="sub">Subtrair</option>
<option value="mult">Multiplicar</option>
</select>
<input type="text" id="num1">
<input type="text" id="num2">
<input type="radio" name="cor" value="blue"><label for="cor">Azul</label>
<input type="radio" name="cor" value="red"><label for="cor">Vermelho</label><br>
<input type="checkbox" name="linguagem" value="C"> C<br>
<input type="checkbox" name="linguagem" value="C++"> C++ <br>
<input type="checkbox" name="linguagem" value="Java"> Java<br>
<input type="checkbox" name="linguagem" value="jQuery"> jQuery<br>
<input type="button" value="Somar" id="botao"><br>
<div id="saida"></div>
</body>
</html>
