dê seu feedback
post favorito
JQuery - introdução e primeiros passos
jQuery: O que é e como usar?
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?
E 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).
Leve - http://code.google.com/p/jqueryjs/downloads/ detail?name=jquery-1.2.2.pack.js
Não comprimida - http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.2.js
Após baixarmos o jQuery, teremos que incluir a sua referência no cabeçalho da página html:
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 em http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos
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 - http://docs.jquery.com
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.
E nosso código jQuery:
$() : utilizado em todas as funções que devem ser referenciadas a jQuery
document : expressão que indica o documento HTML
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.
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?
E 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).
Leve - http://code.google.com/p/jqueryjs/downloads/ detail?name=jquery-1.2.2.pack.js
Não comprimida - http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.2.js
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>
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 - http://docs.jquery.com
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>
<script type="text/javascript">
$(document).ready(function(){
$("#botao").click(function() {
alert('Olá mundo');
});
});
</script>
document : expressão que indica o documento HTML
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.
Você está em:
canal web Developer
Publicidade
0
0
