Oficina jQuery
-
Upload
cleber-schroeder-fonseca -
Category
Technology
-
view
375 -
download
0
Transcript of Oficina jQuery
1
CampusCharqueadas
Oficina de jQuery
Cleber Schroeder Fonseca
2
CampusCharqueadas
O QUE É O JQUERY?
3
CampusCharqueadas
jQuery
Site do jQuery é http://www.jquery.com
4
CampusCharqueadas
POR QUE É TÃO USADO E EFICIENTE?
5
CampusCharqueadas
QUEM UTILIZA O JQUERY?
6
CampusCharqueadas
Quem utiliza o jQuery
7
CampusCharqueadas
DO QUE O JQUERY É CAPAZ?
8
CampusCharqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery
9
CampusCharqueadas
O QUE É O $()?
10
CampusCharqueadas
$()
// JavaScript "puro" var cabecalho = document.getElementById("cabecalho"); if (cabecalho.attachEvent) { cabecalho.attachEvent("onclick", function (event) { alert("Você clicou no cabeçalho, usuário do IE!"); }); } else if (cabecalho.addEventListener) { cabecalho.addEventListener("click", function (event) { alert("Você clicou no cabeçalho!") }, false); }
11
CampusCharqueadas
$()
// jQuery $("#cabecalho").click(function (event) { alert("Você clicou no cabeçalho!"); });
12
CampusCharqueadas
SELETORES NO JQUERY?
13
CampusCharqueadas
Seletores
• $(“#id”)
• $(“.classe”)
• $(“p”)
• $(“ul.classe li”)
• $(“a:first”)
• $(“img[alt=‘home’]”)
14
CampusCharqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery
15
CampusCharqueadas
EVENTOS
16
CampusCharqueadas
Eventos
• .click()
• .dblclick()
• .mouseenter()
• .keypress()
• .keyup()
• .change()
17
CampusCharqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery
18
CampusCharqueadas
jQuery Validation
19
CampusCharqueadas
O QUE É O JQUERY VALIDATION?
20
CampusCharqueadas
jQuery Validation
• Site do jQuery Validation http://jqueryvalidation.org
21
CampusCharqueadas
MÉTODOS DE AVALIAÇÃO
22
CampusCharqueadas
Métodos de avaliação
• required • remote • minlength • maxlength • rangelength • min • max • range • email
23
CampusCharqueadas
Métodos de avaliação
• url • date • dateISO • number • digits • creditcard • equalTo • accept • extension
24
CampusCharqueadas
Métodos de avaliação
• phoneUS • require_from_group
25
CampusCharqueadas
Métodos de avaliação
• Outros podem ser criados por qualquer pessoa.
26
CampusCharqueadas
jQuery UI
27
CampusCharqueadas
O QUE É O JQUERY UI?
28
CampusCharqueadas
jQuery UI
• Site do jQuery UI é http://jqueryui.com
29
CampusCharqueadas
O QUE É POSSÍVEL FAZER COM JQUERY UI?
30
CampusCharqueadas
EXEMPLOS
https://github.com/clebersfonseca/Oficina-JQuery
31
CampusCharqueadas
MÃOS A OBRA
32
CampusCharqueadas
33
CampusCharqueadas
Hello World
• Crie um documento html com um botão que ao ser clicado exiba um alerta dizendo Hello World.
34
CampusCharqueadas
Abas
• Crie uma página com 3 abas, cada uma das deve conter um contúdo estático.
35
CampusCharqueadas
Caixa de dialogo
• Crie uma página onde contenha um botão que ao ser clicado seja exibida uma caixa de dialogo com informação pertinentes.
36
CampusCharqueadas
Formulário
• Cire um formulário de cadastro de pessoas com: – Nome – Email – Senha – Confirmação de senha – Data de nascimento – Telefones (residencial, comercial e celular) onde pelo menos um
deles é obrigatório – Rua – Número – Complemento – Cep
• validando todos os campos. • Os campos são de preenchimento obrigatório