O que sabemos ?
Primeiramente, precisamos entender o básico de HTML e CSS para iniciar a aventura em JQUERY. para o básico atente às aulas do Professor J. Roberto Lima e aos conteúdos aqui:
O que é jQuery?
O jQuery é uma biblioteca JavaScript disponibilizada como Software Livre, o que quer dizer que todas as funções encontradas podem ser utilizadas de acordo com a vontade do desenvolvedor. Com o jQuery, é possível implementar animações, efeitos, manipulação de eventos JavaScript, percorrer documentos HTML, adicionar CSS, Texto, validar formulários, interagir com Ajax, enfim, é possível fazer tudo isso e muito mais sem ter que atualizar a página. Isso faz com que seu website fique totalmente dinâmico, moderno, leve e elegante.
"Escreva Menos... Faça Mais!"
Foi desenvolvido, inicialmente, por John Resig que é um profundo conhecedor da linguagem JavaScript e queria fazer com que o modo de escrever códigos para adicionar pequenos efeitos em páginas fosse mais simples para o desenvolvedor de web.
Adquirindo o jQuery
Podemos utilizar o JQuery chamando as funções na própria página do desenvolvedor (CDN) ou instalar a biblioteca no seu próprio servidor.
Segue o endereço para a chamada da biblioteca no servidor do desenvolvedor ( Google ):
- https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
Segue o link para download da biblioteca para o SEU servidor:
Na página do desenvolvedor, dê um download na última versão.
Tudo o que for descrito aqui neste blog poderá ser acompanhado por você utilizando o bloco de notas do seu Windows, ou notepad++ ou outro de seu interessese.
OBS.:: Quando for salvar seus arquivos, utilize a seguinte sintaxe: Nome Do seu Arquivo + .html, ex: teste_1.html.
Qualquer arquivo .html, poderá ser aberto em um navegador de internet para que você faça a visualização do código no modo em que ele irá aparecer na sua página da internet.
Para fazer edição nesse arquivo, é necessário clicar com o botão direito do mouse sobre ele, selecionar a opção “Abrir com” e escolher o bloco de notas (ou qualquer outro editor de textos voltado para programação instalado em seu computador).
Para que você entenda melhor, criei uma pequena página HTML, segue o código:
<html>
<head>
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>
<head>
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>
Acima vemos a estrutura mais simples de HTML.
Como o documento acima é o mais básico, ele ainda não reconhece caracteres como “ç” e acentuação, pois ainda não configuramos o charset. É imprescindível a utilização de uma META descrevendo o que este documento contém (charset), então coloque essa meta logo abaixo da tag <head>, como mostra o código abaixo:
<html>
<head>
<meta charset="UTF-8">
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>
Para a instalação correta do jQuery, é necessário que você saiba o local onde ele foi salvo.
Em nosso exemplo, vamos salvar o arquivo dentro de uma pasta chamada js na pasta raiz do nosso site.
Na linguagem de programação Web, e várias outras linguagens de programação, raiz é o mesmo que a pasta inicial do seu programa.
Por exemplo, se o arquivo está dentro da raiz do site, não é necessário escrever /nome_do_arquivo.extensao, basta escrever o nome do arquivo e a extensão sem a barra.
Como nosso arquivo do jQuery (nomeado de jquery.js) está na pasta js dentro da raiz do site, o caminho dele será js/jquery.js, o que quer dizer que ele está na pasta js, que está na raiz do site.
Nota: Crie uma pasta e jogue todos os arquivos dentro dela, essa será a raiz do nosso site.
Sabendo onde está nosso arquivo jquery.js, iniciamos a “instalação” dele do mesmo modo que linkamos qualquer arquivo .js em nosso website, iniciamos e terminamos com
<script src=”js/jquery.js”> </script>.
Lendo este pequeno código e sabendo do que já foi dito, você já pode entender mais ou menos o que ele quer dizer: Abrimos a tag com <script em seguida terminamos indicando o caminho do arquivo jquery.js com src=”aulajs/jquery.js”. Toda e qualquer tag que se abre em HTML ou qualquer outra linguagem de programação, deve ser fechada; então fechamos o nosso script com </script>.
Nosso script de instalação do jQuery, deverá estar entre as tags <head> e </head>, veja o exemplo em nosso arquivo HTML:
Arquivo HTML com jQuery instalado:
<html><head>
<meta charset=UTF-8">
<script src="js/jquery.js"></script>
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>
Estrutura do jQuery
Agora vamos ver as estruturas mais usadas para o jQuery (use a que achar melhor).
- A forma mais completa (com a palavra jQuery)
- que é menos utilizada, porém previne contra incompatibilidade com outras bibliotecas JavaScript;
- A forma com o cifrão ($);
- E a mais forma compacta (a que eu sempre utilizo).
Tudo se passa dentro de um ambiente JavaScript, portanto, todo e qualquer código jQuery deverá estar dentro das tags <script> e </script>, veja o exemplo:
A forma completa:
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script>
// INICIO DO JQUERY
jQuery(document).ready(function(){
// AQUI VEM O CODIGO
}); // FIM DO JQUERY
</script>
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>
<head>
<meta charset="UTF-8">
<script>
// INICIO DO JQUERY
jQuery(document).ready(function(){
// AQUI VEM O CODIGO
}); // FIM DO JQUERY
</script>
</head>
<body>
</body>
</html>
Como você pode notar, escrevi onde começa a estrutura do jQuery, e onde ela termina. Esses scripts poderão ser colocados entre as tags <head> e </head> ou entre as tags <body> e </body>.
Por enquanto só vamos utilizar os códigos na head do documento, como mostra o exemplo anterior, portanto, não vamos mais mostrar todo o código html completo, tudo se passará no local onde foi adicionado o código mostrado no último exemplo.
Forma com apenas o cifrão
Também é possível escrever jQuery com o seguinte formato:
<script language="javascript" type="text/javascript"> $(document).ready(function(){ // AQUI VEM O CODIGO});</script>
Forma mais compacta
E por fim, a forma mais compacta para escrever trechos de código jQuery:
<script language="javascript" type="text/javascript">
$(function(){
// AQUI VEM O CODIGO
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
// AQUI VEM O CODIGO
});
</script>
A partir daqui, você já sabe que estamos falando de JavaScript e jQuery, portanto, agora mostraremos apenas o código jQuery em si, sem o <script> e </script>, mas você já sabe que deve colocar isso em documentos HTML, certo? Caso contrário não vai funcionar.
Escrevendo um texto no documento ( BODY ) com a função TEXT com jQuery
Para isso veja o script que está dentro da HEAD dentro do documento HTML:
$(document).ready(function(){$("body").text("Este é meu primeiro texto com jQuery");});
$(document).ready(function(){$("body").text("Este é meu primeiro texto com jQuery");});
- Primeiramente, escrevemos a estrutura do nosso jQuery;
- Logo em seguida, escrevemos o código $(“body”).text(“Este é meu primeiro texto com jQuery”);. Isso quer dizer que: 1) $(“body”) – estamos selecionando a tag body do nosso HTML; 2) .text(“Este é meu primeiro texto com jQuery”); – estamos pedindo ao jQuery que escreva “Este é meu primeiro texto com jQuery” dentro da tag selecionada (nesse caso a tag body).
Isso gera um pequeno problema para nós. Todo texto dentro da tag body (o documento inteiro) será substituído pelo texto que escrevemos agora, e nós não queremos um site de uma frase só, certo?
Bom, para isso é simples, basta selecionarmos um elemento apenas, e não todo o “body”. (mas calma que você ainda vai aprender isso, por enquanto vamos trabalhar na tag body como um todo).
ENTENDA que o documento desenvolvido ficaria assim:
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jq/jquery.js"></script> // chamada da biblioteca jquery
<script type="text/javascript"> // criação do script tipo javascript
$(document).ready(function(){ // criação da função jquery dentro do documento HTML
$("body").text("Este é meu primeiro texto com jQuery"); // inserindo texto no body do HTML
alert("E está tudo funcionando !"); }); // inserindo alert no body do HTML
</script> // finalizando o script jquery
<title>Aula 1 :: jQuery</title>
</head>
<body>
<center> ERRO!!! // se você ver isso escrito no body é porque deu algo errado...
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1")
.css("color","#ff7f50")
.text("Javascript")
.hide()
.delay("1000")
.fadeIn("slow")
.click(function(){ // função click de mouse para jquery
$("h1")
.hide()
.text("Funções Básicas Jquery")
.css("color","#00008b")
.delay("1000")
.fadeIn("slow")
});
});
</script>
<title>jQuery :: Funções</title>
</head>
<body >
<center>
<h1> </h1>
</body>
</html>
</head>
<body>
<center> ERRO!!! // se você ver isso escrito no body é porque deu algo errado...
</body>
</html>
Observe que existe um script para a chamada da biblioteca jquery dentro do javascript e uma script para a inclusão de instruções e deve ser dessa forma sempre que quisermos inserir scripts no documento.
OK. O inicio de Jquery dentro do Javascritp está feito! agora vamos observar algumas funções que a biblioteca jquery possui, eu disse apenas algumas! veja.
FADE - função utilizada para remover ou exibir um objeto do documento com FADEIN para inserir e FADEOUT para remover.
DELAY - função de espera, utilizada para executar funções com um determinado tempo ou esperar um determinado tempo para que elas sejam executadas.
HIDE - função utilizada para esconder um objeto do documento
SHOW - função utilizada para mostrar um objeto do documento
Vamos observar uma página com as funções;
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1")
.css("color","#ff7f50")
.text("Javascript")
.hide()
.delay("1000")
.fadeIn("slow")
.click(function(){ // função click de mouse para jquery
$("h1")
.hide()
.text("Funções Básicas Jquery")
.css("color","#00008b")
.delay("1000")
.fadeIn("slow")
});
});
</script>
<title>jQuery :: Funções</title>
</head>
<body >
<center>
<h1> </h1>
</body>
</html>
Note que o JQuery nos permitiu trabalhar com a H1 do Body diretamente controlando até o click do mouse. Bom né?!?
É isso!
Pronto! Pronto!
Nenhum comentário:
Postar um comentário