"Escrever menos e fazer mais".
Olá, meu primeiro post será sobre
Com algumas simples linhas de código podemos fazer animações e eventos em div's, imagens e em todo nosso documento HTML...
Conhecimentos necessários:
-----------------------------------------------------------Conhecimentos necessários:
- HTML
- CSS
Abaixo você vê algumas das vantagens do JQuery segundo o Wikipédia:
Principais funcionalidades do jQuery:
- Resolução da incompatibilidade entre os navegadores.
- Redução de código.
- Reutilização do código através de plugins.
- Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
- Trabalha com AJAX e DOM.
- Implementação segura de recursos do CSS1, CSS2 e CSS3.
Bom vamos ao que interessa, ao tutorial.
-----------------------------------------------------------
Nosso primeiro passo é o download do JQuery que está neste link:
http://code.jquery.com/jquery-1.4.2.min.js
Estamos baixando a versão PRODUCTION, que como o nome já diz, é a versão de produção, temos também a versão DEVELOPMENT, que é a versão para o desenvolvimento de Plugins, que é assunto para outros post's.
Feito o download do nosso arquivo jquery-1.4.2.min.js, podemos começar o desenvolvimento.
Crie um pasta em seu desktop com o nome "thecodebr_jquery", sem as aspas, em seguida crie outra pasta dentro da que você acabou de criar e de o nome para ela de "js", sem as aspas, ficando nossa arvore de diretórios assim:
thecode_jquery/js
Agora recorte o arquivo que você acabou de baixar e cole dentro da pasta "js".
Agora vamos criar um arquivo HTML, com duas div's e algumas linhas de css.
Nossa estrutura HTML será assim:
<html> <head> <title>.:: thecodebr.blogspot.com - Introdução ao JQuery </title> </head> <body> <div id="root"> Lorem ipsum dolor sit amet... <span id="link">Ler Mais +</span> <div id="conteudo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis iaculis felis ut porta. Ut id ante mauris. Sed eu elit vitae dui aliquet pulvinar. Sed euismod leo eu dui lobortis tristique. Nullam in interdum nunc. Nullam lacus sapien, consectetur vitae pretium nec. Suspendisse lacinia adipiscing tortor id ullamcorper. </div> </div> </body> </html>
Com o nosso HTML estruturado vamos adicionar nosso CSS, escreva
<style type="text/css">
#root
{
background-color: #0F0;
}
#conteudo
{
background-color: #FF0;
height: 300px;
display: none;
}
#link
{
cursor: pointer;
font-weight: bold;
}
</style>
Não vou entrar em detalhes sobre o código css, irei comentar algumas linhas apenas. Na linha 04 definimos a cor do background da div root, na linha 09, 10 e 11 definimos cor do background a altura e setamos a propriedade display como none da div "conteudo" assim ela ficará invisível, e nas linhas 15 e 16 setamos algumas propriedades do span "link", cursor e o font-weight.Ok, agora estamos com o HTML e o CSS devidamente desenvolvidos, vamos ao JQuery ou seja ao JavaScript.
O primeiro passo é linkar o nosso Framework, o arquivo do JQuery, baixado anteriormente,
<script src="js/jquery-1.4.2.min.js" type="text/javascript"> </script>Bom, o código acima apenas chama o nosso Framework, a propriedade src é onde está o nosso arquivo, no nosso caso está na pasta "js/", seguido do nome do arquivo, a propriedade type diz do que se trata esse arquivo, que no nosso caso é um arquivo "text/javascript", agora com o JQuery em nossa pagina, podemos desenvolver o código JavaScirpt,
<script type="text/javascript">
$(document).ready(function () {
$("#link").click(function () {
$("#conteudo").slideDown("slow").delay(1000).slideUp("slow");
});
});
</script>
Na linha 01, abrimos a tag script, dentro da tag setamos a propriedade type com o tipo do nosso script, que é "text/javascript", então podemos começar o nosso código JavaScipt, o JQuery usa o $ como o seu alias de chamada, como prática e segurança, sempre que iniciarmos um código JQuery, temos que ter certeza que o nosso documento HTML está 100% carregado, acalme, o JQuery verifica apenas o carregamento dos elementos, não das imagens e outros.Para fazer isto temos que selecionar nosso documento, na linha 03 iniciamos com o nosso alias "$", logo abrimos parênteses e definimos nosso selector(seletor) como "document", fechamos parênteses, após feito isso digitamos um ".", e escolhemos nosso método que é o "ready", abrimos parênteses novamente, agora já podemos definir nossas funções ou "function".
Com a function aberta, iremos escrever o que queremos, na linha 05 começamos novamente com o nosso alias "$", definimos nosso seletor com o ID do nosso span que é "link". Veja que o JQuery usa os mesmo seletores do CSS, "#ID", ".CLASS", e assim vai, em outro post irei falar sobre os seletores do JQuery. Setado nosso seletor, fechamos nosso parênteses e definimos nosso método que é o "click" e abrimos parênteses novamento, ou seja, quando clicarmos no nosso span "link", será disparado uma função.
Na linha 07 definimos a função que será disparada após o click, começamos novamente com o alias "$", definimos nosso seletor com o ID da nossa div que é "conteudo" que está invisível, então definimos nosso método que é "slideDown" e dentro dela setamos a velocidade como "slow", em seguida chamamos outro método que é o "delay" e setamos o tempo em 1000 milisegundos, após isso, chamamos outro método que é o "slideUp" e definimos a velocidade como "slow" novamente e acabamos a linha com um ";", nas próximas linhas fechamos os parênteses e as chaves abertas anteriormente.
Explicando o algoritmo:
Após nosso documento estar carregado, é adicionado o evento de click nosso span "link", e após clicarmos em nosso span, nossa div "conteudo" fará um "slideDown", tornando-a visível, após 1000 milisegundos, fará um "slideUp", tornando-a invisível novamente.
Agora, salve o documento como "index.html" dentro da pasta de seu projeto a "thecodebr_jquery", execute o arquivo e veja o resultado, impressionante não, muito simples.
Este é um exemplo de 0,0000001% do que o JQuery é capaz, qualquer duvida poste um comentário que estarei respondendo, bom estudos e até o próximo post, abraços.
Postagens
3 comentários:
dalee,bom tutorial.
posta uns sobre c#?!
Ok, postarei um tutorial sobre C# hoje, abraços.
Algum assunto em especifico que gostaria de aprender ?
Postar um comentário