Caue Fajoli, profile picture
Carregado porCaue Fajoli
PPTX, PDF394 visualizações

jQuery na Prática - Cauê Fajoli

O documento apresenta uma introdução ao jQuery, abordando os seguintes tópicos: fundamentos do JavaScript e do DOM, preparação do ambiente jQuery, seletores, manipulação de CSS e conteúdo, eventos e funções. O documento fornece uma visão geral dos principais conceitos e funcionalidades do jQuery.

Incorporar apresentação

Baixar para ler offline
jQuery na Prática
Cauê Fajoli cauefajoli@gmail.com Software Developer
Agenda  Introdução ao JavaScript e jQuery  Fundamentos de JavaScript  Document Object Model (DOM)  Preparando o Ambiente  Seletores jQuery  Manipulando CSS  Manipulando Conteúdo  Eventos  Animação  Funções jQuery  Ajax  Formulários
Introdução ao JavaScript e jQuery
JavaScript hoje
Por que usar jQuery? jQuery é uma camada de abstração Use jQuery porque... ... é fácil ... é produtivo ... é simples ... constantes atualizações ... suporte da comunidade
jQuery não é nenhuma panacéia  Você ainda precisa de JavaScript  jQuery tem seu peso  Mais uma camada  Abstração
Fundamentos de JavaScript
Criando variáveis Dê nome aos dados var titulo = “jQuery na Prática”;  Palavra reservada: var  Nomes de variáveis normalmente em snake_case  Linha termina em ponto e vírgula ( ; )
Variáveis e dados • Tipagem fraca, dinâmica e implícita var numero = 100; (int) var titulo = “jQuery na Prática”; (string) var quantidade = 5.7; (float) var erro = true; (boolean)
Funções function soma (num1, num2) { var resultado; resultado = num1 + num2; return resultado; } • Palavra reservada: function • Nomes de funções normalmente em camelCase • Linha termina em ponto e vírgula ( ; )
Funções globais do JavaScript alert(“Olá, mundo!”); void var resposta = confirm(“Confirmar exclusão do registro?”); Retorna boolean var idade = prompt(“Informe sua idade:”); Retorna string
Funções de string var titulo = “jQuery na Prática”; titulo.toLowerCase();  “jquery na prática” titulo.toUpperCase();  “JQUERY NA PRÁTICA” titulo.charAt(2);  “u” titulo.replace(“a”, “4”);  “jQuery n4 Prátic4” titulo.split(“ ”);  [“jQuery”, “na”, “Prática”]
Operações numéricas 10 + 5;  15 10 / 2;  5 parseInt(“10 reais”);  10 var num = 10; num.toString();  “10”
Arrays var frutas = [“maçã”, “uva”, “abacaxi”]; (Inicializa um array na variável frutas) frutas[2];  “abacaxi” (Retorna a posição 2) frutas.length;  3 (Retorna o tamanho da lista) frutas.reverse();  [“abacaxi”, “uva”, “maçã”] (Retorna a lista em ordem inversa)
Document Object Model (DOM)
DOM <html> <head> <title>jQuery na Prática</title> </head> <body> <h1 id=“titulo”>Curso de jQuery</h1> <p class=“autor”>Caue Fajoli</p> <ul> <li>JS</li> <li>DOM</li> <li>jQuery</li> </ul> </body> </html>
DOM html head body title h1#titulo p.autor ul lilili jQuery na Prática Curso de jQuery Cauê Fajoli JS DOM jQuery
Preparando o Ambiente
http://jquery.com
Carregando jQuery <script type=“text/javascript” src=“jquery-X.X.X.min.js”></script>
Verificando se o jQuery está carregado <script> console.log(jQuery); //ou alert(jQuery); </script> jQuery;  ReferenceError: jQuery is not defined (jQuery não está carregado) jQuery;  function (e,t){return new v.fn.init(e,t,n)} (Pronto para começar!) $;  function (e,t){return new v.fn.init(e,t,n)} (Também jQuery!)
Seletores jQuery jQuery $(“h1”); (Nome do elemento) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
Seletores jQuery jQuery $(“p”); (Nome do elemento) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
Seletores jQuery jQuery $(“p.autor”); (Elemento + . + Classe) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
Seletores jQuery jQuery $(“.autor”); (Somente a classe) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
Seletores jQuery jQuery $(“p#rodape”); (Elemento + # + Id) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
Resultado da Seleção jQuery $(“p”); DOM p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com JavaScript [“<p class=‘autor’>Cauê Fajoli</p>”, “<p id=‘rodape’>cauefajoli@gmail.com</p>”]
Resultado da Seleção jQuery $(“h1, p#rodape”); $(“h1”, “p#rodape”); DOM h1  jQuery na Prática p#rodape  vitorfs.com/jquery-na-pratica JavaScript [“<h1>Vitor Freitas</h1>”, “<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”] Errado!
Espaço em branco $(“p#rodape”); Elemento p com id rodape $(“p #rodape”); Elemento com id rodape dentro do elemento p
Selecionando atributos $(“input”); // Todos inputs do DOM $(“input[type=‘text’]”); // Todos inputs do tipo text $(“input[type=‘text’][name=‘email’]”); // Selecione por mais de um atributo $(“p[id=‘rodape’]”); ou $(“p#rodape”); $(“p[class=‘autor’]”); ou $(“p.autor”);
Seletores css também são válidos <i class=“icon-ok”></i> <i class=“icon-cancelar”></i> $(“i[class^=‘icon-’]”); // Todos elementos i que a classe começa com “icon-” $(“i[class$=‘ok’]”); // Todos elementos i que a classe termina com “ok” $(“i[class*=‘icon’]”); // Todos elementos i que a classe possua “icon”
Filtros de seleção Filtros baseados no index do array de retorno da seleção $(“p:first”); // primeiro p da seleção $(“p:last”); // último p da seleção $(“li:eq(2)”); // elemento li com index 2 $(“tr:even”); // todos tr com index par $(“tr:odd”); // todos tr com index ímpar
Filtros de hierarquia Filtros baseados no hierarquia do DOM $(“body div”); // todas as divs dentro do body $(“body > div”); // todas as divs que estão diretamente abaixo do body $(“label + input”); // label com input adjacente (deve possuir o mesmo elemento pai)
Manipulando CSS
Manipulando CSS <p>Lorem ipsum dolor sit amet</p> $(”p”).css(”font-size”); // retorna o valor do font-size do elemento p $(”p”).css(”font-size”, ”12px”); // define o font-size do elemento p para 12px
Definindo múltiplos atributos Utilizando métodos encadeados $(“p”).css(“font-size”, “24px”) .css(“font-weight”, “bold”) .css(“line-height”, “32px”); Ou um map $(“p”).css({“font-size”: “24px”, “font-weight”: “bold”, “line-height”: “32px”});
Mas... vamos com calma HTML Conteúdo CSS Apresentação JavaScript Interação
Interface CSS  DOM e CSS comunicam via IDs e Classes  Use .css() com cautela  Manipule IDs e Classes  Mais seguro e manutenível
Manipulando classes $(“p”).hasClass(“autor”); // retorna true ou false $(“p”).addClass(“bigger”); $(“p”).removeClass(“bigger”); // remove a classe passada via parâmetro $(“p”).removeClass(); // remove todas as classes $(“p”).toggleClass(“bigger”); // se o elemento tiver a classe bigger, o jQuery remove. Se não tiver, adiciona
Visibilidade $(“p.autor”).hide(); [<p class=“autor” style=“display: none”>Cauê Fajoli</p>] $(“p.autor”).show(); [<p class=“autor” style=“display: normal”>Cauê Fajoli</p>] $(“p.autor”).toggle(); Alterna entre hide e show
Manipulando Conteúdo
Template <html> <head> <title>jQuery na Prática</title> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“js”>JavaScript</span></li> <li>DOM</li> <li>jQuery</li> </ul> <p>Data: <span class=“data”>21/01 à 25/01</span></p> <p>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html>
Acessando text e html • html  Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML $(“p:first”).html(); [“Data: <span class=‘data’>21/01 à 25/01</span>”] • text  Recupera todo texto dentro do elemento selecionado, ignorando as tags HTML $(“p:first”).text(); [“Data: 21/01 à 25/01”]
Definindo text $(“span.data”).text(“28/01 à 01/02”); <span class=“data”>21/01 à 25/01</span><span class=“data”>28/01 à 01/02</span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 28/01 à 01/02 Horário: 19:00 às 22:40
Definindo html $(“span.data”).html(“<u>28/01 à 01/02</u>”); <span class=“data”>21/01 à 25/01</span><span class=“data”><u>28/01 à 01/02</u></span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 28/01 à 01/02 Horário: 19:00 às 22:40
Inserindo html no DOM $(“ul”).append(“<li>Seletores jQuery</li>”); Insere elemento dentro do final da seleção $(“ul”).prepend(“<li>Seletores jQuery</li>”); Insere elemento dentro do inicio da seleção $(“ul”).before(“<h3>Conteúdo</h3>”); Insere elemento antes da seleção $(“ul”).after(“<h3>Data e Hora:</h3>”); Insere elemento após a seleção
Append $(“ul”).append(“<li>Seletores jQuery</li>”); Cronograma • Fundamentos JavaScript • DOM • jQuery • Seletores jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
Prepend $(“ul”).prepend(“<li>Seletores jQuery</li>”); Cronograma • Seletores jQuery • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
Before $(“ul”).before(“<h3>Conteúdo</h3>”); Cronograma Conteúdo • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
After $(“ul”).after(“<h3>Data e Hora:</h3>”); Cronograma • Fundamentos JavaScript • DOM • jQuery Data e Hora: Data: 21/01 à 25/01 Horário: 19:00 às 22:40
Eventos
Como funciona <html> <head> <title>jQuery na Prática</title> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“js”>JavaScript</span></li> <li>DOM</li> <li>jQuery</li> </ul> <p>Data: <span class=“data”>21/01 à 25/01</span></p> <p>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html> Click! Possui handler? Possui handler? Possui handler? Possui handler?
Document Ready <html> <head> <title>jQuery na Prática</title> <script src=“jquery.js”></script> <script> $(document).ready(function () { $(“p”).hide(); }); </script> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“js”>JavaScript</span></li> <li>DOM</li> <li>jQuery</li> </ul> <p>Data: <span class=“data”>21/01 à 25/01</span></p> <p>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html> Documento está pronto! Executa o handler
Eventos de Mouse $(“p”).click(); //Dispara no evento de click do mouse $(“p”).dblclick(); //Dispara com click duplo $(“p”).hover(); //Dispara quando mouse entra e/ou sai do elemento $(“p”).mousedown(); //Dispara quando o botão do mouse é pressionado $(“p”).mouseenter(); //Dispara quando o mouse entra no elemento $(“p”).mouseleave(); //Dispara quando o mouse sai do elemento $(“p”).mousemove(); //Dispara quando o mouse se move $(“p”).mouseup(); //Dispara quando ao término do click do mouse
Click function esconder() { $(“p”).hide(); } $(“p”).click(esconder); Normalmente utilizamos funções anônimas $(“p”).click(function () { $(“p”).hide(); });
Hover .destacar { background: yellow; } $(“p”).hover(function () { $(this).addClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05
Hover .destacar { background: yellow; } $(“p”).hover( function () { $(this).addClass(“destacar”);}, function () { $(this).removeClass(“destacar”);} ); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05
Hover .destacar { background: yellow; } $(“p”).hover(function () { $(this).toggleClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05
Eventos de Teclado $(“input”).keydown(); //Dispara ao apertar a tecla $(“input”).keypress(); //Dispara ao pressionar a tecla $(“input”).keyup(); //Dispara ao soltar a tecla
Eventos de Formulário $(“input”).blur(); //Dispara ao input perder o foco $(“input”).change(); //Dispara quando um valor é alterado $(“input”).focus(); //Dispara quando um input recebe foco $(“input”).select(); //Dispara ao selecionar um texto, option, radio $(“input”).submit(); //Dispara submeter o formulário
Objeto event $(“body”).keypress(function (event) { }); event.which; // código númerico da tecla pressionada event.preventDefault(); // evita a ação padrão do browser event.stopPropagation(); // evita propagação do evento no DOM
Animação
Animações slide .slideUp([duração][,callback]); duração  Tempo da animação em milisegundos  Default 400 milisegundos  Aceita parâmetros “slow” (600ms) e “fast” (200ms) callback  Função que será executada após o término da animação
slideUp, slideDown e slideToggle $(“p”).slideUp(“slow”); $(“p”).slideUp(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).slideDown(“fast”); $(“p”).slideToggle();
Animações fade  Utiliza os mesmos parâmetros do slide $(“p”).fadeIn(“slow”); $(“p”).fadeIn(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).fadeOut(“fast”); $(“p”).fadeToggle();
Funções jQuery
Adicionando funções customizadas $.fn.vazio = function () { var value = $(this).val(); if (value == “”) { return true; } else { return false; } }; $(“input”).vazio();
Ajax
XMLHttpRequest  Requisições assíncronas por trás dos panos $.ajax({ url: ‘usuarios.php’, data: { id: “10”, acao: “editar” }, cache: false, type: “POST”, beforeSend: function () { // execução antes de realizar requisição }, success: function (data) { // execução em caso de sucesso }, error: function () { // execução em caso de erro } complete: function () { // execução ao terminar requisição } });
Formulários
Serializando formulários <form method=“post” action=“cadastro.php” id=“cadastro”> Nome: <input type=“text” name=“nome” id=“nome”> Email: <input type=“text” name=“email” id=“email”> Cpf: <input type=“text” name=“cpf” id=“cpf”> <button type=“submit”>Enviar</button> </form> $(“#cadastro”).serialize(); Retorna: nome=Caue&email=cauefajoli@gmail.com&cpf=123456789012 Caue cauefajoli@gmail.com 123456789012 Nome: Email: Cpf:
<h1>Muito Obrigado</h1> <a href="mailto:cauefajoli@gmail.com"></a> <p>Cauê Fajoli</p>

Mais conteúdo relacionado

PDF
jQuery na Prática!
porJosé Alexandre Macedo
 
PDF
JavaScript e JQuery para Webdesigners
porHarlley Oliveira
 
PPT
Aprenda jQuery 1.3
porHelton Marinho
 
ODP
Introdução a jQuery
porRodrigo Aramburu
 
PDF
jQuery Simplificando o JavaScript
porEveraldo Wanderlei Uavniczak
 
PDF
Minicurso de jQuery
porAndré Willik Valenti
 
PDF
Java script aula 06 - dom
porCristiano Pires Martins
 
PDF
Introdução à JQuery
porAndré Faria Gomes
 
jQuery na Prática!
porJosé Alexandre Macedo
 
JavaScript e JQuery para Webdesigners
porHarlley Oliveira
 
Aprenda jQuery 1.3
porHelton Marinho
 
Introdução a jQuery
porRodrigo Aramburu
 
jQuery Simplificando o JavaScript
porEveraldo Wanderlei Uavniczak
 
Minicurso de jQuery
porAndré Willik Valenti
 
Java script aula 06 - dom
porCristiano Pires Martins
 
Introdução à JQuery
porAndré Faria Gomes
 

Mais procurados

PDF
Programação Web com jQuery
porVictor Adriel Oliveira
 
PPT
J query javascript para seres humanos
pornobios
 
PPTX
Jquery a technical overview
porAlexandre Marreiros
 
PPTX
Introdução ao jquery
porYuri Costa
 
PPTX
Javascript para CSharpers - Append B - jQuery
porWesley Lemos
 
PDF
Programação Web com jQuery
porVictor Adriel Oliveira
 
KEY
JQuery
porLuciano Borges
 
PPT
CSS & JQquery
porBeeplus App
 
PDF
Persistência de Dados no SQLite com Room
porNelson Glauber Leal
 
PDF
Turbinando o desenvolvimento Android com Kotlin
porNelson Glauber Leal
 
PDF
Jquery 2
porEduardo Mendes
 
PDF
Programando em python dicionarios
porsamuelthiago
 
PDF
PHP ao Extremo
porThiago Rigo
 
PPTX
MiniCurso Jquery - IV SimSis
porThiago Miranda
 
PDF
ODIG - Javascript, DOM Elements e jQuery
porMarketing Digital ODIG
 
KEY
JQuery Alagoinhas Dev Day - UNEB
porLuciano Borges
 
DOCX
Vb
porJustino Cassul Miranda
 
PPTX
Acesso a Banco de Dados em Java usando JDBC
porLuiz Ricardo Silva
 
PDF
Acesso a banco de dados com JDBC
porEduardo Mendes
 
ODP
JDBC
porRamon Lopes
 
Programação Web com jQuery
porVictor Adriel Oliveira
 
J query javascript para seres humanos
pornobios
 
Jquery a technical overview
porAlexandre Marreiros
 
Introdução ao jquery
porYuri Costa
 
Javascript para CSharpers - Append B - jQuery
porWesley Lemos
 
Programação Web com jQuery
porVictor Adriel Oliveira
 
JQuery
porLuciano Borges
 
CSS & JQquery
porBeeplus App
 
Persistência de Dados no SQLite com Room
porNelson Glauber Leal
 
Turbinando o desenvolvimento Android com Kotlin
porNelson Glauber Leal
 
Jquery 2
porEduardo Mendes
 
Programando em python dicionarios
porsamuelthiago
 
PHP ao Extremo
porThiago Rigo
 
MiniCurso Jquery - IV SimSis
porThiago Miranda
 
ODIG - Javascript, DOM Elements e jQuery
porMarketing Digital ODIG
 
JQuery Alagoinhas Dev Day - UNEB
porLuciano Borges
 
Vb
porJustino Cassul Miranda
 
Acesso a Banco de Dados em Java usando JDBC
porLuiz Ricardo Silva
 
Acesso a banco de dados com JDBC
porEduardo Mendes
 
JDBC
porRamon Lopes
 

Destaque

PPTX
webstudy jquery
porSeungho Han
 
KEY
JQuery: JavaScript Library of the Future
porMatthew Taylor
 
PDF
Rest Teoria E Pratica
porSergio Azevedo
 
PPTX
university of washington
porajit wagh
 
PDF
Bourne Planning for sustainability 2016
porJanet Bourne
 
PPTX
Colaborativo tres catedra
porDaniela Ortiz
 
DOCX
แข่งทำอาหาร
porThitipa Chaloey-ot
 
PDF
Proposition de loi sur usage des stupéfiants : 2- Projet de loi
porAL QOTB Tunisie
 
PDF
แฟ้มสะสมผลงานนางสาวณิชากร นามนา
pornichakron
 
PPTX
Portfolio May
pormaysiripimon
 
PDF
แฟ้มสะสมผลงาน
porsukanya0012345
 
DOCX
59
porThitipa Chaloey-ot
 
PDF
Vera
porSveshnikoVladimir
 
PDF
resume
porRob Beuerlein
 
PDF
Rest in practice con Symfony2
porDaniel Londero
 
PDF
Portfolio
porsai29678
 
PPTX
Protfolio
porMind Patpicha
 
PPTX
LHS Collaboratory March 14, 2017 Welcome and Intro Slides
porDepartment of Learning Health Sciences, University of Michigan Medical School
 
PPTX
animation
porUPSIcoursework
 
PPTX
jQuery Presentation
porRod Johnson
 
webstudy jquery
porSeungho Han
 
JQuery: JavaScript Library of the Future
porMatthew Taylor
 
Rest Teoria E Pratica
porSergio Azevedo
 
university of washington
porajit wagh
 
Bourne Planning for sustainability 2016
porJanet Bourne
 
Colaborativo tres catedra
porDaniela Ortiz
 
แข่งทำอาหาร
porThitipa Chaloey-ot
 
Proposition de loi sur usage des stupéfiants : 2- Projet de loi
porAL QOTB Tunisie
 
แฟ้มสะสมผลงานนางสาวณิชากร นามนา
pornichakron
 
Portfolio May
pormaysiripimon
 
แฟ้มสะสมผลงาน
porsukanya0012345
 
59
porThitipa Chaloey-ot
 
Vera
porSveshnikoVladimir
 
resume
porRob Beuerlein
 
Rest in practice con Symfony2
porDaniel Londero
 
Portfolio
porsai29678
 
Protfolio
porMind Patpicha
 
LHS Collaboratory March 14, 2017 Welcome and Intro Slides
porDepartment of Learning Health Sciences, University of Michigan Medical School
 
animation
porUPSIcoursework
 
jQuery Presentation
porRod Johnson
 

Semelhante a jQuery na Prática - Cauê Fajoli

PDF
LPII_Aula_7-JQuery.pdf
porGabrielaMota46
 
PDF
Introdução ao JQuery e AJAX
porSérgio Souza Costa
 
PDF
Introducao jquery
porFabio Almeida
 
PDF
J query
porTrioBlack Trioblack
 
PDF
Jquery 38book-pt-br
porJean Lopes
 
PPT
Melhorando a Experiência do Usuário com JavaScript e jQuery
porHarlley Oliveira
 
PPT
J query 1
porRamon Oliveira
 
KEY
Javascript + jQuery
porGuilherme Vinicius Moreira
 
PPTX
Jquery - Dicas e Truques
porLambda 3
 
PDF
Simplificando o Javascrip
porMiquéias Amaro
 
PPTX
JQuery
porTitao Yamamoto
 
PPTX
jQuery - Visão Geral
porKaio Valente
 
PDF
Jquery
porEduardo Mendes
 
PPT
Agilizando o desenvolvimento com j query
porPHPRio
 
PPT
Agilizando o desenvolvimento com jquery
porPHPRio
 
PPT
Agilizando o desenvolvimento com j query
porPHPRio
 
PDF
jQuery
porBruno Cunha
 
PDF
jQuery
porBruno Cunha
 
PDF
J query basico
porJoelson Rocha
 
PDF
J query apostila - noções básicas
porLuciano Marwell
 
LPII_Aula_7-JQuery.pdf
porGabrielaMota46
 
Introdução ao JQuery e AJAX
porSérgio Souza Costa
 
Introducao jquery
porFabio Almeida
 
J query
porTrioBlack Trioblack
 
Jquery 38book-pt-br
porJean Lopes
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
porHarlley Oliveira
 
J query 1
porRamon Oliveira
 
Javascript + jQuery
porGuilherme Vinicius Moreira
 
Jquery - Dicas e Truques
porLambda 3
 
Simplificando o Javascrip
porMiquéias Amaro
 
JQuery
porTitao Yamamoto
 
jQuery - Visão Geral
porKaio Valente
 
Jquery
porEduardo Mendes
 
Agilizando o desenvolvimento com j query
porPHPRio
 
Agilizando o desenvolvimento com jquery
porPHPRio
 
Agilizando o desenvolvimento com j query
porPHPRio
 
jQuery
porBruno Cunha
 
jQuery
porBruno Cunha
 
J query basico
porJoelson Rocha
 
J query apostila - noções básicas
porLuciano Marwell
 

jQuery na Prática - Cauê Fajoli

  • 1.
  • 2.
  • 3.
    Agenda  Introdução aoJavaScript e jQuery  Fundamentos de JavaScript  Document Object Model (DOM)  Preparando o Ambiente  Seletores jQuery  Manipulando CSS  Manipulando Conteúdo  Eventos  Animação  Funções jQuery  Ajax  Formulários
  • 4.
  • 5.
  • 6.
    Por que usarjQuery? jQuery é uma camada de abstração Use jQuery porque... ... é fácil ... é produtivo ... é simples ... constantes atualizações ... suporte da comunidade
  • 7.
    jQuery não énenhuma panacéia  Você ainda precisa de JavaScript  jQuery tem seu peso  Mais uma camada  Abstração
  • 8.
  • 9.
    Criando variáveis Dê nomeaos dados var titulo = “jQuery na Prática”;  Palavra reservada: var  Nomes de variáveis normalmente em snake_case  Linha termina em ponto e vírgula ( ; )
  • 10.
    Variáveis e dados •Tipagem fraca, dinâmica e implícita var numero = 100; (int) var titulo = “jQuery na Prática”; (string) var quantidade = 5.7; (float) var erro = true; (boolean)
  • 11.
    Funções function soma (num1,num2) { var resultado; resultado = num1 + num2; return resultado; } • Palavra reservada: function • Nomes de funções normalmente em camelCase • Linha termina em ponto e vírgula ( ; )
  • 12.
    Funções globais doJavaScript alert(“Olá, mundo!”); void var resposta = confirm(“Confirmar exclusão do registro?”); Retorna boolean var idade = prompt(“Informe sua idade:”); Retorna string
  • 13.
    Funções de string vartitulo = “jQuery na Prática”; titulo.toLowerCase();  “jquery na prática” titulo.toUpperCase();  “JQUERY NA PRÁTICA” titulo.charAt(2);  “u” titulo.replace(“a”, “4”);  “jQuery n4 Prátic4” titulo.split(“ ”);  [“jQuery”, “na”, “Prática”]
  • 14.
    Operações numéricas 10 +5;  15 10 / 2;  5 parseInt(“10 reais”);  10 var num = 10; num.toString();  “10”
  • 15.
    Arrays var frutas =[“maçã”, “uva”, “abacaxi”]; (Inicializa um array na variável frutas) frutas[2];  “abacaxi” (Retorna a posição 2) frutas.length;  3 (Retorna o tamanho da lista) frutas.reverse();  [“abacaxi”, “uva”, “maçã”] (Retorna a lista em ordem inversa)
  • 16.
  • 17.
    DOM <html> <head> <title>jQuery na Prática</title> </head> <body> <h1id=“titulo”>Curso de jQuery</h1> <p class=“autor”>Caue Fajoli</p> <ul> <li>JS</li> <li>DOM</li> <li>jQuery</li> </ul> </body> </html>
  • 18.
    DOM html head body title h1#titulop.autor ul lilili jQuery na Prática Curso de jQuery Cauê Fajoli JS DOM jQuery
  • 19.
  • 20.
  • 21.
    Carregando jQuery <script type=“text/javascript”src=“jquery-X.X.X.min.js”></script>
  • 22.
    Verificando se ojQuery está carregado <script> console.log(jQuery); //ou alert(jQuery); </script> jQuery;  ReferenceError: jQuery is not defined (jQuery não está carregado) jQuery;  function (e,t){return new v.fn.init(e,t,n)} (Pronto para começar!) $;  function (e,t){return new v.fn.init(e,t,n)} (Também jQuery!)
  • 23.
    Seletores jQuery jQuery $(“h1”); (Nome doelemento) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
  • 24.
    Seletores jQuery jQuery $(“p”); (Nome doelemento) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
  • 25.
    Seletores jQuery jQuery $(“p.autor”); (Elemento +. + Classe) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
  • 26.
    Seletores jQuery jQuery $(“.autor”); (Somente aclasse) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
  • 27.
    Seletores jQuery jQuery $(“p#rodape”); (Elemento +# + Id) DOM html body h1  jQuery na Prática p.autor  Cauê Fajoli p#rodape  cauefajoli@gmail.com
  • 28.
    Resultado da Seleção jQuery $(“p”); DOM p.autor Cauê Fajoli p#rodape  cauefajoli@gmail.com JavaScript [“<p class=‘autor’>Cauê Fajoli</p>”, “<p id=‘rodape’>cauefajoli@gmail.com</p>”]
  • 29.
    Resultado da Seleção jQuery $(“h1,p#rodape”); $(“h1”, “p#rodape”); DOM h1  jQuery na Prática p#rodape  vitorfs.com/jquery-na-pratica JavaScript [“<h1>Vitor Freitas</h1>”, “<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”] Errado!
  • 30.
    Espaço em branco $(“p#rodape”); Elementop com id rodape $(“p #rodape”); Elemento com id rodape dentro do elemento p
  • 31.
    Selecionando atributos $(“input”); // Todosinputs do DOM $(“input[type=‘text’]”); // Todos inputs do tipo text $(“input[type=‘text’][name=‘email’]”); // Selecione por mais de um atributo $(“p[id=‘rodape’]”); ou $(“p#rodape”); $(“p[class=‘autor’]”); ou $(“p.autor”);
  • 32.
    Seletores css tambémsão válidos <i class=“icon-ok”></i> <i class=“icon-cancelar”></i> $(“i[class^=‘icon-’]”); // Todos elementos i que a classe começa com “icon-” $(“i[class$=‘ok’]”); // Todos elementos i que a classe termina com “ok” $(“i[class*=‘icon’]”); // Todos elementos i que a classe possua “icon”
  • 33.
    Filtros de seleção Filtrosbaseados no index do array de retorno da seleção $(“p:first”); // primeiro p da seleção $(“p:last”); // último p da seleção $(“li:eq(2)”); // elemento li com index 2 $(“tr:even”); // todos tr com index par $(“tr:odd”); // todos tr com index ímpar
  • 34.
    Filtros de hierarquia Filtrosbaseados no hierarquia do DOM $(“body div”); // todas as divs dentro do body $(“body > div”); // todas as divs que estão diretamente abaixo do body $(“label + input”); // label com input adjacente (deve possuir o mesmo elemento pai)
  • 35.
  • 36.
    Manipulando CSS <p>Lorem ipsumdolor sit amet</p> $(”p”).css(”font-size”); // retorna o valor do font-size do elemento p $(”p”).css(”font-size”, ”12px”); // define o font-size do elemento p para 12px
  • 37.
    Definindo múltiplos atributos Utilizandométodos encadeados $(“p”).css(“font-size”, “24px”) .css(“font-weight”, “bold”) .css(“line-height”, “32px”); Ou um map $(“p”).css({“font-size”: “24px”, “font-weight”: “bold”, “line-height”: “32px”});
  • 38.
    Mas... vamos comcalma HTML Conteúdo CSS Apresentação JavaScript Interação
  • 39.
    Interface CSS  DOMe CSS comunicam via IDs e Classes  Use .css() com cautela  Manipule IDs e Classes  Mais seguro e manutenível
  • 40.
    Manipulando classes $(“p”).hasClass(“autor”); //retorna true ou false $(“p”).addClass(“bigger”); $(“p”).removeClass(“bigger”); // remove a classe passada via parâmetro $(“p”).removeClass(); // remove todas as classes $(“p”).toggleClass(“bigger”); // se o elemento tiver a classe bigger, o jQuery remove. Se não tiver, adiciona
  • 41.
    Visibilidade $(“p.autor”).hide(); [<p class=“autor” style=“display:none”>Cauê Fajoli</p>] $(“p.autor”).show(); [<p class=“autor” style=“display: normal”>Cauê Fajoli</p>] $(“p.autor”).toggle(); Alterna entre hide e show
  • 42.
  • 43.
    Template <html> <head> <title>jQuery na Prática</title> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos<span class=“js”>JavaScript</span></li> <li>DOM</li> <li>jQuery</li> </ul> <p>Data: <span class=“data”>21/01 à 25/01</span></p> <p>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html>
  • 44.
    Acessando text ehtml • html  Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML $(“p:first”).html(); [“Data: <span class=‘data’>21/01 à 25/01</span>”] • text  Recupera todo texto dentro do elemento selecionado, ignorando as tags HTML $(“p:first”).text(); [“Data: 21/01 à 25/01”]
  • 45.
    Definindo text $(“span.data”).text(“28/01 à01/02”); <span class=“data”>21/01 à 25/01</span><span class=“data”>28/01 à 01/02</span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 28/01 à 01/02 Horário: 19:00 às 22:40
  • 46.
    Definindo html $(“span.data”).html(“<u>28/01 à01/02</u>”); <span class=“data”>21/01 à 25/01</span><span class=“data”><u>28/01 à 01/02</u></span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 28/01 à 01/02 Horário: 19:00 às 22:40
  • 47.
    Inserindo html noDOM $(“ul”).append(“<li>Seletores jQuery</li>”); Insere elemento dentro do final da seleção $(“ul”).prepend(“<li>Seletores jQuery</li>”); Insere elemento dentro do inicio da seleção $(“ul”).before(“<h3>Conteúdo</h3>”); Insere elemento antes da seleção $(“ul”).after(“<h3>Data e Hora:</h3>”); Insere elemento após a seleção
  • 48.
    Append $(“ul”).append(“<li>Seletores jQuery</li>”); Cronograma • FundamentosJavaScript • DOM • jQuery • Seletores jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
  • 49.
    Prepend $(“ul”).prepend(“<li>Seletores jQuery</li>”); Cronograma • SeletoresjQuery • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
  • 50.
  • 51.
    After $(“ul”).after(“<h3>Data e Hora:</h3>”); Cronograma •Fundamentos JavaScript • DOM • jQuery Data e Hora: Data: 21/01 à 25/01 Horário: 19:00 às 22:40
  • 52.
  • 53.
    Como funciona <html> <head> <title>jQuery naPrática</title> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“js”>JavaScript</span></li> <li>DOM</li> <li>jQuery</li> </ul> <p>Data: <span class=“data”>21/01 à 25/01</span></p> <p>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html> Click! Possui handler? Possui handler? Possui handler? Possui handler?
  • 54.
    Document Ready <html> <head> <title>jQuery naPrática</title> <script src=“jquery.js”></script> <script> $(document).ready(function () { $(“p”).hide(); }); </script> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“js”>JavaScript</span></li> <li>DOM</li> <li>jQuery</li> </ul> <p>Data: <span class=“data”>21/01 à 25/01</span></p> <p>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html> Documento está pronto! Executa o handler
  • 55.
    Eventos de Mouse $(“p”).click(); //Disparano evento de click do mouse $(“p”).dblclick(); //Dispara com click duplo $(“p”).hover(); //Dispara quando mouse entra e/ou sai do elemento $(“p”).mousedown(); //Dispara quando o botão do mouse é pressionado $(“p”).mouseenter(); //Dispara quando o mouse entra no elemento $(“p”).mouseleave(); //Dispara quando o mouse sai do elemento $(“p”).mousemove(); //Dispara quando o mouse se move $(“p”).mouseup(); //Dispara quando ao término do click do mouse
  • 56.
    Click function esconder() { $(“p”).hide(); } $(“p”).click(esconder); Normalmenteutilizamos funções anônimas $(“p”).click(function () { $(“p”).hide(); });
  • 57.
    Hover .destacar { background: yellow; } $(“p”).hover(function() { $(this).addClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05
  • 58.
    Hover .destacar { background: yellow; } $(“p”).hover( function() { $(this).addClass(“destacar”);}, function () { $(this).removeClass(“destacar”);} ); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05
  • 59.
    Hover .destacar { background: yellow; } $(“p”).hover(function() { $(this).toggleClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05
  • 60.
    Eventos de Teclado $(“input”).keydown(); //Disparaao apertar a tecla $(“input”).keypress(); //Dispara ao pressionar a tecla $(“input”).keyup(); //Dispara ao soltar a tecla
  • 61.
    Eventos de Formulário $(“input”).blur(); //Disparaao input perder o foco $(“input”).change(); //Dispara quando um valor é alterado $(“input”).focus(); //Dispara quando um input recebe foco $(“input”).select(); //Dispara ao selecionar um texto, option, radio $(“input”).submit(); //Dispara submeter o formulário
  • 62.
    Objeto event $(“body”).keypress(function (event){ }); event.which; // código númerico da tecla pressionada event.preventDefault(); // evita a ação padrão do browser event.stopPropagation(); // evita propagação do evento no DOM
  • 63.
  • 64.
    Animações slide .slideUp([duração][,callback]); duração  Tempoda animação em milisegundos  Default 400 milisegundos  Aceita parâmetros “slow” (600ms) e “fast” (200ms) callback  Função que será executada após o término da animação
  • 65.
    slideUp, slideDown eslideToggle $(“p”).slideUp(“slow”); $(“p”).slideUp(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).slideDown(“fast”); $(“p”).slideToggle();
  • 66.
    Animações fade  Utilizaos mesmos parâmetros do slide $(“p”).fadeIn(“slow”); $(“p”).fadeIn(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).fadeOut(“fast”); $(“p”).fadeToggle();
  • 67.
  • 68.
    Adicionando funções customizadas $.fn.vazio= function () { var value = $(this).val(); if (value == “”) { return true; } else { return false; } }; $(“input”).vazio();
  • 69.
  • 70.
    XMLHttpRequest  Requisições assíncronaspor trás dos panos $.ajax({ url: ‘usuarios.php’, data: { id: “10”, acao: “editar” }, cache: false, type: “POST”, beforeSend: function () { // execução antes de realizar requisição }, success: function (data) { // execução em caso de sucesso }, error: function () { // execução em caso de erro } complete: function () { // execução ao terminar requisição } });
  • 71.
  • 72.
    Serializando formulários <form method=“post”action=“cadastro.php” id=“cadastro”> Nome: <input type=“text” name=“nome” id=“nome”> Email: <input type=“text” name=“email” id=“email”> Cpf: <input type=“text” name=“cpf” id=“cpf”> <button type=“submit”>Enviar</button> </form> $(“#cadastro”).serialize(); Retorna: nome=Caue&email=cauefajoli@gmail.com&cpf=123456789012 Caue cauefajoli@gmail.com 123456789012 Nome: Email: Cpf:
  • 73.