Guia de Linguagem

jQuery


Neste guia de consulta você encontrará diversos conteúdos que podem ser usados ao longo dos seus estudos sobre a jQuery. Consulte este guia para aprender mais sobre essa biblioteca.

Introdução

A jQuery é uma biblioteca JavaScript que tem por lema “escrever menos e fazer mais”, ou seja, ela permite fazer com menos linhas de código o que seria bem mais complexo com JavaScript “puro”. Entre seus principais recursos está a manipulação do DOM (Document Object Model), que é simplificado por suas funções e seletores.

Conheça mais sobre o que é a jQuery no curso abaixo:

Como você deve ter visto, a jQuery reduz bastante a quantidade de código necessário para realizar algumas tarefas comuns com JavaScript. Devido a isso e à sua popularidade no mercado alguns desenvolvedores acabam deixando de lado o estudo da linguagem e se concentram apenas na biblioteca. No DevCast abaixo discutimos sobre essa ideia:

Agora que você já sabe para que serve a jQuery e porque deve conhecê-la, assista o curso abaixo e conheça as principais funcionalidades da biblioteca:

Já os artigos a seguir podem ser usados como complemento dos seus estudos:

Em seguida, veja os links abaixo a fim de se aperfeiçoar em aspectos específicos da jQuery:

Ajax

Ajax é uma técnica utilizada para acessar páginas e web services através de JavaScript de forma assíncrona. Normalmente utilizamos Ajax para para carregar conteúdos secundários e/ou para evitar que o usuário precise navegar para outra página/recarregar a página atual.

Aqui na DevMedia usamos Ajax em vários pontos do site. Veja abaixo um exemplo de como fazemos por aqui:

Em seguida, veja os links a seguir e aprenda a usar Ajax com jQuery, pois essa biblioteca simplifica bastante esse tipo de ação:

O Ajax é também uma ferramenta fundamental para implementar a técnica chamada Lazy Load, que consiste de carregar um determinado conteúdo somente quando o usuário precisar visualizá-lo.

Por exemplo, como você verá nos links a seguir, podemos usar Lazy Load para carregar imagens dinamicamente a fim de reduzir o tamanho das páginas web, deixando-as mais leves para serem abertas mais rapidamente.

Validação de formulários

Outra necessidade muito comum em páginas web e que pode ser atendida com facilidade via jQuery é a validação de formulários. Através do plugin jQuery Validate, que você pode conhecer melhor nos links a seguir, podemos aplicar diferentes regras de validação aos campos.

Animações

A biblioteca jQuery conta também com diversas funções para aplicar animações sobre os elementos da página usando efeitos como slide e fade. Nos links a seguir você aprenderá a usar essas funções para implementar essas animações:

Veja também como aplicar alguns efeitos específicos usando jQuery:

jQuery UI

Baseada na jQuery, a biblioteca jQuery UI oferece uma série de componentes visuais muito comuns em aplicações web, como botões, menus, sliders, abas. Conheça mais sobre ela nos artigos a seguir:

Já os artigos abaixo apresentam alguns componentes específicos, para que você aprenda a utilizá-los rapidamente:

jQuery Mobile

Semelhante à jQuery UI, a jQuery Mobile é uma biblioteca de componentes visuais criados especificamente para dispositivos móveis, logo, otimizados para pequenas dimensões e interação por toque na tela. A seguir você encontra alguns conteúdos sobre essa biblioteca:

Praticando

Nada melhor para fixar o conhecimento do que praticar, certo? Nesta seção separamos alguns conteúdos para que você possa aplicar na prática o que aprendeu até aqui. Para começar, veja como criar alguns layouts/estruturas de páginas:

A seguir veja alguns exemplos práticos de como criar menus responsivos com jQuery:

E para complementar seus estudos, confira algumas dicas de como implementar alguns recursos mais específicos:

Conteúdo extra

Aqui separamos mais alguns conteúdos que abordam temas mais pontuais dentro da jQuery, mas que certamente lhe ajudarão a se aperfeiçoar no uso dessa biblioteca:

Mais sobre front-end

Além dos cursos, exemplos e DevCasts contidos nesse guia a DevMedia publica com frequência novos conteúdos sobre front-end, os quais você pode conferir nos Guias de Consulta abaixo:

Além disso, você pode conferir todo o conteúdo de Front-end clicando aqui.

Ficou com alguma dúvida?