Oficina jQuery

36
1 Campus Charqueadas Oficina de jQuery Cleber Schroeder Fonseca

Transcript of Oficina jQuery

Page 1: Oficina jQuery

1

CampusCharqueadas

Oficina de jQuery

Cleber Schroeder Fonseca

Page 2: Oficina jQuery

2

CampusCharqueadas

O QUE É O JQUERY?

Page 3: Oficina jQuery

3

CampusCharqueadas

jQuery

Site do jQuery é http://www.jquery.com

Page 4: Oficina jQuery

4

CampusCharqueadas

POR QUE É TÃO USADO E EFICIENTE?

Page 5: Oficina jQuery

5

CampusCharqueadas

QUEM UTILIZA O JQUERY?

Page 6: Oficina jQuery

6

CampusCharqueadas

Quem utiliza o jQuery

Page 7: Oficina jQuery

7

CampusCharqueadas

DO QUE O JQUERY É CAPAZ?

Page 8: Oficina jQuery

8

CampusCharqueadas

EXEMPLOS

https://github.com/clebersfonseca/Oficina-JQuery

Page 9: Oficina jQuery

9

CampusCharqueadas

O QUE É O $()?

Page 10: Oficina jQuery

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); }

Page 11: Oficina jQuery

11

CampusCharqueadas

$()

// jQuery $("#cabecalho").click(function (event) { alert("Você clicou no cabeçalho!"); });

Page 12: Oficina jQuery

12

CampusCharqueadas

SELETORES NO JQUERY?

Page 13: Oficina jQuery

13

CampusCharqueadas

Seletores

• $(“#id”)

• $(“.classe”)

• $(“p”)

• $(“ul.classe li”)

• $(“a:first”)

• $(“img[alt=‘home’]”)

Page 14: Oficina jQuery

14

CampusCharqueadas

EXEMPLOS

https://github.com/clebersfonseca/Oficina-JQuery

Page 15: Oficina jQuery

15

CampusCharqueadas

EVENTOS

Page 16: Oficina jQuery

16

CampusCharqueadas

Eventos

•  .click()

•  .dblclick()

•  .mouseenter()

•  .keypress()

•  .keyup()

•  .change()

Page 17: Oficina jQuery

17

CampusCharqueadas

EXEMPLOS

https://github.com/clebersfonseca/Oficina-JQuery

Page 18: Oficina jQuery

18

CampusCharqueadas

jQuery Validation

Page 19: Oficina jQuery

19

CampusCharqueadas

O QUE É O JQUERY VALIDATION?

Page 20: Oficina jQuery

20

CampusCharqueadas

jQuery Validation

•  Site do jQuery Validation http://jqueryvalidation.org

Page 21: Oficina jQuery

21

CampusCharqueadas

MÉTODOS DE AVALIAÇÃO

Page 22: Oficina jQuery

22

CampusCharqueadas

Métodos de avaliação

•  required •  remote •  minlength •  maxlength •  rangelength •  min •  max •  range •  email

Page 23: Oficina jQuery

23

CampusCharqueadas

Métodos de avaliação

•  url •  date •  dateISO •  number •  digits •  creditcard •  equalTo •  accept •  extension

Page 24: Oficina jQuery

24

CampusCharqueadas

Métodos de avaliação

•  phoneUS •  require_from_group

Page 25: Oficina jQuery

25

CampusCharqueadas

Métodos de avaliação

•  Outros podem ser criados por qualquer pessoa.

Page 26: Oficina jQuery

26

CampusCharqueadas

jQuery UI

Page 27: Oficina jQuery

27

CampusCharqueadas

O QUE É O JQUERY UI?

Page 28: Oficina jQuery

28

CampusCharqueadas

jQuery UI

•  Site do jQuery UI é http://jqueryui.com

Page 29: Oficina jQuery

29

CampusCharqueadas

O QUE É POSSÍVEL FAZER COM JQUERY UI?

Page 30: Oficina jQuery

30

CampusCharqueadas

EXEMPLOS

https://github.com/clebersfonseca/Oficina-JQuery

Page 31: Oficina jQuery

31

CampusCharqueadas

MÃOS A OBRA

Page 32: Oficina jQuery

32

CampusCharqueadas

Page 33: Oficina jQuery

33

CampusCharqueadas

Hello World

•  Crie um documento html com um botão que ao ser clicado exiba um alerta dizendo Hello World.

Page 34: Oficina jQuery

34

CampusCharqueadas

Abas

•  Crie uma página com 3 abas, cada uma das deve conter um contúdo estático.

Page 35: Oficina jQuery

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.

Page 36: Oficina jQuery

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