php10 PDF

Desenvolvimento Web I
Aula 10 Instrutor: Jos Fernando Santana Andrade fernando.amdrade@gmail.com
2/27
jQuery
Uma biblioteca JavaScript, que facilita muita a programao e muito fcil de aprender
write less, do more.
3/27
Caractersticas
Manipulao

HTML/DOM CSS Mtodos e eventos HTML Efeitos e animaes AJAX
4/27
Instalao
<head> <script src="jquery-1.9.1.min.js"></script> </head>

<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> </head>
Desenvolvimento Web I 5/27
Sintaxe
$( ) funo jQuery, cria um objeto jQuery e avalia a expresso passada como parmetro $('p');
6/27
Seletores
Tipo do rtulo
$(p); retorna todos os pargrafos da pgina $(.foo); retorna todos os elementos com a classe foo $(#bar); retorna o elemento com o ID bar
Nome da classe
Id
Seletores
$(function(){ $("#p1").mouseleave(function(){ alert("Bye! Vc tirou o mouse de p1!"); }); }); $(function(){ $("button").click(function(){ $(":button").fadeOut(); });
Seletores
$("a[target!='_blank']") todos os <a> com atributo target diferente de _blank $("#tab tr:odd") todas as linhas mpares da tabela com ID tab $("p:first") primeiro elemento $("p:contains(meio)"); seleciona elemento que contem um determinado texto
Return/set contedo
.text() retorna/set o texto contido no elemento .html() retorna/set html contido no elemento .val() retorna/set valor de campos de formulrios .attr() retorna/set valor de um atributo
Return/set contedo
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Mickey Mouse"); }); $("button").click(function(){ $("#w3s").attr("href","http://www.w3schools.com/jquery"); });
Manipulando CSS
seletor propriedade valor
$("p").css("background-color","yellow");
$("p").css({ "background-color":"yellow", "font-size":"200%" });
Manipulando CSS
$("button").click(function(){ $("h1,h2,p").addClass("blue"); }); Adicionando classe $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); Removendo classe
Criando mscaras para formulrios
14/27
Masked Input Plugin
Cria mscaras para campos input dos formulrios Basta adicionar o arquivo jquery.maskedinput-1.2.2.min.js
15/27
Sintaxe
seletor plugin mscara
$('#telefone').mask('(99) 9999-9999');
16/27
Regras
a para para algum lugar que voc queira somente letras de a z 9 para algum lugar que voc queira somente nmeros de 0 9 * para algum lugar que voc queira nmeros e letras de 0 9 e de a z
17/27
Criando novas mscaras
.definitions permite adicionar novas regras para mscaras

jQuery(function($){ $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999"); });
18/27
Validao com jQuery
19/27
Validate Plugin
Permite adiciona regras de validao para formulrios de forma muito simples jquery.validate.js
20/27
Sintaxe
$("#myform").validate({ rules: { name_campo: { required: true, minlength: 3 }, messages:{ name_campo:{ required: mensagem ..., minlength: mensagem ... } } });
Regras
required campo obrigatrio minlength( length ) tamanho mnimo maxlength( length ) tamanho mximo range: [x,y] define um intervalo email( ) e-mail vlido url( ) url vlida equalTo( other ) verifica se igual a
Exerccio I
Nome*: Email*: Telefone: Senha*: Confirmar Senha*: Placa do carro*:
Enviar
>= 3 caracteres Validar email
Mscara
Validar senhas
Mscara
Dvidas ??
24/27
$$variavel
$campos_formulario = array("nome", "email", "ddd", "telefone"); echo $nome; $_POST = array( "nome"=>'maria', "email"=>'maria@ps.com', "ddd"=>78, "telefone"=>99997867); $i=0; foreach($campos_formulario as $campo){ $$campo = $_POST[$campo]; echo $campos_formulario[$i].'<br />';$i++; echo $$campo.'<br />'; } echo $nome;
Obrigado !!!
26/27
Referncias
SOARES, W. PHP 5: Conceitos, programao e integrao com banco de dados. - 6.ed. Rev., atual. So Paulo: rica, 2010. DALL'OGILIO, P. PHP: programao com orientao a objetos 2. ed. So Paulo: Novatec Editora, 2009. http://api.jquery.com/ http://digitalbush.com/projects/masked-input-plugin/#usage http://docs.jquery.com/Plugins/Validation http://www.w3schools.com/ http://www.php.net/

php10 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

php10 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento Web I

Aula 10 Instrutor: Jos Fernando Santana Andrade fernando.amdrade@gmail.com

write less, do more.

HTML/DOM CSS Mtodos e eventos HTML Efeitos e animaes AJAX

<head> <script src="jquery-1.9.1.min.js"></script> </head>

Criando mscaras para formulrios

Masked Input Plugin

Criando novas mscaras

.definitions permite adicionar novas regras para mscaras

Validao com jQuery

>= 3 caracteres Validar email

Você também pode gostar