http://www.multside.com.br




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

O QUE É
        Primeiramente vamos saber o que é o Jquery.
        Jquery é uma biblioteca ja...
http://www.multside.com.br

       Colocamos um link falso no HTML da página:
       <a href=“javascript:void(0)” id=“link...
http://www.multside.com.br

        Caso você não queria que nenhum deles fique em branco antes de ser postado,
faça o seg...
http://www.multside.com.br

CRIAÇÃO
      Essa apostila foi criada pela empresa Multside – Sistemas & Soluções, para nos
c...
Próximos SlideShares
Carregando em…5
×

Javascript - Biblioteca Jquery

3.049 visualizações

Publicada em

Publicada em: Tecnologia, Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Javascript - Biblioteca Jquery

  1. 1. http://www.multside.com.br JQUERY INSTALAÇÃO & VALIDAÇÃO DE FORMULÁRIOS
  2. 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. 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. 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. 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!

×