Este documento explica o que é jQuery, como instalá-lo e usar suas funcionalidades para manipular elementos HTML e validar formulários. Explica que jQuery é uma biblioteca JavaScript que facilita a interação com páginas web, permite criar e modificar elementos HTML e aplicar efeitos. Demonstra como adicionar o código jQuery, identificar elementos por ID ou classe, e usar suas funções para esconder/mostrar elementos e validar campos obrigatórios em formulários.

1. http://www.multside.com.br
JQUERY
INSTALAÇÃO & VALIDAÇÃO DE FORMULÁRIOS

2. http://www.multside.com.br
O QUE É
Primeiramente vamos saber o que é o Jquery.
Jquery é uma biblioteca javascript que possui vários scripts predefinidos que
servem para interagir com sua página HTML.
Com essa biblioteca você pode criar elementos na página, definir alguns efeitos
entre outras coisas.
INSTALAÇÃO
A instalação dessa biblioteca é bem simples:
Vá ao site http://jquery.com/ e faça o download da versão mais atualizada da
Biblioteca Jquery.
Insira sua referência no cabeçalho de todas as páginas que você for usá-lo da
seguinte maneira:
<script type="text/javascript" language="javascript" src="jquery.js"></script>
ID’S
O Jquery trabalha não com o nome dos objetos, e sim com o seu ID ou CLASS,
por esse motivo, sempre que for manipular um objeto com Jquery coloque um nome
para seu “id” ou para “class”.
Vejamos um exemplo:
<div id=“div1” style=“display:none;”>
Oi
</div>
Nesse exemplo, essa div recebeu o id “div1”, e no seu style colocamos para ela
ficar invisível.
Se na página onde essa div estiver conter a referência do Jquery no cabeçalho
(Tópico Instalação), podemos manipular esse objeto usando a biblioteca com um
efeito bem simples:

3. http://www.multside.com.br
Colocamos um link falso no HTML da página:
<a href=“javascript:void(0)” id=“link”>Abrir</a>
<div id=“div1” style=“display:none;”>
Oi
</div>
E inserimos no final da página um código simples:
<script>
$(“#link”).click
(
function()
{
$(“#div1”).hide().show(“slow”);
}
);
</script>
Pronto, ao clicar no link você verá um efeito e abrirá a div com a mensagem “Oi”.
VALIDAÇÃO DE FORMULÁRIOS
Vamos ao que mais nos interessa. Como validar um formulário com Jquery, mas
antes vou fazer uma última explicação.
Sempre que for trabalhar com Jquery nos objetos deve-se utilizar $(“”) o que
muda é dentro das aspas, pois se você for utilizar ID deve-se utilizar “#id_do_objeto” e
se for usar “class” deve-se utilizar “.class_do_objeto”.
Agora vejamos um exemplo de formulário a ser validado.
<form id=”form1” method=”POST”>
<p>Nome:</p>
<input type=”Text” id=”nome” class=”campos”>
<p>E-mail:</p>
<input type=”Text” id=”email” class=”campos”>
<p>Comentário:</p>
<textarea id=”msg” class=”campos” rows=”3” cols=”20”></textarea>
<BR><input type=”submit” value=”Enviar”>
</form>
Nesse formulário, temos os campos nome, e-mail e comentário.

4. http://www.multside.com.br
Caso você não queria que nenhum deles fique em branco antes de ser postado,
faça o seguinte:
Adicione no final do HTML da página o segunte código:
<script>
$(“form1”).submit
(
function()
{
if($(“.campos”).val() == „‟)
{
alert(“Todos os campos devem ser preenchidos.”);
return false;
}
else
{
$.post
(
“pagina_de_acao_do_formularios.php”,
{
nome: $(“#nome”).val(),
email: $(“#email”).val(),
msg: $(“#msg”).val(),
},
function(response)
{
//crie uma div com id=”reposta” na página do formulário
$(“#resposta”).html(response);
//com isso, a resposta que ele receber na página de acao do seu
formulário ele ira jogar na div resposta, com isso você pode mandar mensagens
de erro ou sucesso.
},
“text”
);
}
}
return false;
);
</script>
Esse foi um exemplo simples de validação, no qual ao invés de você definir a
ação da página direto no form usando “action=‘pagina_de_acao_do_formulario.php’”,
você define ela com Jquery e os dados só serão enviados caso os campos estiverem
devidamente preenchidos.

5. http://www.multside.com.br
CRIAÇÃO
Essa apostila foi criada pela empresa Multside – Sistemas & Soluções, para nos
conhecer melhor, acesse o site: http://www.multside.com.br.
Espero que aproveitem o aprendizado.
Obrigado!