O que é o jQuery?
É basicamente um framework Javascript, ou seja, uma biblioteca que possuí diversos métodos e funções que podem ser utilizados dentro de uma página web. Sua proposta é a seguinte:
Escreva menos, faça mais - Write less, do more
Ao utilizar o Jquery, você consegue realizar com poucas linhas de código diversos efeitos que equivaleriam em JavaScript Puro a algumas dezenas de linhas.
Recursos:
- Menos código
- Incorporar / Criar plugins
- Manipulação de CSS
- Seleção e manipulação de elementos HTML
- Efeitos e animações
- Navegação pelo DOM
- Ajax
- Eventos
Como utilizar?
Podemos incluir o Jquery de duas formas em nossas páginas:
Geralmente ambas as formas são declaradas dentro da tag <head> do HTML.
- Através do link CDN:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>- Via local:
Baixamos o arquivo jquery-3.3.1.min.js e colocamos em um diretório o qual vamos localizar conforme abaixo. Neste exemplo colocamos no próprio diretório do arquivo HTML, mais isso pode ser modificado basta mudar o link acrescentando a pasta.
<html>
<head>
<!-- jquery - arquivo no próprio diretório -->
<script src="/jquery-3.3.1.min.js"></script>
</head>Ambas as formas utilizando a tag <script src="/"></script> , dentro de src="/" informamos a localização do arquivo, um link CDN ou caminho local.
Para fazer download do arquivo Jquery ou mais opções de CDNs, acesse: http://jquery.com/download/
Existem 2 versões para download:
- compressed - "Comprimida" - Essa versão vem sem espaços, comentários e quebras de linha - tudo que é desnecessário na codificação é removido, tem como objetivo ser um arquivo menor, facilitando o carregamento, para que a aplicação seja mais rápida.
- uncompressed - "Descomprimida" - É uma versão um pouco maior, inclui comentários, quebras de linhas, indentação o que facilita muito o debug e o entendimento do código Jquery.
Mais abaixo nessa mesma página de download do Jquery, você encontrará as opções CDNs, ou acessando diretamente https://code.jquery.com/
PS: minified - também é uma versão comprimida.
Exemplo
Para entendermos o funcionamento do Jquery, nada melhor que realizarmos um exemplo, segue abaixo um bem simples usando o efeito deslizar para cima ".slideUp()" em um elemento HTML, no caso em um parágrafo "<p>".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo Jquery - Evento de clique</title>
<!-- jquery - arquivo no próprio diretório -->
<script src="/jquery-3.3.1.min.js"></script>
<!--Aplicando CSS no elemento p - paragrafo-->
<style>
p {
color: red;
margin: 5px;
cursor: pointer;
font-size:32px;
}
p:hover {
background: yellow;
}
</style>
</head>
<body>
<p>Primeiro Parágrafo</p>
<p>Segundo Parágrafo</p>
<p>Terceiro Parágrafo</p>
<script>
$("p").click(function() {
$(this).slideUp();
});
</script>
</body>
</html>
Entendendo o código:
Linha 8 - Integramos o Jquery ao funcionamento da página.
Linha 11 a 21 - Aplicamos CSS aos elementos p dá pagina HTML, ou seja, a todos os parágrafos, definimos alguns estilos como tamanho da fonte, cor, tipo de ponteiro, e definimos que ao passar o mouse em cima do parágrafo, o fundo "background" fique amarelo.
Linha 25 a 27 - Definimos os parágrafos.
Linha 29 a 33 - Definimos o código para que todo elemento "p" parágrafo ao ser clicado, efetue o método slideUp(), o que faz o paragrafo ser escondido através de um movimento deslizante para cima.
Sintaxe básica:
$('seletorHTML').acao();Para saber mais como utilizar o Jquery acesse o centro de treinamento: http://learn.jquery.com/
Segue a baixo o exemplo em execução:
Para conhecer mais exemplos em Jquery, acesse: http://api.jquery.com/
Fontes: