jQuery básico: Visão geral da biblioteca
Veja neste artigo uma visão geral da biblioteca JavaScript jQuery, conhecendo algumas de suas funcionalidades através de exemplos práticos.
Aprendendo jQuery
jQuery é uma biblioteca do JavaScript que reduz em muito o trabalho de codificação e permite-nos fazer coisas complicadas como animações, event handlings, usar o AJAX, o objeto JSON, etc., de uma forma fácil.
jQuery pode rodar em qualquer navegador, como o firefox, internet explorer, safari, chrome, etc., sem nenhum impedimento.
Passos:
Essa característica do jQuery é conhecida como um intersuporte entre os navegadores. Para começar a trabalhar com o jQuery necessitamos do arquivo jQuery.js no nosso diretório. Podemos fazer o download do jQuery. Após isto, salve o arquivo .js como query-3.5.1.min.js.
Assim, precisamos adicionar este arquivo de download num diretório de nosso site, por exemplo /JQuery. Agora, o caminho deve se assemelhar com o seguinte: /jquery/jquery-3.5.1.min.js. Neste ínterim, vamos dar uma olhada nas características do jQuery acima citadas em detalhes e com exemplos.
Animações: O jQuery pode ser usado em animações de sites ou aplicações web, para tornar o site atrativo.
1º Passo no jQuery
Neste passo aprenderemos como usar o jQuery na nossa página html e criar uma animação simples.
Podemos iniciar usando jQuery na nossa página html localizando o arquivo no qual nós fizemos o download, como é ilustrado:
Listagem 1: Iniciando com jQuery.
<script type="text/javascript"
src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">A versão do .js pode variar conforme o download. Neste tutorial estamos usando o jquery-3.5.1.min.js.
Abaixo, está o esqueleto do que a nossa página html vai se parecer:
Listagem 2: Esqueleto html.
<html>
<head>
<title>Teste jQuery</title>
<script type="text/javascript"
src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>Listagem 3: Código para executar o passo 1 - myanimation.html.
<html>
<head>
<title>Iniciando com jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'700px'});
});
});
</script>
</head>
<body>
Clique no botão para animar a div.
<div >
</div>
<button>Clique aqui</button>
</body>
</html>2º Passo no jQuery
Neste passo, aprenderemos como usar scripts customizados.
Crie um arquivo e nomeie como meuscript.js no mesmo diretório. Neste caso ele vai estar no diretório /JQuery.
O esqueleto de qualquer .js customizado vai se parecer com isso:
Listagem 4: Esqueleto .js.
$(document).ready(function() {
// seu código sera adicionado aqui
});Aqui está o código para o nosso meuscript.js
Listagem 5: userdefined.js
$(document).ready(function() {
$("div").click(function() {
alert ("Parabéns, o código está funcionando.");
});
});Agora se pode incluir meuscript.js como segue:
Listagem 6: código para executar o passo 2.
<html>
<head>
<title>Animações com jQuery</title>
<script type="text/javascript"
src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript"
src="/JQuery/meuscript.js "></script>
</head>
<body>
<div>
Clique aqui par aver a mensagem.
</div>
</body>
</html>Manipulador de eventos (event handling): Usando o jQuery, podemos manipular eventos, como o clicar em um botão, o clicar de um menu, etc, sem atualizar toda a página html.
3º Passo no jQuery
Neste passo, aprenderemos sobre a manipulação de eventos em jQuery.
Eventos são ações como o apertar de um botão, o sobrepousar do mouse, etc, os quais são feitos na interface com o usuário.
O propósito de qualquer evento é iniciar alguma ação. O código abaixo é um bom exemplo para a manipulação de eventos em jQuery.
Listagem 7: Código para executar o passo 3.
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
Selecione seu personagem favorite:
<select name="Comics" multiple="multiple">
<option>Thor</option>
<option>Hulk</option>
<option>Spider man </option>
<option>Batman</option>
</select>
<div></div>
<script>
$("select").change(function () {
var escolhido = "";
$("select option:selected").each(function () {
Escolhido += $(this).text() + " ";
});
alert("Você prefere o "+escolhido);
})
.change();
</script>
</body>
</html>No código acima, a tag do script chama a função que produz um box de alerta baseado no valor selecionado da lista de opções.
O valor selecionado é guardado na variável favourite e é mostrada com o valor da string que é anexada.
AJAX: se unirmos o jQuery com o Ajax nós podemos desenvolver interativas e ricas aplicações web.
4º Passo no jQuery
Neste passo aprenderemos como implementar funcionalidades do ajax no jQuery.
JavaScript e XML assíncronos, também conhecidos como AJAX (Assynchronus JavaScript and XML), ajudam-nos a carregar informações do servidor sem permitir que toda a página seja atualizada.
Vamos ver um exemplo.
Neste exemplo, iremos carregar dados estáticos usando o AJAX do jQuery.
Load() é um dos métodos mais importantes em jQuery usado para carregar os dados.
Crie um arquivo html e nomeie como JQueryajax.html
Listagem 8: Código para executar o passo 4: JQueryajax.html.
<html>
<head>
<title>jQuery e Ajax</title>
<script type="text/javascript"
src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/JQuery/conteudo.html');
});
});
</script>
</head>
<body>
<p>Clique no botão abaixo para carregar o conteúdo:</p>
<div id="stage" >
Conteúdo
</div>
<input type="button" id="driver" value="Carregar" />
</body>
</html>Para executar este código nós devemos criar um arquivo html no diretório JQuery que já foi criado anteriormente. Temos de nomear o arquivo como conteudo.html. O código para conteudo.html é dado abaixo.
Listagem 9: conteudo.html.
<html>
<head>
<title>Página para teste</title>
</head>
<body>
Texto da página de conteúdo.
</body>
</html>No clique no botão "Load Some Text" no JQueryajax.html, será carregada a informação estática, do corpo de output.html.
Vamos dar uma olhada acima, no JQueryajax.html, mais em detalhes. Vamos olhar o método load().
$('#stage').load('/JQuery/conteudo.html');
O método load() aceita o caminho do output.html como um parâmetro seu e pede que o conteúdo seja carregado no estágio. Isto permite com que o arquivo html carregue os conteúdos de outro arquivo html.
JSON: Podemos trabalhar com dados de JSON usando jQuery.
5º Passo no jQuery
Neste passo aprenderemos como carregar dados de um arquivo .json.
Crie um arquivo html e nomeie como JQueryson.html. Abaixo está o código para carregar os dados de JSON.
Listagem 10: Código para executar o passo 5: JQueryson.html.
<html>
<head>
<title>Trabalhando com JSON</title>
<script type="text/javascript"
src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('/JQuery/dados.json', function(v) {
$('#stage').html('<p> Filme 1: ' + v.filme1 + '</p>'); $('#stage').append('<p>Filme 2 : ' + v.filme2+ '</p>');
$('#stage').append('<p> Filme 3: ' + v.filme3+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Clique no botão para carregar os dados</p>
<div id="stage" >
Filmes:
</div>
<input type="button" id="driver" value="Carregar " />
</body>
</html>Crie um arquivo dados.json no diretório /JQuery. O arquivo json deve parecer com este:
Listagem 11: Arquivo json.
{
"filme1": "O Homem de Aço",
"filme2" : "Os Mercenários",
"filme3": "O Hobbit"
}Vamos olhar o código acima em detalhes: Vamos olhar o método $.getJSON da página html acima em maiores detalhes.
No código acima, a função $.getJSON() pega o caminho /JQuery/dados.json, que é o caminho do arquivo json, em outras palavras, o arquivo que criamos no diretório JQuery.
Então a função $.getJSON() aceita outra função com parâmetro v como seu próprio parâmetro.
A variável v guarda os valores que são pegos do arquivo. Os valores guardados na variável v são filme1, filme2, filme3. Então, quando o código chama o valor pela chamada de suas respectivas chaves, digamos v.filme1, etc, os nomes respectivos são mostrados.
Mais do que as ferramentas que estão disponíveis em jquery-3.5.1.min.js o qual nós fizemos o download para este tutorial, existem muitos plugins disponíveis que podem também ser adicionados na mesma maneira como nós fizemos no passo 1 do nosso código html. Estes plugins têm mais ferramentas jQuery.
Confira também
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo