Funções básicas - jQuery

Natal DevMedia: Assine hoje e ganhe 3 meses gr�tis

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>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2", {uncompressed:true});
</script>

//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>