Curso de jQuery – Junte o útil ao agradável – Parte 1

Tags: CSS, Curso jQuery, JavaScript, jQuery, Web

Categorias: Aprenda, jQuery

2009 13/06

Por: Gustavo Bordoni

20 comente

Aprenda jQuery no Guanabara.info

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!

Related Posts with Thumbnails
  • Alexandre Beu

    Show de bola!
    Já uso o jQuery, mas vou acompanhar suas aulas Guanabara!

    [Responder]

    junho 13, 2009 @ 7:10 pm
  • Gustavo Guanabara

    Meus parabéns pela estréia, Bordoni!! Com certeza esse será o melhor curso de jQuery EVER!! Sucesso!

    [Responder]

    junho 13, 2009 @ 7:10 pm
  • Gustavo Bordoni

    Guanabara não! Sou só o Chara dele…

    Obrigado Alexandre Beu.

    [Responder]

    junho 13, 2009 @ 7:11 pm
  • Natanael || Divinópolis-MG || 18 anos

    Muito bom!
    Dicas preciosas pro site que estou criando…

    Valeu Bordon.

    Começou muito bem. :mrgreen:

    [Responder]

    junho 13, 2009 @ 7:24 pm
  • Gustavo Bordoni

    Obrigado, no próximo irei falar sobre a criação de um… Deixa, vocês verão!

    [Responder]

    junho 13, 2009 @ 7:31 pm
  • Bruno Luiz - 15 anos - Blumenau/SC

    Parabé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.

    [Responder]

    junho 13, 2009 @ 7:32 pm
  • Gustavo Bordoni

    Claro pode deixar irei faze-los. Esses são um pouco mais para frente mas virão!

    [Responder]

    junho 13, 2009 @ 7:33 pm
  • Rafael Zorzi

    Muito útil…

    [Responder]

    junho 13, 2009 @ 7:50 pm
  • Guilherme Rodrigues | 18 anos | Iracemápolis-SP

    Caraca… muito fera Gustavo… valeu cara !!

    [Responder]

    junho 13, 2009 @ 8:36 pm
  • Mateus Caldas Craveiro

    Mto bom… tava mesmo querendo aprender mais jquery!!

    [Responder]

    junho 13, 2009 @ 8:42 pm
  • Irio Musskopf | 16 anos | Canoas - RS

    Poderia começar falando o que é e para que serve JavaScript, mas tirando isso, ótimo curso!

    [Responder]

    junho 14, 2009 @ 1:31 pm
  • Gefferson Batista "Gesseh" - 19 - RJ

    Parabens 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

    [Responder]

    junho 15, 2009 @ 10:51 am
  • Fábio

    é 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 !

    [Responder]

    junho 15, 2009 @ 4:29 pm
  • Fábio

    os exemplos do site estavam off-line por um problema no servidor
    agora os exercicios estão ok.

    Abração.

    [Responder]

    junho 16, 2009 @ 2:55 pm
  • Neri Júnior

    Belo post introdutório(aaaauu!), po Guanabara vamos colocar uma “syntax highlighter” aí, codigo muito “cinzinha”.

    [Responder]

    junho 16, 2009 @ 10:23 pm
  • Joao Vitor Arruda I 13 anos I Fortaleza-CE

    A NOSSA VOLTA ESTAMOS RODEADOS DE JAVASCRIPT, eu ja tentei aprender mas agora no guanabara.info vaiser mais facil :-D .
    O ruim e que tem que escrever umonte de coisa pra fazer um botao ou uma prase em negrito. :cry: :cry:

    [Responder]

    junho 18, 2009 @ 8:58 am
  • Diones

    Olá 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.

    [Responder]

    junho 18, 2009 @ 9:14 pm
  • Gustavo Bordoni

    @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.

    [Responder]

    junho 19, 2009 @ 12:41 am
  • Sérgio Murillo

    Putz .. aki num deu em nada kkk depois faço com mais calma.

    [Responder]

    março 22, 2010 @ 11:54 am

Comentar