Artigos HTML e CSS JQuery - introdução e primeiros passos

jQuery é uma excelente e leve biblioteca para desenvolvimento rápido de javascripts que interagem com sua página html, com ela podemos atribuir eventos, definir efeitos, alterar ou criar elementos na página, dentre diversas outras infinidades de ações.

Existem ainda vários plugins já feitos em jQuery que nos auxiliam em validações ou máscaras de formulário. Maravilha, não acham?

Como usar o jQuery?

Antes de tudo devemos baixar a versão da biblioteca, que pode ser uma compilada (mais leve) ou o fonte puro (um pouco maior).

Download

Após baixarmos o jQuery, teremos que incluir a sua referência no cabeçalho da página html: 


<script type="text/javascript" language
="javascript" src="javascript/jquery.js"></script>

Lembre-se que o caminho do arquivo e o nome do .js deve ser o mesmo que você utilizou quando salvou após ter baixado a biblioteca. Um outro ponto importante é conhecermos um pouco sobre o DOM (Modelo de Objetos de Documentos), veja mais.

Nosso primeiro comando com jQuery

Bom, são inúmeros comandos que podem ser feitos utilizando o jQuery, recomendo a todos uma lida na documentação (em inglês apenas). Lá vocês podem encontrar comandos separados por categoria e ajudam a você identificar o uso no seu caso.

Documentação

Vou mostrar como exibir um "Olá mundo" quando se clica em um botão. Mas lembre-se que o aconselhável é sempre tratarmos os elementos de nossa página com seus IDs, que devem ser únicos.


<button id="botao">Clique aqui</button>
E nosso código jQuery:  

<script type="text/javascript">

$(document).ready(function(){

$("#botao").click(function() {

alert('Olá mundo');

});

});
</script>

E nosso código jQuery:


<script type="text/javascript">

$(document).ready(function(){

$("#botao").click(function() {

alert('Olá mundo');

});

});
</script>
  • $(): Utilizado em todas as funções que devem ser referenciadas a jQuery.
  • ready(): Associado a leitura do documento enquanto está sendo carregado.
  • function{}: Dentro das chaves {}, colocar os comandos javascript ou jQuery que serão interpretados pelo browser (isso mesmo o browser é um interpretador de comandos).

A primeira linha temos o evento ready que age sobre o documento html $(document).ready(), ele será responsável por atribuir os eventos das funções que definimos apenas quando o DOM estiver preparado pelo navegador.

Na segunda linha de comando estamos definindo um evento ao clicar no botão com ID #botao, mostrando uma caixa de alerta.

Este é apenas uma pequena fração do que é possível se fazer com jQuery, mas já temos uma noção do que serve e como usar.

Links Úteis

  • C#: Trabalhando com arrays:
    Os arrays representam uma das coleções mais utilizadas em qualquer linguagem de programação e no C# não é diferente.
  • JPA: Como usar a anotação @GeneratedValue:
    Nesta documentação você aprenderá a utilizar a anotação @GeneratedValue, a qual deve ser declarada quando a geração do valor da chave-primária é de responsabilidade do banco de dados.
  • O que é Vue.js?:
    Neste curso aprenderemos o que é o Vue.js, um dos frameworks JavaScript que mais vem crescendo nos últimos anos.

Saiba mais sobre jQuery ;)

  • O que é jQuery?:
    Neste curso conheceremos a jQuery, biblioteca JavaScript que facilita e agiliza a construção de scripts para o client-side possibilitando uma melhor usabilidade ao usuário.
  • Validação de formulários com jQuery:
    A validação é um processo fundamental para garantir a integridade dos dados submetidos na aplicação.
  • Guias de referência jQuery:
    Nesse guia de jQuery serão apresentados diversos artigos e vídeos com os tópicos mais importantes sobre essa biblioteca.