Responder a este comentário

jQuery - Tutorial mostrando como utilizar algumas das funções básicas do jQuery.

Criei este tutorial para ajudar os iniciantes em jQuery a entenderem melhor como coisas simples são feitas. Criei um código todo comentado onde eu já explico em cada linha o que a função faz.

Mostrei também como incluir a biblioteca jQuery em seu site utilizando o servidor do google como fonte, economizando assim um pouco de banda da sua hospedagem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--Utilizando o jquery vindo dos servidores da google -->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.4.2", {uncompressed:true});
</script>


<script type="text/javascript" >

//Quando o documento pronto ele irá executar os códigos dentro da função abaixo.
$(document).ready(function ()
{
   
    //Adicionando css diretamente a todos os links do site.
    $("a").css("background","#ccc");
   
    //adicionando um css diferente apenas para o primeiro link do site.
    $("a").first().css("background","#00f");
   
    //criando uma função para fazer o terceiro link do site criar uma animação utilizando a função animate do jQuery.
    $("a").eq(2).click(function(){
         //fazendo o link clicado ficar com a fonte 40 e com a opacidade em 0.50
         $(this).animate({
            opacity: 0.50,
            fontSize: 40
     
         })
    });
   
    //adicionando texto antes do último link encontrado no site.
    $("a").last().before("<p>texto adicionado via jQuery</p>");
   
    //adicionando texto depois do último link encontrado no site.
    $("a").last().append("<p>texto adicionado via jQuery</p>");
   
    //adicionando uma classe em todos os links do site
    $("a").addClass("nome_da_classe");
   
    //Adicionando efeito animate no mouse over e mouse out no segundo link
    $("a").eq(1).hover(function() {
            $(this).animate({
                fontSize: 30
                })
        }, function() {
            $(this).animate({
                fontSize: 15
                })
        });
   
});
</script>

</head>

<body>
<a href="#">teste</a>
<a href="#">teste2</a>
<a href="#">teste3</a>
<a href="#">teste4</a>
</body>
</html>

Qualquer dúvida é só falar!

4
Your rating: Nenhum Average: 4 (1 vote)

Responder

O conteúdo deste campo é privado não será exibido ao público.