O que é o JQUERY
O JQuery é uma biblioteca feita em JavaScript com muitas funcionalidades muito úteis especialmente
quando precisamos interagir com o usuário e com os elementos do DOM de nossas páginas
O JQuery utiliza o JavaSCript para realizar suas atividades e da mesma maneira que o JavaScript ele é
executado dentro de uma página HTML e por isso as regras do JavaScript são fundamentais para o JQuery.
Chamamos este mecanismo que entende e executa scripts de ScriptEngine.
o pessoal que desenvolveu o JQuery projetou o JQuery para funcionar em todos os browsers de maneira
idêntica e isso é motivo de confiança na ferramenta. Ela praticamente padronizou essas iterações.
Sendo assim, quem é executado primeiro? O HTML ou o JavaScript?
Resposta:
Os dois são executados conjuntamente na página com a sequencia de execução de cima para
baixo
, exatamente como lemos uma página de um livro.
Por esse motivo alguma regras de precedência são importantes do tipo tem que declarar a função antes
de chamá-la em algum objeto.
Exemplos
Citando um exemplo 1:
<div id="exemplo1"></div>
<script>
document.getElementById('exemplo1').innerHTML = 'oi1';
</script>
O resultado é :
O código acima foi executado perfeitamente porque a função JavaScript foi executada depois que o elemento
HTML foi renderizado pela página.
Mas se o código fosse o do exemplo 2:
<script>
document.getElementById('exemplo2').innerHTML = 'oi2';
</script>
<div id="exemplo2"></div>
O Resultado seria um erro porque o objeto com o id exemplo2 ainda não foi renderizado pelo browser
quando o JavaScript é executado.
.
Ou seja, se o JavaScript estiver antes de uma tag html que ele utiliza, para o JavaScript, neste momento, a
tag a ser renderizada ainda não existe.
Portanto ao colocar um código javascript no header e que este seja executado no momento de carga da página
e que referencie uma tag do documento precisaremos pedir ao JavaScript que espere que o documento seja
totalmente carregado para que depois, quando o JavaScript for executado, encontre a tag renderizada.
Portanto, antes de executarmos um JavaScript que referencie o DOM precisamos aguardar que o elemento seja
renderizado ou a carga completa do documento antes de executar o script porque pode ser que o elemento ainda
não tenha sido renderizado.
Podemos colocar o código JavaScript no final da página HTML mas se você já fez isso verificou que a página fica
com um monte de código no final que atrapalha a localização dos elementos ou do conteúdo html da página.
O melhor seria colocar num documento externo.
Caso deseje manter sua página organizada, por exemplo, deixando todos os scripts juntos, e precise
aguardar o JavaScript na página você poderá aguardar a carga completa do documento HTML
utilizando o
DOM e temos as seguintes possibilidades :
1-Uma das maneiras de fazer isso é pelo DOM atraves do elemento body que dispara uma evento indicando que a carga do
documento terminou:
<body onload="funcao()">
2-O elemento window do DOM também gera um evento quando o documento foi completamente carregado:
<script>
windows.onload() = function(){...};
</script>
JQUERY:
O JQuery também tem funções que aguardam o documento a ser carregado completamente:
$(document).ready(function(){...})
ou
$(function(){...})
Importante
O evento Onclick de um elemento não consegue chamar uma função dentro do JQuery.
Como exemplo, veja o código abaixo:
<script>
$(document).ready(() => (
function xPegaValorInputText(){
alert('oi');
}
)) ;
</script>
<input type="button" id="btn1" value="Obter valor input tipo texto" onclick="PegaValorInputText();">
Não funciona de jeito maneira porque o correto é :
$("btn1").click(
function(){
alert('oi');
}
)
Mas se você fizer o JQuery capturar o evento onclick do objeto funciona:
$(document).ready(() => (
$("#idx").click(
function() {
alert($('#idx').val())
}
)
));
<input type="button" id="idx" value="Capturar evento onClick do botão pelo JQuery">