Olá olá, estou de volta mas desta vez irei falar um pouco de como usar o tão importante jQuery. Estou falanado nada mais nada menos que o framework de JavaScript mais usado na net, que ajuda muito o código ficar mais leve e mais fácil de se programar.
Vamos começar com o mais básico, teremos puxar ao código do framework, para podermos começar a trabalhar com o código. Usaremos o link que O PAI nos fornece, pois ai ele irá carregar mais rápido. O código abaixo irá indexar o arquivo principal:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
O código acima deve entrar no cabeçalho do seu site, dentro da tag <head> .
Após feito isso podemos começar a trabalhar em cima do código que irá exibir a mensagem “Hello World” na tela.
Bom todo código jQuery tem que iniciar da seguinte forma para que funcione:
<script type="text/javascript">
$(document).ready(function() {
// Seu código entra aqui
});
</script>
Após feito isso teremos que adicionar o código que irá fazer o alerta pular na tela ao clicar em uma div. Primeiro iremos adicionar uma dentro do corpo[body] do seu código.
<div id="cria_alerta" class="botao">Exibir mensagem</div>
Este div deve ter um id para que possamos adicionar a ação de criar o alerta e uma classe para que possamos cria o estilo do botão. Abaixo você encontra o código CSS que irá criar o estilo de nosso botão.
<style type="text/css" media="screen" title="Estilo criado para o botão">
div.botao { line-height:30px; width:105px; padding: 0 10px; background: #e1e1e1; border:1px solid #333; cursor:pointer; }
</style>
Adicione o código acima dentro da cabeçalho da sua página, e agora volte-se para a parte do código onde iremos escrever a função para criar o alerta. Substitua “// Seu código aqui” por:
$("#cria_alerta").click(function(){
alert("Hello World!");
});
Agora iremos entender um pouco código acima, a parte onde você encontra $(#cria_alerta) você está definido qual será o objeto que irá disparar a ação, .click(); diz qual ação irá acontecer ao clicar no objeto declarando anteriormente, e alert(); faz com que o alerta seja criado.
Após feito isso já temos nossa página criada, basta você testar, salve o arquivo como .html, e abra com algum navegador para ver o resultado ou veja como ficou o resultado do nosso pequeno trabalho na web.
Qualquer dúvida basta deixar um comentário que eu irei responder!
4 Pings to “Curso de jQuery – Junte o útil ao agradável – Parte 1”
19 Responses to “Curso de jQuery – Junte o útil ao agradável – Parte 1”
-
1. Alexandre Beu Says:
junho 13th, 2009 at 7:10 pmShow de bola!
Já uso o jQuery, mas vou acompanhar suas aulas Guanabara! -
2. Gustavo Guanabara Says:
junho 13th, 2009 at 7:10 pmMeus parabéns pela estréia, Bordoni!! Com certeza esse será o melhor curso de jQuery EVER!! Sucesso!
-
3. Gustavo Bordoni Says:
junho 13th, 2009 at 7:11 pmGuanabara não! Sou só o Chara dele…
Obrigado Alexandre Beu.
-
4. Natanael || Divinópolis-MG || 18 anos Says:
junho 13th, 2009 at 7:24 pmMuito bom!
Dicas preciosas pro site que estou criando…Valeu Bordon.
Começou muito bem.
-
5. Gustavo Bordoni Says:
junho 13th, 2009 at 7:31 pmObrigado, no próximo irei falar sobre a criação de um… Deixa, vocês verão!
-
6. Bruno Luiz - 15 anos - Blumenau/SC Says:
junho 13th, 2009 at 7:32 pmParabéns! Ótima iniciativa
Cara, isso vai ser de muita utilidade para web designers e desenvolvedores. Não esqueça-te de fazer artigos sobre AJAX e jQuery.
Boa sorte,
Bruno Luiz. -
7. Gustavo Bordoni Says:
junho 13th, 2009 at 7:33 pmClaro pode deixar irei faze-los. Esses são um pouco mais para frente mas virão!
-
8. Rafael Zorzi Says:
junho 13th, 2009 at 7:50 pmMuito útil…
-
9. Guilherme Rodrigues | 18 anos | Iracemápolis-SP Says:
junho 13th, 2009 at 8:36 pmCaraca… muito fera Gustavo… valeu cara !!
-
10. Mateus Caldas Craveiro Says:
junho 13th, 2009 at 8:42 pmMto bom… tava mesmo querendo aprender mais jquery!!
-
11. Irio Musskopf | 16 anos | Canoas - RS Says:
junho 14th, 2009 at 1:31 pmPoderia começar falando o que é e para que serve JavaScript, mas tirando isso, ótimo curso!
-
12. Gefferson Batista "Gesseh" - 19 - RJ Says:
junho 15th, 2009 at 10:51 amParabens Bordoni, to a algum tempo querendo aprender mais sobre javascript e jquery mas nunca consigo estudar sozinho, a forma q tuh trouxe o tema e explicou foi bem simples e consegui entender perfeitamente. To esperando pra aprender mais
.
Grande Abraço -
13. Fábio Says:
junho 15th, 2009 at 4:29 pmé guanabara, foi essa biblioteca que eu usei pra fazer o fotolog lembra ? hehehehee ..
agora estou trabalhando numa empresa pois aprendi fazer aplicações com essa poderosa ferramenta.Um tempo atras tinha criado umas aulas também e fiz um blog mas
no momento que estou atarefado não estou dando conta. :\fiz algumas aulas, tem varios exemplos para pessoas que querem iniciar nessa ferramenta lá ..
segue o link : http://jqu3ry.wordpress.com/
Sucesso com as aulas gustavo,
abração ! -
14. Fábio Says:
junho 16th, 2009 at 2:55 pmos exemplos do site estavam off-line por um problema no servidor
agora os exercicios estão ok.Abração.
-
15. Neri Júnior Says:
junho 16th, 2009 at 10:23 pmBelo post introdutório(aaaauu!), po Guanabara vamos colocar uma “syntax highlighter” aí, codigo muito “cinzinha”.
-
16. Joao Vitor Arruda I 13 anos I Fortaleza-CE Says:
junho 18th, 2009 at 8:58 amA NOSSA VOLTA ESTAMOS RODEADOS DE JAVASCRIPT, eu ja tentei aprender mas agora no guanabara.info vaiser mais facil
.
O ruim e que tem que escrever umonte de coisa pra fazer um botao ou uma prase em negrito.
-
17. Samuel Varela - 30 anos - Crato-CE Says:
junho 18th, 2009 at 3:05 pmMuito legal.
-
18. Diones Says:
junho 18th, 2009 at 9:14 pmOlá Bordoni, é a primeira vez que posto comentario aqui, ja sou “ouvinte dos podcats” a algum tempo , porem unca postei pois ainda não tive tempo de terminar de ouvir todos os pods. mas não demorará muito para isso.
bom minha duvida é: não sei como fazer animações tipo fade no js, na verdade conheço essa linguagem de programação muito pouco , mas me enteresso bastante por ela, estou fazend o curso de ciencia da computação e não consigo me adaptar com a linguagem C, por isso estou conhecendo outras LP, entende?oque vc me aconcelha para aprender JAVA, PHP, JS, e etc…
sou louco por computador e gosto de aproveitar meu tempo com coisas uteis que posso me ajudar futuramente. espero contato.
parabéns pela iniciativa de ensinar js”jquery” para nós gopstei muito. -
19. Gustavo Bordoni Says:
junho 19th, 2009 at 12:41 am@Guilherme Rodrigues: Muito obrigado pelo elogio, isso é muito gratificante.
@Mateus Caldas Craveiro: Cara sempre tenha fome de conhecimento que assim irá aprender bastante!
@Irio Musskopf: Cara eu até iria começar falando sobre o que é o Java Script mas poderiamos perder tempo, pois o mesmo pode ser usado de maneiras inúmeras.
@Gefferson Batista “Gesseh”: Cara são estes tipos de comentários que incentivam-me a continuar escrevendo. É muito bom ter o FeedBack.
@Fábio: Achei interessante o blog mas tempo é algo raro e necessário, é complicado mesmo manter blogs.
@Neri Júnior: Cara não sou Adminstrador do Site, se não eu colocava o Syntax Highlighter Facilita muito a compreensão do código. Estou para falar isso com o Gustavo Guanabara.
@Joao Vitor Arruda: Cara mas o JavaScript//jQuery não deve ser usado para criar uma página, mas sim para dar algum tipo de dinamismo a mesma.
@Samuel Varela: Muito obrigado cara.
@Diones: Cara o jQuery é uma ótima ferramenta, mas como nenhuma linguagem na internet faz-se sozinha, necessita de auxiliares. Um exemplo é o XHTML que sem o CSS é uma criança imatura. Mas se está a começar no campo “online” da programação, eu devo sugerir começar pelo XHTML e pelo CSS.
junho 19th, 2009 at 11:59 pm
[...] Aprendendo a importar o Framework do Google [...]
julho 8th, 2009 at 8:36 pm
[...] Aprendendo a importar o Framework do Google [...]
julho 15th, 2009 at 6:04 pm
[...] Aprendendo a importar o Framework do Google [...]
julho 22nd, 2009 at 2:16 pm
[...] Aprendendo a importar o Framework do Google [...]