o jQuery possui uma coleção de "utilitários" para facilitar algumas operações que para ser feito com javascript leva as vezes algumas linha de código, irei apresentar algumas dessas utilidades aqui.

jQuery.browser

Podemos obter informações do browser através do $.browser

Exemplo:

Javascript:

Alem disso, também possui uma série de comandos para operações de string que não existem no javascript, como por exemplo o trim.

Javascript:

Funções de Array

Vamos imaginar que temos essas duas coleções:

Javascript:

$.each(container, callback)

Podemos iterar sobre essas coleções com o $.each

Exemplo:

Javascript:

$.inArray(chave,array)

Retorna a posição do elemento no array.

Javascript:

$.merge(array1,array2)

Javascript:

Caso deseje unir os vetores porém filtrando os duplicados, utilize o $.unique.

$.unique(array)

Javascript:

$.extend(alvo,fonte1,fonte2,fonteN)

var alvo = { nome: "Tom Brady", idade: "25" };

var fonte = { time: "Patriots" };

Javascript:

Empolgado com a ultima lição de jQuery, vi uma técnica chamada spriteNav e resolvi fazer uma implementação usando jQuery, depois vou ver se faço um plugin para facilitar o uso.

Leia mais »

Nós vimos nas lições anteriores como se seleciona um objeto, altera seu posicionamento e seus atributos, hoje iremos ver como se faz para adicionar eventos aos elementos. Cada browser trata o evento de uma forma e nisso que o jQuery nos facilita, ele proporciona uma api cross-browser para tratamento de eventos.

Leia mais »

Além das diversas funcionalidades que o jQuery nos proporciona ele conta com vários plugins, acredito que seja por isso que ele se tornou tão interessante como é hoje.

Um desses plugins é o InnerFade, que é capaz de criar transições de elementos css, podemos arrumar diversas utilidades pra isso, irei mostrar como criar um banner de transição de imagens.

Leia mais »

O uso de formulários é a forma mais comum de interação e troca de dados entre usuário-página, porém o formulário sempre obedece certos padrões e tipo de dados e quando isso não é tratado de forma eficiente podemos ter inconsistência na nossa base de dados e erros nos aplicativos.

Leia mais »

Recapitulando...

Na lição 1 aprendemos sobre o operador $ e coleções de elementos da página, na lição 2 nós vimos como podiamos iterar sobre os elementos e alterar seus atributos.

Hoje iremos ver como alterar o conteudo de um elemento.

Leia mais »

Como vimos na Lição 1, o jQuery através do operador $ retorna uma coleção de elementos, assim como nas linguagens OO, podemos iterar sobre essa coleção.

Leia mais »

Vamos começar com uma tabela simples.

HTML:

Ela vai ter essa aparencia:

Vamos melhorar um pouco o visual colocando uma imagem gradiente no titulo.

CSS:

Não podemos esquecer de adicionar o class="linhaTitulo" na linha da tabela. O visual ficou um pouco melhor, uma outra idéia interessante é colocar para mudar a cor da linha quando o mouse tiver em cima, obtendo o visual abaixo.

Iremos obter esse efeito com a ajuda do JQuery e CSS. Para adicionar o JQuery:

HTML:

E depois fazemos o javascript responsável pelo onmouseover

Javascript:

E tambem é necessário adicionar a classe css com as novas cores quando se passa o mouse.

CSS:

Código Final:

HTML:

Página de teste: clique aqui