Olá pessoal,
Hoje vou falar um pouco sobre jQuery.
A jQuery é uma biblioteca de JavaScript que trabalha com Ajax e DOM (modelo de objeto de documento). O legal dessa lib é que você consegue resultados muito mais rápidos e legais, escrevendo muito menos que no tradicional JavaScript.
Para poder utilizar jQuery em seus sites, você precisa primeiramente baixa-la: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
Em seguida, faça a linkagem da biblioteca na sua página, colocando a seguinte linha dentro das tags <head></head>.
Com a biblioteca carregada, já podemos começar a programar usando jQuery. Abaixo, deixo um pequeno exemplo de validação de uma caixa de texto do tipo <input type="text" id="texto" />. Quando o usuário clicar no botão "Click", o JavaScript será ativado e um alerta aparecerá ao usuário informando se a caixa de texto está vazia ou não.
Nota: para a jQuery, o que interessa é o id dos componentes e não o name.
Primeiramente, vamos abrir as tags <script></script> e inserir o seguinte código dentro:
Hoje vou falar um pouco sobre jQuery.
A jQuery é uma biblioteca de JavaScript que trabalha com Ajax e DOM (modelo de objeto de documento). O legal dessa lib é que você consegue resultados muito mais rápidos e legais, escrevendo muito menos que no tradicional JavaScript.
Para poder utilizar jQuery em seus sites, você precisa primeiramente baixa-la: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
Em seguida, faça a linkagem da biblioteca na sua página, colocando a seguinte linha dentro das tags <head></head>.
<script src="CAMINHO/jquery-1.3.2.js" type="text/javascript"> </script>Troque a palavra CAMINHO pelo caminho correto no seu site até a biblioteca.
Com a biblioteca carregada, já podemos começar a programar usando jQuery. Abaixo, deixo um pequeno exemplo de validação de uma caixa de texto do tipo <input type="text" id="texto" />. Quando o usuário clicar no botão "Click", o JavaScript será ativado e um alerta aparecerá ao usuário informando se a caixa de texto está vazia ou não.
Nota: para a jQuery, o que interessa é o id dos componentes e não o name.
<body> <input type="text" id="texto"> <input type="button" id="button" value="Click" /> </body>Com os dois componentes no nosso documento HTML, vamos colocar agora o código jQuery que fará o serviço de validação.
Primeiramente, vamos abrir as tags <script></script> e inserir o seguinte código dentro:
<script>
$(document).ready(function(){
//Quando o documento estiver pronto, execute o que estiver aqui dentro
});
</script>
Feito isso, vamos atribuir o ID da nossa caixa de texto a uma variável (isto é opcional, caso queira, pode referenciar o ID diretamente).//Os IDs em jQuery são representados por $("#nome_do_ID")
var texto = $("#texto");
A seguir, vamos acrescentar a função do botão. Esta função é processada quando ocorre o evento click no botão.$("#button").click(function(){
});
Tudo o que estiver entre as chaves, será executado quando o botão for clicado, então, iremos colocar agora a condição para verificar se a caixa de texto está em branco.//val() retorna o valor. Neste caso, o valor do componente texto
if(texto.val() == "") {
alert("A caixa de texto está vazia.");
} else {
alert("Caixa de texto: " + texto.val());
} E este é o código final do jQuery que criamos nas etapas acima:<script>
$(document).ready(function(){
var texto = $("#texto");
$("#button").click(function(){
//val() retorna o valor. Neste caso, o valor do componente texto
if(texto.val() == "") {
alert("A caixa de texto está vazia.");
} else {
alert("Caixa de texto: " + texto.val());
}
});
});
</script> Até a próxima :-) |
Guilherme Oliveira trabalha com desenvolvimento de software a mais de 10 anos. É técnico em informática, bacharel em ciência da computação, especialista em engenharia de software, além de ser Oracle Certified Java Programmer 6 (OCJP 6). Suas áreas preferidas são desenvolvimento web e games.
|
