Achei interessante criar uma resumo em português com estas 10 dicas. A maioria delas eu passei a utilizar em meus projetos!

1. Use sempre o $(document).ready()

Coloque todo seu código dentro desta função. Isto irá fazer com que seu código jQuery seja executado assim que o DOM for carregado mas antes do conteúdo (veja a dica 2). Isto permite que você atribua funções aos eventos dos elementos. Evitando o uso de onload, onclick entre outros. Ou seja, você não irá interferir na marcação HTML com o javascript.

2. Use o $(window).load ()

Embora a maioria dos exemplos sejam colocados dentro de $(document).ready() é melhor evitar colocar tudo dentro dele.

$(document).ready() é muito útil. Mas ele ocorre durante a renderização do documento. Funcionalidades supérfluas como scrolling e drag and drop, etc podem ser colocadas dentro de $(window).load() que é executada após o download completo da página.

A sintaxe é a mesma do $(document).ready()

3. Carregue somente o que precisa

Nós programadores somos tentados a escrever todo o código javascript em um mesmo local e usá-lo em todas as páginas, seja em forma de arquivo, ou repetindo o código no velho Ctrl C + Ctrl V. O jQuery leva tempo para vasculhar todo o documento em busca dos elementos. Isto pode causar uma queda no rendimento da aplicação.

1
2
3
4
5
6
7
8

$(document).ready (function () {
   if ('body').hasClass ('home') {
      // Código usado na home
   }
   else if ('body').hasClass ('blog') {
      // Código usado no blog
   }
});

4. Saiba o que é o método data() e use-o

Para guardar e utilizar alguns dados você pode utilizar o método data da jQuery.

1
2
3
4

   // Define o valor
   $('.myselector').data ('myfavcolor', 'orange');
   // E então. Retorna o valor
   $('myselector').data ('myfavcolor');

Eu escrevi um artigo sobre o método data que você pode ver clicando aqui

5. Seletores internos da jQuery

Conhecer os seletores CSS ajuda muito na hora de escrever código jQuery. Mas os seletores internos também ajudam bastante. Veja os seletores aqui http://docs.jquery.com/Selectors.
Por exemplo

1

   $("div:contains('hello')").css ('background-color', '#cc0000');

O código acima deixa vermelha a cor de background de todos os elementos div que contenham a palavra “hello”. Você também pode usar

1

   $('input:password')

para selecionar todos os campos do tipo password

6. Crie flags com classes

Você pode usar “flags” para monitorar o que o usuário está fazendo, ou então para verificar quando determinada ação foi feita ou não. A função addClass serve para adicionar uma classe em um elemento. Desta forma você pode verificar posteriormente a existência da classe com a função hasClass

7. Não chame o mesmo seletor várias vezes

Ao invés de fazer isto

1
2
3
4

   $('p.hello').css ('color', '#000000');
   $('p.hello').text ('hello');
   $('p.hello').addClass ('paragraph');
   $('p.hello').fadeTo (1000, 1);

Faça isto

1
2
3
4

   $p.css ('color', '#000000');
   $p.text ('hello');
   $p.addClass ('paragraph');
   $p.fadeTo (1000, 1);

Desta forma se armazena o objeto retornado pelo seletor em uma variável para posterior reuso.

8. Encadeie (quase) tudo

O encadeamento é muito útil. O mesmo código do exemplo anterior por ser escrito assim

1

   $('p.hello').css ('color', '#000000').text ('hello').addClass ('paragraph').fadeTo (1000, 1);

Tenha cuidado ao utilizar o encadeamento pois pode causar certa lentidão.

9. Utilize o toggleClass

Você pode alternar classes de elementos para selecionar seu comportamento. Se sua classe .hidden não mostra nenhum item você pode os tornar visíveis com

1

   $('p.hidden').toggleClass ();

10. Guarde os resultados

Quando estiver lidando com funções, você pode querer guardar alguns resultados para uso posterior. Uma solução possível é guardar os resultados em objetos com escopo global.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

   // use the window object for instance
   window.$results = {
   one : 0,
   two : 0
   };
 
   // this is the function, perhaps ran more than once
   function getResults (first, second)
   {
   $results.one = first;
   $results.two = second;
   }
 
   // run function
   getResults ($('li.blue'), $('a.red));
   $results.one.hasClass ('blue'); // true
   $results.two.hasClass ('blue'); // false
 
   // run again
   getResults ($('li.red'), $('a.blue));
   $results.one.hasClass ('blue'); // false
   $results.two.hasClass ('blue'); // true

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

• Método data() da jQuery
• Função live() da jQuery
• Função closest() da jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Corrigir PNG transparente no IE 6 com jQuery

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