jQuery – O método load()

Como descrito nos capítulos anteriores, existem várias maneiras de usar AJAX com jQuery, e elas devem com certeza ser usadas dependendo da situação. Um dos métodos mais simples e ainda sim poderoso para carregar dados assincronamente é o método load(). Você o usa escolhendo um elemento onde você quer o conteúdo carregado e então chama o método load() nele. Ele recebe a URL que você deseja carregar, como parâmetro. Por exemplo, nós precisamos de um arquivo externo que nós podemos carregar. Nós vamos chamar de content.html e o conteúdo dele deve ser parecer com isso:

<div id="divContent">
        <b>This is external content</b>
</div>
And there's more of it

Salve isso como content.html, no mesmo diretório onde você mantém os outros arquivos de exemplo deste tutorial. Nós podemos carregar ele simples assim:

<div id="divTestArea1"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1").load("content.html");
});
</script>

Se você tem o arquivo de conteúdo em outro diretório, ou se você nomeou ele diferentemente, você terá que mudar o parâmetro para o método load consequentemente. Isso é tudo que ele precisa para carregar o conteúdo de um arquivo externo com jQuery e o método load. Um truque muito legal é que você pode na verdade passar um seletor (selector) juntamente com a URL, para apenas pegar uma parte da página. No primeiro exemplo, nós carregamos o arquivo inteiro, mas no exemplo seguinte, nós vamos apenas usar a div, que contém a primeira sentença:

<div id="divTestArea2"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea2").load("content.html #divContent");
});
</script>

Como você pode ver, nós simplesmente anexamos um seletor jQuery padrão ao parâmetro, depois da URL, separada por um espaço. Isso faz o jQuery selecionar o conteúdo fora e apenas passa as partes correspondidas de volta ao container. Você pode usar qualquer tipo de seletor jQuery para retirar esse truque, que o torna muito poderoso.

O método load pode receber dois parâmetro extra: Um conjunto de string de consulta (querystring) pares de chave/valor, e uma função de callback que será executada quando o método load terminar, não importa se ele tiver êxito ou falhar. Aqui está um exemplo onde nós usamos a função callback para informar sobre o resultado. Normalmente, você deveria provavelmente apenas mostrar uma mensagem se o método falhasse, mas para ilustrar como isso funciona, nós fazemos isso se o método falhar também. Eu me certifiquei que isso falharia por exemplo, requisitando um arquivo que não existe:

<div id="divTestArea3"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").load("no-content.html", function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });
});
</script>

Como você pode ver, a função de callback especifica 3 parâmetros, que jQuery preencherá para você. O primeiro parâmetro irá conter o conteúdo resultado se a chamada tiver sucesso. O segundo parâmetro é uma string que especifica o estado da chamada, ex. “sucesso” ou “erro”. Você pode usar isso para ver se a chamada foi bem sucedida ou não. O terceiro parâmetro é o objeto XMLHttpRequest usado para executar a chamada AJAX. Isso conterá propriedades que você pode usar para ver o que deu errado e muitas outras coisas.

Fonte: jQuery-tutorial.net

jQuery – Introdução ao AJAX

AJAX, abreviação para Asynchronous JavaScript And XML (XML e JavaScript Assíncronos), permite você carregar dados em background e mostra-lo na sua página web. Isso lhe permite criar websites com funcionalidade mais rica.Aplicações web populares como Gmail, Outlook Web Access, e Google Maps usam AJAX e extensivamente, para fornecer a você uma experiência mais responsiva, como desktop.

Usar AJAX pode ser um pouco complicado, porque os vários navegadores tem diferentes implementações para suportar AJAX. Normalmente isso irá lhe forçar a escrever código para responder de forma diferente, dependendo do navegador, mas felizmente, jQuery fez isso pra gente, que nos permite escrever AJAX funcionalmente com tão pouco quanto uma única linha de código.

Você deve estar ciente do fato que existe ambas vantagens e desvantagens ao usar AJAX na sua página, que significa que você deve sempre considerar cuidadosamente antes de decidir usar isso ao invés de fazer uma chamada comum de volta ao servidor. Aqui está um resumo:

Vantagens:

• Sua página será mais prazerosa de usar, quando você pode atualizar partes dela sem um refresh, que faz o navegador piscar e rodar a barra de status.
• Porque você apenas carrega o dado que você precisa para atualizar a página, ao invés de  atualizar a página inteira, você salva largura de banda.

Desvantagens:

• Porque as atualizações são feitas pelo JavaScript no cliente, o estado não irá registrar no histórico do navegador, fazendo isso impossível de usar os botões Voltar e Avançar do navegador entre os vários estados da página.
• Pelo mesmo motivo, um estado específico não pode ser favoritado pelo usuário.
• Dado carregado através do AJAX não será indexado por qualquer dos maiores motores de busca.
• Pessoas usando navegadores sem suporte JavaScript, ou com JavaScript desabilitado, não será capaz de usar a funcionalidade que você fornece através do AJAX.
  Os dois primeiros itens da lista podem ser contornados embora, tipicamente através do uso de um iframe e lendo e escrevendo dado de uma parte da URL depois do caractere “#”.

Nos capítulos seguintes, você irá aprender como usar várias funções AJAX relacionadas ao jQuery.

Fonte: jquery-tutorial.net

jQuery – O método live()

No capítulo anterior, nós usamos os métodos bind() e unbind() para anexar e desanexar manipuladores de eventos a vários elemento na página. Isso funciona bem para elementos dos quais ja existem, mas e se você  quiser que seu manipulador de evento seja anexado para elementos futuros também? Normalmente você teria que fazer isso manualmente, sobre a criação de novos elementos, e isso continuaria possível. Porém usando o método live(), você pode informar ao jQuery para anexar o seu manipulador de evento para qualquer elemento futuro que combine com o seu seletor original, sem precisar levantar um dedo. Deixe-me primeiro mostrar a você um exemplo onde nós usamos o método bind(), e então substituímos ele com o método live(), para mostrar a diferença:

<div id="divTestArea1">
        <a href="javascript:void(0);" onclick="AddBox();">Add box</a>
        <div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
        $(".test").bind("mouseover", function()
        {
                $(this).css("background-color", "blue");
        }).bind("mouseout", function()
        {
                $(this).css("background-color", "white");
        });
});

function AddBox()
{
        var div = $("<div></div>").addClass("test").text("Another box");
        $("#divTestArea1").append(div);
}
</script>

OK, esse exemplo pode parecer um pouco complicado, mas na verdade não é. Deixe me explica-lo. Nós temos um link, qual irá chamar o método javascript AddBox(), e então nós temos uma diz com a classe “test”. O método AddBox() simplesmente adicionar outra div na página. No evento read, nós selecionamos todos os elementos com a classe “test” e então nós vinculamos um manipulador para dois dos eventos: Os eventos mouseover e mouseout , quando nós mudamos a cor do elemento invocando o evento. Tente o exemplo no seu navegador. A primeira div terá o efeito mouseover, mas se você clicar no link para adicionar mais caixas, elas não terão o mesmo efeito. A razão é bastante óbvia: Nós anexaremos os eventos antes dessas novas caixas serem criadas.

Agora tente o seguinte exemplo em vez disso. Eu apenas modifiquei dias palavras nisso: As dias chamadas a bind() foram substituídas com chamadas a live():

<div id="divTestArea2">
        <a href="javascript:void(0);" onclick="AddBox();">Add box</a>
        <div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
        $(".test").live("mouseover", function()
        {
                $(this).css("background-color", "blue");
        }).live("mouseout", function()
        {
                $(this).css("background-color", "white");
        });
});

function AddBox()
{
        var div = $("<div></div>").addClass("test").text("Another box");
        $("#divTestArea2").append(div);
}
</script>

Agora se você puder rodar esse exemplo, você verá que mesmo você adicionando novos elementos após a página ser carregada, jQuery irá automaticamente anexar o manipulador de eventos a eles para você. O método live() funciona como o bind() em todos os outros aspectos, então cheque os capítulos anteriores para mais informações sobre isso. O mesmo funciona para o método die(), que funciona como o método unbind(), mas deve ser usado para casos onde o método live() foi usado.

Fonte: jquery-tutorial.net

jQuery – O método unbind()

No capítulo anterior, nós usamos o método bind() para inscrever a eventos com jQuery. No entanto, você pode precisar remover essas inscrições novamente por vários motivos, para prevenir o manipulador de eventos seja executado uma vez que o evento ocorra. Nós fazemos isso com o método unbind(), que em sua forma mais simples se parece com isso:

$("a").unbind();

Isso irá remover quaisquer manipuladores de evento que você tenha anexado com a função bind(). Porém, você pode querer remover apenas inscrições de evento de um tipo específico, por exemplo clicks e doubleclicks:

$("a").unbind("click doubleclick");

Simplesmente separe os tipos de evento com espaço. Aqui esta um exemplo mais completo, onde você pode ver isso tudo em ação:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", function() {
                $("a").unbind("click");
                alert("First and only message from me!");
        });
});
</script>

Neste pequeno exemplo, nós inscrevemos o evento de click a todos os links. Porém uma vez que o link é clicado, nós removemos todas as inscrições e alertamos o clicador sobre isso. O manipulador de evento não será mais ativado pelos links.

jQuery permite você se inscrever ao mesmo tipo de evento mais de uma vez. Isso pode vir a calhar se você quiser o mesmo evento faça mais de uma coisa em diferentes situações. Você faz isso chamando o método bind() para cada vez que você quer anexar um pedaço de código para isso, assim:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", function() {
                alert("First event handler!");
        });
        
        $("a").bind("click", function() {
                alert("Second event handler!");
                $("a").unbind("click");
        });
});
</script>

Porém, abre-se para a possibilidade de uma vez que você desvincule um evento, você pode estar removendo inscrições de evento usado todo em um outro lugar do seu código, que você ainda precisa. Se você tentar o exemplo, você vai ver o resultado disso – quando você clica em um link, todos as inscrições de evento são removidas. jQuery permite que você especifique um argumento secundário, que contém uma referencia a um manipulador específico que você gostaria de remover. Desse jeito, nós podemos ter certeza que nós apenas removemos a inscrição de evento que nós pretendíamos. Aqui está um exemplo:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        var handler1 = function() 
        {
                alert("First event handler!");
        }
        
        var handler2 = function() 
        {
                alert("Second event handler!");
                $("a").unbind("click", handler2);
        }
        
        $("a").bind("click", handler1);
        $("a").bind("click", handler2);
});
</script>

Especificando handler2 como parâmetro secundário, apenas esse manipulador de evento específico é removido. Tente o exemplo. A mensagem secundária é apenas mostrada a primeira vez que você clicar no link.

Fonte: jquery-tutorial.net

jQuery – Introdução à eventos (events) – O método bind()

Introdução à eventos (events)

Eventos em JavaScript são geralmente alguma coisa onde você escreve um pedaço de código ou um nome de uma função dentro de um atributo de evento em uma tag HTML. Por exemplo, você pode criar um evento para um link escrevendo um código assim:

<a href="javascript:void(0);" onclick="alert('Hello, world!');">Test</a>

E claro isso ainda é perfeitamente válido quando se usa jQuery. Porém, usando jQuery, você pode vincular código a um evento de um elemento ainda mais fácil, especialmente em casos onde você quer anexar funções anônimas ou usar o mesmo código para múltiplo eventos, ou ainda o mesmo código para múltiplos eventos de múltiplos elementos. Com por exemplo, você pode vincular o mesmo evento para todos os links e tags span no seu documento, com apenas algumas linhas de código assim:

<script type="text/javascript">
$(function()
{
        $("a, span").bind("click", function() {
                alert('Hello, world!');
        });
});
</script>

Nós usamos o método bind, que é essencial quando trabalhamos com eventos e jQuery.

O método bind()

Um dos aspectos mais importante de lidar com eventos através do jQuery são os métodos bind() e unbind(). Como o nome sugere, eles vão simplesmente anexar e desanexar código a um ou vários eventos em um conjunto de elementos. Nós vimos um exemplo de uso muito simples do método bind() na introdução à eventos, e aqui está um mais completo:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
$(function()
{
        $("a").bind("click", function() {
                alert($(this).text());
        });
});
</script>

Isso funciona selecionando todos os links (elementos <a>) e então vinculamos a função anônima que você vê ao evento click. Uma pequena característica legal é que o jQuery irá automaticamente atribuir o elemento que é clicado, à palavra-chave “this” dentro da função anônima. Isso irá permitir você acessar o elemento que ativa o elemento, mesmo quando você atribuir o mesmo código para múltiplos elementos.

Quando o jQuery chama seu método, ele irá passar informação sobre o evento como primeiro parâmetro, se você especificou um ou mais parâmetro nele. Por exemplo, o objeto de evento passado irá conter informação sobre onde o cursor do mouse está, qual tipo de evento é, qual tecla do teclado ou botão do mouse foi apertado (se algum) e muito mais.
Você pode ver todas as propriedades e métodos do objeto de evento aqui: http://api.jquery.com/event.which/

Aqui está um exemplo:

<div id="divArea" style="background-color: silver; width: 100px; height: 100px;">
</div>
<script type="text/javascript">
$("#divArea").bind("mousemove", function(event)
{
        $(this).text(event.pageX + "," + event.pageY);
});
</script>

Nós criamos um elemento div de um tamanho razoável e uma cor de fundo. Para essa div, nós vamos subscrever ao evento mousemove, com uma função anônima com um parâmetro chamado “event”. Esse objeto nos dá acesso as propriedades pageX e pageY, que nos diz onde na página o cursor do mouse está atualmente, referente ao canto superior esquerdo do documento. Tente o exemplo e mova o cursor sobre o elemento div e você verá as coordenadas atualizadas conforme você move o mouse.

O método bind() também permite você passar dados por contra própria e acessá-lo pelo objeto de evento. Isso também permite você atribuir valores na hora que você vincular o evento, e estar apto para ler esse valor na hora que esse evento é invocado, apesar de a variável original que você usou pode ter mudado. Aqui está um exemplo onde você pode ver isso:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", { message : msg }, function(event) {
                msg = "Changed msg";
                alert(event.data.message);
        });
});
</script>

Nós passamos o valor como parâmetro secundário do método bind(), como um mapa do tipo chave-valor. Você pode passar mais de um valor separando eles por vírgulas. Para acessar o valor dentro do event handler, nós usamos a propriedade de dados do objeto evento. Essa propriedade contém sub-propriedades para cada um dos valores que você passou, que significa que você pode acessar o valor do parâmetro “message” usando evento.data.message.

Apesar do fato que nós mudamos o valor da variável “msg” dentro do event handler, a mensagem mostrada será ainda “Hello, world!” toda vez que você clicar em um dos links, porque é avaliada assim que o event handler está vinculado, que é depois que a página foi carregada.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Os métodos remove() e empty()

Nos últimos dois capítulos, nós trabalhamos com adicionando novos elementos a uma página, mas claro que o jQuery pode ajudar você a remover eles também. Existem principalmente dois métodos para isso: remove() e empty(). O método remove() irá deletar o(s) elemento(s) selecionado(s), enquanto o método empty() irá apenas deletar todos os elementos filhos do(s) elemento(s) selecionado(s). O seguinte exemplo deve ilustrar a diferença – tenha certeza de clicar os links na ordem certa:

<a href="javascript:void(0);" onclick="$('#divTestArea1').empty();">empty() div</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').remove();">remove() div</a>
<div id="divTestArea1" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        <b>Bold text</b>
        <i>Italic text</i>
</div>

O primeiro link irá chamar o método empty() na nossa div de teste, removendo todos os elementos filhos. O segundo link irá remover a div inteira, incluindo qualquer elemento filho. Coisa muito simples.

O método remove() vem com um parâmetro opcional, que permite você filtrar os elementos a serem removidos, usando qualquer uma das sintaxes dos seletores do jQuery. Você pode com certeza realizar o mesmo simplesmente fazendo o filtro no seu primeiro selector, mas em algumas situações, você pode estar trabalhando com um conjunto de elementos já selecionados. Veja esse exemplo disso em uso:

<a href="javascript:void(0);" onclick="$('#divTestArea2 b').remove('.more');">remove() more bold</a>
<div id="divTestArea2" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        <b>Bold text</b><br />
        <b>More bold text</b><br />
        <b>Even more bold text</b><br />
</div>

Nós começamos selecionando todas as tags bold (negrito) dentro da nossa div de teste. Nós então chamamos o método remove() nos elementos selecionados, e passamos no filtro “.more”, que irá certificar-se que nós apenas peguemos elementos que usam a classe “more”. Como resultado, apenas os últimos dois textos em negrito serão removidos.

Você pode com certeza usar ainda seletores mais avançados como filtro também. Dê uma olhada no tópico “Seletores” para mais inspiração.

Fonte: jquery-tutorial.net

jQuery – Os métodos before() e after()

No capítulo anterior, nós usamos os métodos append() e prepend() para inserir coisas dentro de um elemento, mas em alguns casos, nós precisamos inserir coisas antes ou depois de um ou vários elementos em vez disso. O jQuery tem os métodos befoer() e after() apenas para esse propósito, e eles são tão fáceis de usar. Veja esse exemplo:

<a href="javascript:void(0);" onclick="$('input.test1').before('<i>Before</i>');">Before</a>   
<a href="javascript:void(0);" onclick="$('input.test1').after('<b>After</b>');">After</a>
<br /><br />
<input type="text" value="Input 1" name="txtInput1" /><br />
<input type="text" value="Input 2" name="txtInput2" /><br />

Dependendo em qual dos dois links você clicou, uma tag itálico ou uma negrito será inserida antes ou depois de cada elemento input na página usando a classe “test1”. Assim como append() e prepend(), ambos after() e before() permitem você usar strings HTML, elementos DOM e objetos jQuery como parâmetros e uma quantidade infinita deles também. Nós vamos demonstrar isso no próximo exemplo:

<a href="javascript:void(0);" onclick="InsertElements();">Insert elements</a>
<br /><br />
<span id="spnTest2">Hello world? </span>
<script type="text/javascript">
function InsertElements()
{
        var element1 = $("<b></b>").text("Hello ");
        var element2 = "<i>there </i>";
        var element3 = document.createElement("u");
        element3.innerHTML = "jQuery!";   
        $("#spnTest2").after(element1, element2, element3);
}
</script>

Neste exemplo, nós criamos um objeto jQuery, uma string HTML e um elemento JavaScript DOM, e então nós usamos o método after() para inserir todos eles depois da nossa tag span. Claro, o método before() poderia ter sido usado exatamente da mesma maneira.

Existem variações dos métodos before() e after(), chamados insertBefore() e inserAfter(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então ao invés de os chamarem nos elementos que devemos inserir dados antes ou depois, com um parâmetro do que é para ser inserido, você faz exatamente o oposto. Qual método usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="InsertElementsBefore();">Insert elemenets</a>
<br /><br />
<span id="spnTest3">Hello world? </span>
<script type="text/javascript">
function InsertElementsBefore()
{       
        $("#spnTest3").before($("<i></i>").text("before() "));
        $("<b></b>").text("insertBefore() ").insertBefore("#spnTest3");
}
</script>

Neste exemplo, nós inserimos os itens antes da tag span, mas você poderia com certeza fazer exatamente a mesma coisa usando after() e insertAfter(), se você deseja inserir depois do elemento alvo. Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazermos difere.

Fonte: jquery-tutorial.net

jQuery – Os métodos append() e prepend()

Adicionar novos objetos a um element existente é muito fácil com jQuery. Aqui estão métodos para anexar ou prefixar, recebendo HTML em formato string, elementos DOM e ojbetos jQuery como parâmetros. No próximo exemplo, você verá como é fácil inserir novos elementos em uma lista, usando ambos os métodos append() e prepend():

<a href="javascript:void(0);" onclick="$('#olTestList1').append('<li>Appended item</li>');">Append</a>   
<a href="javascript:void(0);" onclick="$('#olTestList1').prepend('<li>Prepended item</li>');">Prepend</a>
<ol id="olTestList1">
        <li>Existing item</li>
        <li>Existing item</li>
</ol>

Nós temos dois links: O primeiro irá anexar um item a lista, significando que o novo item será inserido como último item. O outro link irá prefixar um link a lista, o que significa que o novo item será inserido como o primeiro item da lista. Neste exemplo, nós simplesmente inserimos um pedaço de HTML, mas nós poderíamos  ter gerado os novos itens com jQuery também, ou criado eles através do código JavaScript padrão e elementos DOM. De fato, ambos os métodos append() e prepend() recebem uma quantidade infinita de novos elementos como parâmetros. No próximo exemplo, nós vamos demonstrar isso também como a habilidade para adicionar elementos de várias formas:

<a href="javascript:void(0);" onclick="AppendItemsToList();">Append items</a>   
<ol id="olTestList2"></ol>
<script type="text/javascript">
function AppendItemsToList()
{
        var item1 = $("<li></li>").text("Item 1");
        var item2 = "<li>Item 2</li>";
        var item3 = document.createElement("li");
        item3.innerHTML = "Item 3";
        
        $("#olTestList2").append(item1, item2, item3);
}
</script>

Como você pode ver, o item1 é um elemento gerado por jQuery, o item2 é uma simples string HTML e o item3 é um elemento gerado por JavaScript DOM.Todos eles foram anexado a lista usando a mesma chamada e claro isso deveria funcionar para o método prepend() também.

Existem variações dos métodos append() e prepend(), chamados appendTo() e prependTo(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então em invés de os chamarem nos elementos que você deseja anexar/prefixar, com um parâmetro do que é para ser anexado/prefixado, você faz exatamente o oposto. Qual usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="PrependItemsToList();">Prepend items</a>   
<ol id="olTestList3"></ol>
<script type="text/javascript">
function PrependItemsToList()
{       
        $("#olTestList3").prepend($("<li></li>").text("prepend() item"));
        $("<li></li>").text("prependTo() item").prependTo("#olTestList3");
}
</script>

Neste exemplo, nós prefixamos os itens, mas você poderia com certeza fazer a mesma coisa usando append() e appendTo(). Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazemos difere.

Fonte: jquery-tutorial.net

jQuery – Pegando e atribuindo classes CSS

Assim como é fácil manipular o conteúdo e atributos dos elementos, como nós vimos no capítulo anterior, é igualmente fácil manipular o CSS dos elementos. O jQuery lhe dá acesso fácil para mudança tanto do atributo de estilo, que você manipula usando o método css(), como a(s) classe(s) de um elemento, onde vários métodos diferentes permitem você modificar isso.

Vamos começar olhando a mudança do atributo class (classe). O atributo class recebe um ou vários nomes de classes, que pode ou não referenciar a uma classe CSS definida no seu stylesheet. Geralmente faz, mas você pode de tempos em tempos adicionar nomes de classes aos seus elementos simplesmente para estar apto para alcançar eles facilmente pelo jQuery, já que o jQuery tem um excelente suporte para seleção de elementos baseado nos  nomes da classe.

Eu defini alguns seletores CSS bem simples no meu stylesheet, principalmente para propósitos de teste:

.bold {
        font-weight: bold;
}
.blue {
        color: blue;
}

No seguinte exemplo nós vamos usar três dos métodos mais interessantes relacionados à classe: hasClass(), que checa se um ou vários elementos já tem uma classe específica definida, addClass(), que simplesmente adiciona um nome de classe a um ou vários elementos e o método removeClass(), que  irá… bem, você provavelmente já adivinhou isso.

<a href="javascript:void(0);" onclick="ToggleClass(this);">Toggle class</a>
<script type="text/javascript">
function ToggleClass(sender)
{
        if($(sender).hasClass("bold"))
                $(sender).removeClass("bold");
        else
                $(sender).addClass("bold");
}
</script>

O exemplo é na realidade muito simples. Quando o link é clicado, nós enviamos o próprio link (this) como um parâmetro ao método ToggleClass() que nós temos definido. Nele, nós checamos se o remetente já tem a classe “bold” – se ele tiver nós o removemos, caso contrário nós o adicionamos. Isso é uma coisa muito comum de se fazer, então obviamente o pessoal do jQuery não quer  que nós escrevemos todas essas três linhas de código para isso. É por isso que eles implementaram o método toggleClass(), com o qual nós podemos transformar todo nosso exemplo avima dentro de uma única linha de código:

<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Com certeza, nós podemos selecionar multiplos elementos, onde nós podemos adicionar ou remover múltiplas classes, também. Aqui está um exemplo disso:

<div id="divTestArea1">
        <span>Test 1</span><br />
        <div>Test 2</div>
        <b>Test 3</b><br />
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1 span, #divTestArea1 b").addClass("blue");
        $("#divTestArea1 div").addClass("bold blue");
});
</script>

Primeiro nós selecionamos as tags span e a b, a qual nós adicionamos uma única classe para: classe blue. Então nós selecionamos a tags div, que nós adicionamos duas classes, separadas por espaço: classe bold e a blue. O método removeClass() funciona apenas do mesmo jeito, permitindo você especificar várias classes para serem removidas, separadas por espaços.

Fonte: jquery-tutorial.net

jQuery – Pegando e atribuindo atributos [attr()]

No capítulo anterior, nós vimos como foi fácil pegar e atribuir conteúdo texto e HTML de/para um elemento. Felizmente, modificar um ou mais atributos de um elemento é igualmente fácil. Nós usamos o método attr() para isso, que na forma mais simples recebe um parâmetro: O nome do atributo que nós desejamos pegar:

<a href="http://www.google.com" id="aGoogle1">Google Link</a>
<script type="text/javascript">
$(function()
{
        alert($("#aGoogle1").attr("href"));
});
</script>

Neste exemplo, nós pegamos o valor do atributo “href” do nosso link e então mostramos ele ao usuário. Para mudar um atributo, nós simplesmente especificamos um parâmetro extra:

<a href="http://www.google.com" id="aGoogle2">Google Link</a>
<script type="text/javascript">
$(function()
{
        $("#aGoogle2").attr("href", "http://www.google.co.uk");
});
</script>

Isso irá mudar o link para apontar para versão britânica do Google. O método att() pode também receber um mapa de pares nome/valor, para atribuir múltiplos atributos ao mesmo tempo. Aqui nós atribuímos ambos atributos href e title simultâneamente:

<a href="http://www.google.com" id="aGoogle3">Google Link</a>
<script type="text/javascript">
$(function()
{
        $("#aGoogle3").attr(
        { 
                "href" : "http://www.google.co.uk", 
                "title" : "Google.co.uk"
        });
});
</script>

O método attr() também suporta a sobrecarga especial onde o parâmetro  de valor é em vez disso uma função de callback, permitindo você acessar o índice do element selecionado assim como o valor do atributo existente. Aqui está um exemplo disso:

<a href="http://www.google.com/">Google.com</a><br />
<a href="http://www.google.co.uk/">Google UK</a><br />
<a href="http://www.google.de/">Google DE</a><br />
<script type="text/javascript">
$(function()
{
        $("a.google").attr("href", function(index, oldValue)
        {
                return oldValue + "imghp?tab=wi";
        });
});
</script>

Nós simplesmente mudamos todos os links do Google para apontar para a busca de imagem ao invés da página padrão, adicionando um parâmetro extra ao atributo href. Nesse exemplo nós não usamos realmente o parâmetro índice, mas nós poderíamos se nós precisássemos, para nos dizer qual índice na lista de elementos selecionados nós estamos atualmente lidando.

Fonte: jquery-tutorial.net