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