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

Basicamente, esta técnica consiste em dar aos usuários o acesso básico ao conteúdo. Com ênfase na acessibilidade.

A técnica ajax hoje é largamente utilizada. Por proporcionar uma ótima experiência de uso e aumentar a velocidade de páginas e aplicações web.

Mas ajax utiliza javascript, mais precisamente o XMLHttpRequest para acessar conteúdo de forma assíncrona. Com ajax você pode, por exemplo, criar um formulário de cadastro que não dá refresh na página no ato do submit. Ótimo né? Também acho!

Mas e se o usuário estiver navegando com o javascript desabilitado? Ele não vai poder se cadastrar no seu site?

Para os programadores PHP, existe uma técnica para que definir se a requisição foi feita via ajax ou não. Desta forma, você pode dar aos usuários que estão utilizando javascript toda experiência de uso proporcionada pelo ajax. Sem deixar de lado os usuários que não contam com esta possibilidade.

Basta utilizar a variável HTTP chamada HTTP_X_REQUESTED_WITH.

Exemplo:

1
2
3
4
5
6

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    ... É uma requisição AJAX ...
}
else {
    ... Não é uma requisição AJAX ...
}

Este artigo foi baseado no original, em inglês, http://www.electrictoolbox.com/how-to-tell-ajax-request-php/

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

• 10 dicas para escrever um bom código jQuery
• Método data() da jQuery
• Função live() da jQuery
• Função closest() da jQuery
• Gerar download de conteúdo no PHP

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

Já tentou inserir arquivos de imagens .png com transparência em seu projeto e visualizá-lo no IE6? Pois é.

Existem muitas formas de se corrigir o problema. Vou apresentar a que mais uso, que é através do plugin do jQuery chamando pngFix .

Veja os exemplos (em inglês), e faça o download do plugin no site – http://jquery.andreaseberhard.de/pngFix/

Para usá-lo é super simples:

Insira os arquivos javascript do jQuery e o arquivo do plugin. Certifique-se que os nomes dos arquivos estão iguais aos que você salvou em seu computador/servidor.

1
2

<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="jquery.pngFix.js" type="text/javascript"></script>

Agora o código que faz todo o serviço:

1
2
3
4
5

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script>

Pronto! Só isso. Qualquer dúvida só deixar um comentário.

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

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