loader
Aula 1 – Conhecendo o JQuery

Aula 1 – Conhecendo o JQuery 27 de outubro de 2015

Trocava toda minha tecnologia por uma tarde com Sócrates.~Steve JobsTweet

Importante!
Esta obra é parte de um de nossos cursos, é muito relevante que entenda o objetivo dos nossos posts no link como ser um profissional de sucesso.

Resumo

JQuery é uma biblioteca JavaScript(não é um framework), capaz de adicionar interatividade e dinamismo às suas páginas de forma mais simples, ela engloba muitas funções na qual o objetivo principal é “Write less, do more”, ou seja, escreva menos e faça mais.

Algumas vantagens

  • Suporte total ao CSS3
  • Muitos plug-ins e extensões;
  • Extensibilidade, ou seja, permite a adição de novas funcionalidades;
  • Integração com o Ajax
  • Comunidade crescente
  • Usa algumas, senão todas, as sintaxes já utilizadas no CSS.

Algumas desvantagens

  • Novas versões não são compatíveis com browsers antigos
  • O uso excessivo de plugins pode pesar a página

Instalando o jQuery

O jQuery é um arquivo Javascript (.js) que deve ser linkado à página web;

Exemplo de instalação do JQuery:

Este arquivo pode ser baixado no site oficial http://jquery.com em dois formatos: Minified(Reduzido para pesar menos na página) e Uncompressed(Formatado para debug e uma melhor leitura das funcionalidades), o formato Minified é o mais utilizado quando se coloca o site em produção.

Exemplo

  Clique aqui e veja o exemplo funcionado.

Explicando o código
Sintaxe básica:

O símbolo $ nada mais é do que um alias, ou apelido, no código acima, quando é escrito:

$(‘button’) – busca na página por algum elemento que seja button, ou seja, todos elementos que fossem do tipo button seriam afetados, como no nosso caso só há um, então só ele foi afetado.

$(‘#principal’) – assim como no CSS, buscas iniciadas com ‘#’ indica que será selecionado pelo id, nesse caso, nossa div é afetada.

.css(‘background ‘,’red’) – Muda a propriedade do elemento que encontrou.

Em resumo, o comando dentro do script atribui o evento click a todos os botões contidos na página, e ao mesmo tempo já defini o que será executado após o clique. Nesse caso, ele procura no html qual elemento possui o id de nome ‘principal’ e modifica a propriedade CSS background dele para vermelho (‘red’). No final só faz uma brincadeira de desaparecer e aparecer a div, pra demonstrar o uso de uma pequena animação.

Conclusão

A variedade de coisas que dá para se fazer com jQuery é muito empolgante, ele é sem dúvidas uma das bases de muitos sites e sistemas da web atual. Que tal você começar a testar o poder que ele pode dar em suas mãos? Clique aqui e veja o poder fluindo!

Ponha seus conhecimentos em prática já!

Queremos te ouvir

Sinta-se livre para questionar e participar dessa jornada. Deixe seu comentário, opinião ou crítica.

Essa interação fará com que melhoremos a cada post a sua experiência, fornecendo assim conteúdos com cada vez mais qualidade.

 

Abraços.

Isaque Cruz

Isaque Cruz

Graduado em Análise de Sistemas, com amplo conhecimento em programação e sistemas web. Experiência de mais de 12 anos na área de tecnologia da informação, especialmente em desenvolvimento JAVA, soluções WEB e Delphi.

0

Deixe uma resposta

® 2015 Icruz Comunicação e Tecnologia. Todos os direitos reservados.