Com ele você pode armazenar informações no formato chave/valor nos elementos do DOM.

Veja a sintaxe:

Define um valor para a chave name
data( name, value)

Retorna o valor da chave name
data( name)

Exemplo:

Digamos que eu queira controlar a exibição de um elemento. Neste caso um div com uma mensagem.

Veja o seguinte código:

$(document).ready(function(){
	$("div#message").data("visible", true);
	$("#link").click(function(){
		if ($("div#message").data("visible")) {
			$("div#message").fadeOut();
		} else {
			$("div#message").fadeIn();
		}
		$("div#message").data("visible", !$("div#message").data("visible"));
		return false;
	});
});

Veja um exemplo aqui

É claro que existem maneiras mais elegantes de verificar se um elemento está visível ou não. Você pode usar a função is() em conjunto com o seletor :visible por exemplo. Mas este não é o foco deste post e este exemplo serve somente para mostrar o funcionamento do método data().

Já que chegou até aqui, que tal ler isto?

• Função live() da jQuery
• Função closest() da jQuery
• 10 dicas para escrever um bom código jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Estilizando links com seletores CSS

$("td a").click(function(){
	$(this).closest("tr").children("td").toggleClass("highlight");
	return false;
});

Este código vai executar a função passada como parâmetro ao se clicar nos links que estiverem dentro de colunas (veja um exemplo da função closest(), usada no exemplo, clicando aqui).

É bom lembrar que o comando return false é usado para que não seja executado o evento padrão do browser que é o direcionamento para o arquivo que esteja no atributo href do link.

Eventos e Manipulação do DOM

Até aqui tudo tranquilo. Mas se sua aplicação manipula o DOM, criando ou excluindo elementos do documento, a manipulação de eventos pode dar trabalho.

Neste exemplo clique no link para criar uma nova linha na tabela e depois clique no link Comprar da nova linha. O evento não irá funcionar. Segue o código:

$(document).ready(function(){
	$("td a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		return false;
	});
});

O código que citei acima, criará o evento click nos elementos que estiverem no DOM no momento do carregamento da página. E não irá funcionar para elementos criados de forma dinâmica por sua aplicação.

Até a versão 1.2 da jQuery, tínhamos que usar alternativas para contornar o problema. Eu uso/usava o seguinte código:

$(document).ready(function(){
	$("td a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		$("td a").unbind("click").bind("click",function(){
			$(this).closest("tr").children("td").toggleClass("highlight");
			return false;
		});
		return false;
	});
});

Veja o exemplo

Este código exclui o evento click, através da função unbind, e recria o evento através da função bind. Desta forma evitamos a duplicação do evento para os elementos que já estavam presentes no DOM e recriamos para todos os elementos novamente. Este código gera um processamento desnecessário e possivelmente queda na performance da aplicação.

A função live(type, fn)

Adicionada na versão 1.3 da jQuery, a função live permite que o evento vinculado aos elementos esteja disponível também para os elementos criados no futuro.

A função aceita os seguintes eventos: click, dblclick,  mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress e keyup.

Já os eventos blur, focus, mouseenter, mouseleave, change e submit não são suportados. Para mais informações consulte a documentação da função http://docs.jquery.com/Events/live#typefn.

Seu uso é simples, veja o código:

$(document).ready(function(){
	$("td a").live("click", function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		return false;
	});
});

Agora veja o exemplo em funcionamento.

Já que chegou até aqui, que tal ler isto?

• Método data() da jQuery
• Função closest() da jQuery
• 10 dicas para escrever um bom código jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Estilizando links com seletores CSS

jQuery

Digamos que ao clicar em um link em determinada linha de uma tabela você queira alterar a cor de fundo de toda a linha.

Segue o código:

$(document).ready(function(){
	$("a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
});

Na linha 2 atribuímos uma função ao evento click dos elementos a (links).

Na linha 3 usamos a função closest() com o seletor tr. Ou seja, buscamos o elemento tr mais próximo ao link que foi clicado que é retornado através do objeto this.

Na mesma linha 3 usamos a função toggleClass para atribuir à linha a class highlight. A função toggleClass alterna o atributo class de modo que caso o elemento tenha a classe, a mesma é retirada. E vice-versa.

Reparem que fizemos as chamadas as funções closest() e toggleClass() de forma encadeada. Ou seja, em sequencia.
Caso tenham dúvidas sobre o encadeamento de funções ou sobre a função toggleClass, podem perguntar através dos comentários.

Na linha 4 usamos return false para que o evento do clique no link seja cancelado no browser.

Simples assim! Clique aqui para ver o exemplo em funcionamento.

Já que chegou até aqui, que tal ler isto?

• Método data() da jQuery
• Função live() da jQuery
• 10 dicas para escrever um bom código jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Gerar download de conteúdo no PHP

CSS

Seletores de atributos e operadores

Os seletores de atributos são escritos entre colchetes “[]“.
Exemplo: a[href='manual.pdf']

Este exemplo é interessante mas não tão útil, pois neste caso o estilo só será aplicado ao link com o atributo href=’manual.pdf’.

Para tornar o uso mais interessante vamos utilizar $ que é um operador que significa “termina com”.
Desta forma podemos criar um seletor para estilizar todos os links para arquivos PDF.
Exemplo: a[href$='.pdf']

Você também pode utilizar o operador ^, que significa “começa com” e o operador * que busca a ocorrência do valor em qualquer parte do atributo.
Complicou? Veja os exemplos:

Busca todos os links que iniciam com ‘http:’
a[href^='http:']
Busca todos os links que iniciam com ‘mailto:’
a[href^='mailto:']

Busca todos os links que contenham a palavra ‘css’
a[href*='css']

Para finalizar veja este exemplo de estilização de links para documentos PDF, MDB e XLS

a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(doc_pdf.png) center left no-repeat;
}
a[href$='.mdb'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(doc_access.png) center left no-repeat;
}
a[href$='.xls'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(doc_excel_table.png) center left no-repeat;
}

Clique aqui para ver o exemplo em funcionamento

Vale lembrar que estes seletores fazem parte do CSS 3. Embora o CSS 3 ainda não esteja totalmente incorporado aos navegadores
os exemplos colocados aqui funcionaram nos browsers mais recentes (IE7, IE8, Firefox3, Chrome e Safari 4).
Em browsers antigos, como o IE6 por exemplo, o ícone simplesmente não aparece o que não causa um prejuízo muito grande a navegação.

Artigo baseado no original http://rafeekphp.wordpress.com/2009/06/11/auto-matic-link-icons/

Referência de seletores CSS 2.1
http://maujor.com/tutorial/seletores_css21_parte1.php

Referência de seletores CSS 3
http://www.w3.org/TR/css3-selectors/

Já que chegou até aqui, que tal ler isto?

• Método data() da jQuery
• Função live() da jQuery
• Função closest() da jQuery