introdução ao jqueryhelioesperidiao.com/2019/cci/01x09.pdf · title: introdução ao jquery...
TRANSCRIPT
![Page 1: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/1.jpg)
INTRODUÇÃO AO JQUERYPROF. ME. HÉLIO ESPERIDIÃO
![Page 2: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/2.jpg)
IntroduçãoJQuery é uma biblioteca JavaScript desenvolvida para simplificar os scripts client-side que interagem com o HTML.
Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig.
Usada por cerca de 55% dos 10 mil sites mais visitados do mundo.
jQuery é a mais popular das bibliotecas JavaScript.
![Page 3: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/3.jpg)
FuncionalidadesResolução da incompatibilidade entre os navegadores.
Redução de código.
Reutilização do código através de plugins.
Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
Trabalha com AJAX.
Implementação segura de recursos do CSS.
![Page 4: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/4.jpg)
Carregando a bibliotecaAntes do uso é necessário carregar a biblioteca.
Todo javaScript pode ser armazenado em um arquivo secundário e ser carregado a pagina principal.
◦ O Jquery pode ser salvo em um diretório especifico dentro de um site ou pode fazer referencia a um arquivo localizado em algum servidor na web.
◦ Fazer referencia em algum servidor na web pode ser mais rápido, pois a probabilidade de usuários já terem carregado a biblioteca em outros sites pode tornar o carregamento do seu site mais rápido.
◦ http://jquery.com/download/
![Page 5: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/5.jpg)
Jquery é Java ScriptTodos os comandos básicos javaScript são iguais para jquery Exemplo:
◦ Declaração de variáveis.
◦ Estruturas condicionais
◦ Estruturas de repetição
◦ Vetores
◦ Matrizes.
◦ Etc.
![Page 6: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/6.jpg)
Carregando o jquery na prática
Carrega oJquery armazenado no google
Carrega oJquery armazenado na mesmapasta que a pagina html
![Page 7: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/7.jpg)
Ola mundo
Executa o código após ocarregamento do documento
![Page 8: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/8.jpg)
Eventos: ClickPode ser usado em formulários e objetos de tela
Bloco de CSS
Carrega o Jquery
É Executado ao click da divcom id “Bloco1”
Div com id Bloco1
Id do componente que espera por um click
![Page 9: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/9.jpg)
Entendendo os eventosId do componente HTML
Evento
Bloco de código que deve ser executado
![Page 10: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/10.jpg)
dblclickÉ executado por meio de um click duplo do mouse.
Pode ser utilizado em componentes do formulário.
Pode ser utilizado em componentes como divs, spans, imagens, etc.
Id do componente HTMLEvento
Bloco de código quedeve ser executado
![Page 11: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/11.jpg)
HIDE/SHOW
Esconde a div
Apresenta a div
Evento Click do botão
Evento Click do botão
Id do Objeto
![Page 12: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/12.jpg)
HIDE/SHOW
Determina a velocidade
![Page 13: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/13.jpg)
fadeIn / fadeOut
Aparece com efeito de fadein
Desaparece com o efeito fadeout
![Page 14: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/14.jpg)
slideDown/ slideUp
Desliza para baixo
Desliza para cima
![Page 15: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/15.jpg)
animate
Atributo cssNovo valor
Atributos separados por virgula
Tempo da animação
![Page 16: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/16.jpg)
Mudar css em tempo de execução
Propriedade css Novo valor
Pode ser em hexadecimal
![Page 17: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/17.jpg)
Atribuindo eventos a tags ou seletores
Nome do seletorou nome do id precedido de # Nome do evento
Bloco de código que deve ser executadocaso o evento seja chamado
![Page 18: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/18.jpg)
Atribuindo eventos a seletoresAcontece toda vez que ocorre um click em uma determinada tag ou seletor html
Define o seletor
Toda vez que houverum click na tag <p>o evento é disparado
Executa um bloco de programação
![Page 19: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/19.jpg)
Atribuindo eventos a seletores
Define o seletor
Toda vez que houverum click na tag <b>o evento é disparado
Executa um bloco de programação
![Page 20: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/20.jpg)
Eventos de formuláriosblur()
◦ Ocorre quando o foco deixa um componente de formulário.
focus()◦ Ocorre quando o objeto ganha foco
change()◦ Ocorre quando há uma mudança em algum input.
◦ Em caso de caixas de combo, lista, checkbox e radio ocorre ao click em um item.
![Page 21: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/21.jpg)
Blur e focus
O mesmo componenteé capaz de lidar com vários eventos
Ouvidor do evento “focus”
Ouvidor do evento blurEscreve em uma div o texto: Perdeu foco
![Page 22: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/22.jpg)
ChangeEvento disparado quando um estado é mudado
Pode ser utilizado em ◦ Caixas de lista,
◦ combo,
◦ Checkbox
◦ radioId do componente
![Page 23: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/23.jpg)
Onchange
Ouvidor do evento changena caixa de texto
![Page 24: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/24.jpg)
Eventos do mouseclick()
◦ Ocorre quando usuário efetua um click sobre o componente
dblclick()◦ Ocorre quando usuário efetua um click duplo sobre o componente
hover()◦ Ocorre quando mouse entra ou sai do componente
mouseenter()◦ Ocorre quando mouse entra no componente
mouseleave()◦ Ocorre quando mouse deixa o componente
mousemove()◦ Ocorre quando mouse se move sobre o componente
mouseout()◦ Ocorre quando mouse deixa o componente
mouseover()◦ Ocorre quando o mouse esta dentro do componente
![Page 25: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/25.jpg)
onclick
Ouvidor do evento click sobre uma imagem
![Page 26: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/26.jpg)
dblclick()
Ouvidor do evento double click sobre uma imagem
![Page 27: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/27.jpg)
hover()
![Page 28: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/28.jpg)
mouseenter
![Page 29: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/29.jpg)
mouseleave
![Page 30: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/30.jpg)
Mouse Move
e possui as coordenadas x e y do mouse sobre o objeto
![Page 31: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/31.jpg)
Mouseout / mouseover
![Page 32: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/32.jpg)
Eventos do tecladokeydown()
◦ Ocorre quando a tecla pressionada está em baixo
keypress()◦ Ocorre quando a tecla está pressionada.
keyup()◦ Ocorre quando usuário solta a tecla
![Page 33: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/33.jpg)
keypress()Ocorre quando usuário pressiona uma tecla
A variável e possui a tecla que foi pressionada
Manda uma mensagem,com a tecla pressionada
Ocorre quando usuário pressiona uma tecla no corpo da página
![Page 34: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/34.jpg)
OffsetPosicionando componentePosiciona qualquer componente na tela
Pode recuperar a posição do objeto na tela
200px de left200px do topo
![Page 35: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/35.jpg)
Offsetrecuperando posição de componente
Recupera o valor de topdo objeto
![Page 36: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/36.jpg)
Recuperar dados de formuláriosPode ser usado para caixas de texto, senha e área.
ID do componente que espera o evento click
Recupera o valor da caixa de texto,Senha ou área.
Id da caixa de texto, senha ou área
![Page 37: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/37.jpg)
Formulários Jquery e Ajax
![Page 38: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/38.jpg)
Recuperar valor de uma caixa de texto, textArea e password
Espera o ClickDo botão
Recupera o valor da caixa de texto
Espera o carregamentoda pagina pra executar.
![Page 39: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/39.jpg)
Recuperando valor do checkbox ou Radiobox
Espera o ClickDo botão
Retorna true caso o checkboxseja marcado
Espera o carregamentoda pagina pra executar.
![Page 40: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/40.jpg)
Recuperando valor do listboxou combobox.
Recupera o value
Recupera o texto
![Page 41: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/41.jpg)
Enviando formulário via Jquery
Verifica se o camponome está vazio
Caso esteja vazio envia mensagem e sai da rotina.
Envia o formulário para “pagDestino.php” usando métodoget
Utiliza um botão e não um submit
![Page 42: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/42.jpg)
AjaxAJAX é acrônimo em língua inglesa de "Asynchronous Javascript andXML", que em português significa "Javascript e XML Assíncronos".
Designa um conjunto de técnicas para programação e desenvolvimento web que utiliza tecnologias como Javascript e XML para carregar informações de forma assíncrona.
Alguns serviços do Google como o Gmail e Google Maps fazem uso das ferramentas AJAX.
![Page 43: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/43.jpg)
AjaxPermite enviar e receber dados de uma página que esta localizada no servidor “sem sair da página que faz a requisição”
![Page 44: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/44.jpg)
SintaxeMétodo de envio POST ou GET
Nome da página que receberá os dados
Nome da variávelLado php: $_POST[‘Nome da variável’]
Valor da variável
Para inserir mais de uma variável: separe por virgula
Recebe o resultado do processamentoda paginadestino.php
![Page 45: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/45.jpg)
Exemplo Ajax - Completo
Lado HTML
Lado php – página destino
![Page 46: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/46.jpg)
Escrever em divs e Spans
Permite escrever em divs e spans
Ouvidor do evento click
![Page 47: Introdução ao Jqueryhelioesperidiao.com/2019/CCI/01x09.pdf · Title: Introdução ao Jquery Author: Helio Created Date: 9/9/2018 11:24:40 PM](https://reader035.vdocuments.com.br/reader035/viewer/2022071219/605688931a47727f7938e004/html5/thumbnails/47.jpg)
Apagar conteúdo de divs e Spans
Limpa um span ou div