Jquery - write less, do more
Resumo jquery (conceitos, operadores, chamada de funções, loops,
estruturas condicionais etc.) - Publicado em Abril/2020.
Com jquery conseguimos potencializar o javascript, conforme própria descrição como "escreva menos, faça mais".
A sintaxe básica para utilizar o jquery é $(seletor/objeto, "tag, id, classes"):
Exemplo: $(document).ready(function() { ......}
- "$" indica que é jquery;
- "document" se refere a própria página;
- "ready" se refere ao momento que o documento estiver pronto, renderizado, a posição do
script já não importa mais como em javascript;
- "function" se refere a função a ser executada.
Exemplo 1: subir um alerta se clicarmos em algum elemento html "mark", então mudar a cor de fundo, a magem e cor do texto do "span":
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script type="application/javascript">
$(document).ready(function(){
$("mark").click(function(){
alert(document.querySelector("mark"));
$("body").css("background-color","blue");
$("span").css({"margin":"10px", "color":"red"});
})
})
</script>
</head>
<body>
<span id="sp0">Sou o <mark>span</mark> 0</span><br>
<span id="sp1"><mark>Sou</mark> o span 1</span>
</body>
</html>
Exemplo 2: leitura do conteúdo de "inputs" e utilização de condicionais e operadores:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script type="application/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
var a=$("input[name=txt1]").val();
var b=$("input[name=txt3]").val();
var c=Number(a)+Number(b);
var d=a+b //Concatena strings
var e=parseInt(a,10)+parseInt(b,10); //Converte na base decimal
var f=parseFloat(a)+parseFloat(b); //Convert para float
alert(f)
})
$("#btn2").click(function(){
var a=$("input[name=txt2]").val().charAt(2); //Terceiro caracter
var b=$("input[name=txt2]").val();
alert(b.trim().length);
if(b.trim().length==5 && a=="x") {
alert(a);
} else {
alert(b);
}
})
})
</script>
</head>
<body>
<input type="text" name="txt1" placeholder="input 1" value="3"/>
<input type="text" name="txt2" placeholder="input 2" value="texto"/>
<input type="text" name="txt3" placeholder="input 3" value="5"/>
<button id="btn1">BOTÃO 1</button>
<button id="btn2">BOTÃO 2</button>
</body>
</html>
Exemplo 3: Interagindo com célula de tabela e trocando a cor de fundo:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script type="application/javascript">
$(document).ready(function(){
bordaTabela();
});
function bordaTabela() {
var contarCliques = 0;
$("table td[name=cell1]").click(function() {
contarCliques++;
if (contarCliques % 2 == 0) {
$(this).css("background-color","blue");
$("table td[name=cell2]").css("background-color","red");
} else {
$(this).css("background-color","red");
$("table td[name=cell2]").css("background-color","blue");
}
})
}
</script>
</head>
<body>
<table id="tb1" name="tab1">
<tr>
<td colspan="2" name="cell1">1.1 e 1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td rowspan="2">2.2 e 3.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.3</td>
</tr>
</table><br>
<table id="tb2">
<tr>
<td colspan="2" name="cell2">1.1 e 1.2</td>
<td>1.3</td>
</tr>
</table>
</body>
</html>