Desenvolvimento Web I
2/27
jQuery
Uma biblioteca JavaScript, que facilita muita a programao e muito fcil de aprender
Desenvolvimento Web I
3/27
Caractersticas
Manipulao
Desenvolvimento Web I
4/27
Instalao
Sintaxe
$( ) funo jQuery, cria um objeto jQuery e avalia a expresso passada como parmetro $('p');
Desenvolvimento Web I
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
Desenvolvimento Web I 7/27
Nome da classe
Id
Seletores
$(function(){ $("#p1").mouseleave(function(){ alert("Bye! Vc tirou o mouse de p1!"); }); }); $(function(){ $("button").click(function(){ $(":button").fadeOut(); });
Desenvolvimento Web I 8/27
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
Desenvolvimento Web I 9/27
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
Desenvolvimento Web I 10/27
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"); });
Desenvolvimento Web I 11/27
Manipulando CSS
seletor propriedade valor
$("p").css("background-color","yellow");
$("p").css({ "background-color":"yellow", "font-size":"200%" });
Desenvolvimento Web I 12/27
Manipulando CSS
$("button").click(function(){ $("h1,h2,p").addClass("blue"); }); Adicionando classe $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); Removendo classe
Desenvolvimento Web I 13/27
Desenvolvimento Web I
14/27
Cria mscaras para campos input dos formulrios Basta adicionar o arquivo jquery.maskedinput-1.2.2.min.js
Desenvolvimento Web I
15/27
Sintaxe
seletor plugin mscara
$('#telefone').mask('(99) 9999-9999');
Desenvolvimento Web I
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
Desenvolvimento Web I
17/27
Desenvolvimento Web I
18/27
Desenvolvimento Web I
19/27
Validate Plugin
Permite adiciona regras de validao para formulrios de forma muito simples jquery.validate.js
Desenvolvimento Web I
20/27
Sintaxe
$("#myform").validate({ rules: { name_campo: { required: true, minlength: 3 }, messages:{ name_campo:{ required: mensagem ..., minlength: mensagem ... } } });
Desenvolvimento Web I 21/27
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
Desenvolvimento Web I 22/27
Exerccio I
Nome*: Email*: Telefone: Senha*: Confirmar Senha*: Placa do carro*:
Enviar
Desenvolvimento Web I 23/27
Mscara
Validar senhas
Mscara
Dvidas ??
Desenvolvimento Web I
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;
Desenvolvimento Web I 25/27
Obrigado !!!
Desenvolvimento Web I
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/
Desenvolvimento Web I 27/27