Скачать презентацию j Query na Prática vitorfs com jquery-na-pratica Vitor Скачать презентацию j Query na Prática vitorfs com jquery-na-pratica Vitor

2ba0d8e67f6d905a77b92b3d9c3a099d.ppt

  • Количество слайдов: 80

j. Query na Prática vitorfs. com/jquery-na-pratica j. Query na Prática vitorfs. com/jquery-na-pratica

Vitor Freitas vitorfs@gmail. com github. com/vitorfs Vitor Freitas vitorfs@gmail. com github. com/vitorfs

Agenda • • • Introdução ao Java. Script e j. Query Fundamentos de Java. Agenda • • • Introdução ao Java. Script e j. Query Fundamentos de Java. Script Document Object Model (DOM) Preparando o Ambiente Seletores j. Query Manipulando CSS Manipulando Conteúdo Eventos Animação Funções j. Query Ajax Formulários

Introdução ao Java. Script e j. Query Introdução ao Java. Script e j. Query

Em 1995 nasce o Java. Script VBSCRIPT MOCHA LIVESCRIPT JAVASCRIPT Em 1995 nasce o Java. Script VBSCRIPT MOCHA LIVESCRIPT JAVASCRIPT

Java. Script hoje Java. Script hoje

Por que usar j. Query? j. Query é uma camada de abstração Use j. Por que usar j. Query? j. Query é uma camada de abstração Use j. Query porque. . . é fácil. . . é produtivo. . . browsers são incompatíveis. . . seus usuários utilizam browsers antigos

j. Query não é nenhuma panacéia • Você ainda precisa de Java. Script • j. Query não é nenhuma panacéia • Você ainda precisa de Java. Script • j. Query é pesado • Construa agora, melhore depois

Fundamentos de Java. Script Fundamentos de Java. Script

Criando variáveis Dê nome aos dados var titulo = “j. Query na Prática”; • Criando variáveis Dê nome aos dados var titulo = “j. Query 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) Variáveis e dados • Tipagem fraca, dinâmica e implícita var numero = 100; (int) var titulo = “j. Query na Prática”; (string) var quantidade = 5. 7; (float) var erro = true; (boolean)

Funções function soma (num 1, num 2) { var resultado; resultado = num 1 Funções function soma (num 1, num 2) { var resultado; resultado = num 1 + num 2; return resultado; } • Palavra reservada: function • Nomes de funções normalmente em camel. Case • Linha termina em ponto e vírgula ( ; )

Funções globais do Java. Script alert(“Olá, mundo!”); void var resposta = confirm(“Confirmar exclusão do Funções globais do Java. Script 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 = “j. Query na Prática”; titulo. to. Lower. Case(); Funções de string var titulo = “j. Query na Prática”; titulo. to. Lower. Case(); “jquery na prática” titulo. to. Upper. Case(); “JQUERY NA PRÁTICA” titulo. char. At(2); “u” titulo. replace(“a”, “ 4”); titulo. split(“ ”); “j. Query n 4 Prátic 4” [“j. Query”, “na”, “Prática”]

Operações numéricas 10 + 5; 15 10 / 2; 5 parse. Int(“ 10 reais”); Operações numéricas 10 + 5; 15 10 / 2; 5 parse. Int(“ 10 reais”); 10 var num = 10; num. to. String(); “ 10”

Arrays var frutas = [“maçã”, “uva”, “abacaxi”]; (Inicializa um array na variável frutas) frutas[2]; 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) Document Object Model (DOM)

DOM <html> <head> <title>j. Query na Prática</title> </head> <body> <h 1 id=“titulo”>Curso de j. DOM j. Query na Prática Curso de j. Query

Vitor Freitas

  • JS
  • DOM
  • j. Query

DOM html head body title h 1#titulo p. autor j. Query na Prática Curso DOM html head body title h 1#titulo p. autor j. Query na Prática Curso de j. Query Vitor Freitas ul li li li JS DOM j. Query

Preparando o Ambiente Preparando o Ambiente

http: //jquery. com http: //jquery. com

Carregando j. Query <script type=“text/javascript” src=“jquery-1. 9. 0. min. js”></script> Carregando j. Query

Verificando se o j. Query está carregado <script> console. log(j. Query); //ou alert(j. Query); Verificando se o j. Query está carregado j. Query; Reference. Error: j. Query is not defined (j. Query não está carregado) j. Query; 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 j. Query!)

Seletores j. Query $(“h 1”); (Nome do elemento) DOM html body h 1 j. Seletores j. Query $(“h 1”); (Nome do elemento) DOM html body h 1 j. Query na Prática p. autor Vitor Freitas p#rodape vitorfs. com/jquery-na-pratica

Seletores j. Query $(“p”); (Nome do elemento) DOM html body h 1 j. Query Seletores j. Query $(“p”); (Nome do elemento) DOM html body h 1 j. Query na Prática p. autor Vitor Freitas p#rodape vitorfs. com/jquery-na-pratica

Seletores j. Query $(“p. autor”); (Elemento +. + Classe) DOM html body h 1 Seletores j. Query $(“p. autor”); (Elemento +. + Classe) DOM html body h 1 j. Query na Prática p. autor Vitor Freitas p#rodape vitorfs. com/jquery-na-pratica

Seletores j. Query $(“. autor”); (Somente a classe) DOM html body h 1 j. Seletores j. Query $(“. autor”); (Somente a classe) DOM html body h 1 j. Query na Prática p. autor Vitor Freitas p#rodape vitorfs. com/jquery-na-pratica

Seletores j. Query $(“p#rodape”); (Elemento + # + Id) DOM html body h 1 Seletores j. Query $(“p#rodape”); (Elemento + # + Id) DOM html body h 1 j. Query na Prática p. autor Vitor Freitas p#rodape vitorfs. com/jquery-na-pratica

Resultado da Seleção j. Query $(“p”); DOM p. autor Vitor Freitas p#rodape vitorfs. com/jquery-na-pratica Resultado da Seleção j. Query $(“p”); DOM p. autor Vitor Freitas p#rodape vitorfs. com/jquery-na-pratica Java. Script [“

Vitor Freitas

”, “

vitorfs. com/jquery-napratica

”]

Resultado da Seleção j. Query $(“h 1, p#rodape”); Errado! $(“h 1”, “p#rodape”); DOM h Resultado da Seleção j. Query $(“h 1, p#rodape”); Errado! $(“h 1”, “p#rodape”); DOM h 1 j. Query na Prática p#rodape vitorfs. com/jquery-na-pratica Java. Script [“Vitor Freitas”, “

vitorfs. com/jquery-napratica

”]

Espaço em branco $(“p#rodape”); Elemento p com id rodape $(“p #rodape”); Elemento com id 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 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 Seletores css também são válidos $(“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: 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 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

Manipulando CSS <p>Lorem ipsum dolor sit amet</p> $(”p”). css(”font-size”); // retorna o valor do Manipulando CSS

Lorem ipsum dolor sit amet

$(”p”). css(”font-size”); // retorna o valor do font-size do elemento p $(”p”). css(”font-size”, ” 12 px”); // define o font-size do elemento p para 12 px

Definindo múltiplos atributos Utilizando métodos encadeados $(“p”). css(“font-size”, “ 24 px”). css(“font-weight”, “bold”). css(“line-height”, Definindo múltiplos atributos Utilizando métodos encadeados $(“p”). css(“font-size”, “ 24 px”). css(“font-weight”, “bold”). css(“line-height”, “ 32 px”); Ou um map $(“p”). css({“font-size”: “ 24 px”, “font-weight”: “bold”, “line-height”: “ 32 px”});

Mas. . . vamos com calma HTML Conteúdo CSS Apresentação Java. Script Interação Mas. . . vamos com calma HTML Conteúdo CSS Apresentação Java. Script Interação

Interface CSS • DOM e CSS comunicam via IDs e Classes • Use. css() 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”). has. Class(“autor”); // retorna true ou false $(“p”). add. Class(“bigger”); $(“p”). Manipulando classes $(“p”). has. Class(“autor”); // retorna true ou false $(“p”). add. Class(“bigger”); $(“p”). remove. Class(“bigger”); // remove a classe passada via parâmetro $(“p”). remove. Class(); // remove todas as classes $(“p”). toggle. Class(“bigger”); // se o elemento tiver a classe bigger, o j. Query remove. Se não tiver, adiciona

Visibilidade $(“p. autor”). hide(); [<p class=“autor” style=“display: none”>Vitor Freitas</p>] $(“p. autor”). show(); [<p class=“autor” Visibilidade $(“p. autor”). hide(); [

Vitor Freitas

] $(“p. autor”). show(); [

Vitor Freitas

] $(“p. autor”). toggle(); Alterna entre hide e show

Manipulando Conteúdo Manipulando Conteúdo

Template <html> <head> <title>j. Query na Prática</title> </head> <body> <h 2>Cronograma</h 2> <ul> <li>Fundamentos Template j. Query na Prática Cronograma

  • Fundamentos Java. Script
  • DOM
  • j. Query

Data: 21/01 à 25/01

Horário: 19: 00 às 22: 40

Acessando text e html • html Recupera todo conteúdo dentro do elemento selecionado, inclusive Acessando text e html • html Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML $(“p: first”). html(); [“Data: 21/01 à 25/01”] • 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> class=“data”>28/01 01/02</span> Definindo text $(“span. data”). text(“ 28/01 à 01/02”); 21/01 à 25/01 class=“data”>28/01 01/02 Cronograma • Fundamentos Java. Script • DOM • j. Query Data: 21/01 à 25/01 28/01 01/02 Horário: 19: 00 às 22: 40

Definindo text $(“span. data”). text(“<u>28/01 à 01/02</u>”); <span class=“data”>21/01 à 25/01</span> class=“data”>< u> 28/01 Definindo text $(“span. data”). text(“28/01 à 01/02”); 21/01 à 25/01 class=“data”>< u> 28/01 à 01/02< /u> Cronograma • Fundamentos Java. Script • DOM • j. Query Data: 21/01 à 25/01 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> class=“data”><u>28/01 à 01/02</u></span> Definindo html $(“span. data”). html(“28/01 à 01/02”); 21/01 à 25/01 class=“data”>28/01 à 01/02 Cronograma • Fundamentos Java. Script • DOM • j. Query Data: 21/01 à 25/01 28/01 01/02 Horário: 19: 00 às 22: 40

Inserindo html no DOM $(“ul”). append(“<li>Seletores j. Query</li>”); Insere elemento dentro do final da Inserindo html no DOM $(“ul”). append(“

  • Seletores j. Query
    • ”); Insere elemento dentro do final da seleção $(“ul”). prepend(“
  • Seletores j. Query
    • ”); Insere elemento dentro do inicio da seleção $(“ul”). before(“Conteúdo”); Insere elemento antes da seleção $(“ul”). after(“Data e Hora: ”); Insere elemento após a seleção

    Append $(“ul”). append(“<li>Seletores j. Query</li>”); Cronograma • Fundamentos Java. Script • DOM • j. Append $(“ul”). append(“

  • Seletores j. Query
    • ”); Cronograma • Fundamentos Java. Script • DOM • j. Query • Seletores j. Query Data: 21/01 à 25/01 Horário: 19: 00 às 22: 40

    Prepend $(“ul”). prepend(“<li>Seletores j. Query</li>”); Cronograma • Seletores j. Query • Fundamentos Java. Script Prepend $(“ul”). prepend(“

  • Seletores j. Query
    • ”); Cronograma • Seletores j. Query • Fundamentos Java. Script • DOM • j. Query Data: 21/01 à 25/01 Horário: 19: 00 às 22: 40

    Before $(“ul”). before(“<h 3>Conteúdo</h 3>”); Cronograma Conteúdo • Fundamentos Java. Script • DOM • Before $(“ul”). before(“Conteúdo”); Cronograma Conteúdo • Fundamentos Java. Script • DOM • j. Query Data: 21/01 à 25/01 Horário: 19: 00 às 22: 40

    After $(“ul”). after(“<h 3>Data e Hora: </h 3>”); Cronograma • Fundamentos Java. Script • After $(“ul”). after(“Data e Hora: ”); Cronograma • Fundamentos Java. Script • DOM • j. Query Data e Hora: Data: 21/01 à 25/01 Horário: 19: 00 às 22: 40

    Eventos Eventos

    Como funciona <html> <head> Possui <title>j. Query na Prática</title> handler? </head> Possui <body> handler? Como funciona Possui j. Query na Prática handler? Possui handler? Possui Cronograma Possui handler?

      !
    • Fundamentos Java. Script
      • Click
    • DOM
    • j. Query

    Data: 21/01 à 25/01

    Horário: 19: 00 às 22: 40

    Timing <html> <head> <title>j. Query na Prática</title> <script src=“jquery. js”></script> <script> $(“p”). hide(); </script> Timing j. Query na Prática Cronograma

    • Fundamentos Java. Script
    • DOM
    • j. Query

    Data: 21/01 à 25/01

    Horário: 19: 00 às 22: 40

    Timing <html> <head> <title>j. Query na Prática</title> <script src=“jquery. js”></script> <script> $(“p”). hide(); </script> Timing j. Query na Prática Nenhum parágrafo no documento! Cronograma

    • Fundamentos Java. Script
    • DOM
    • j. Query

    Data: 21/01 à 25/01

    Horário: 19: 00 às 22: 40

    DOM está pronto!

    Document Ready <html> <head> <title>j. Query na Prática</title> <script src=“jquery. js”></script> <script> Executa o Document Ready j. Query na Prática Cronograma

    • Fundamentos Java. Script
    • DOM
    • j. Query

    Data: 21/01 à 25/01

    Horário: 19: 00 às 22: 40

    Documento está pronto!

    Eventos de Mouse $(“p”). click(); //Dispara no evento de click do mouse $(“p”). dblclick(); 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 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). add. Class(“destacar”); }); Hover. destacar { background: yellow; } $(“p”). hover(function () { $(this). add. Class(“destacar”); }); Data: 21/01 à 25/05 Horário: 19: 00 às 22: 40

    Hover. destacar { background: yellow; } $(“p”). hover( function () { $(this). add. Class(“destacar”); Hover. destacar { background: yellow; } $(“p”). hover( function () { $(this). add. Class(“destacar”); }, function () { $(this). remove. Class(“destacar”); } ); Data: 21/01 à 25/05 Horário: 19: 00 às 22: 40

    Hover. destacar { background: yellow; } $(“p”). hover(function () { $(this). toggle. Class(“destacar”); }); Hover. destacar { background: yellow; } $(“p”). hover(function () { $(this). toggle. Class(“destacar”); }); Data: 21/01 à 25/05 Horário: 19: 00 às 22: 40

    Eventos de Teclado $(“input”). keydown(); //Dispara ao apertar a tecla $(“input”). keypress(); //Dispara ao 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 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 Objeto event $(“body”). keypress(function (event) { }); event. which; // código númerico da tecla pressionada event. prevent. Default(); // evita a ação padrão do browser event. stop. Propagation(); // evita propagação do evento no DOM

    Animação Animação

    Animações slide. Up([duração][, callback]); duração – Tempo da animação em milisegundos – Default 400 Animações slide. Up([duração][, callback]); duração – Tempo da animação em milisegundos – Default 400 milisegundos – Aceita parâmetros “slow” (600 ms) e “fast” (200 ms) callback – Função que será executada após o término da animação

    slide. Up, slide. Down e slide. Toggle $(“p”). slide. Up(“slow”); $(“p”). slide. Up(1000, function slide. Up, slide. Down e slide. Toggle $(“p”). slide. Up(“slow”); $(“p”). slide. Up(1000, function () { alert(“Concluiu a animação!”); }); $(“p”). slide. Down(“fast”); $(“p”). slide. Toggle();

    Animações fade • Utiliza os mesmos parâmetros do slide $(“p”). fade. In(“slow”); $(“p”). fade. Animações fade • Utiliza os mesmos parâmetros do slide $(“p”). fade. In(“slow”); $(“p”). fade. In(1000, function () { alert(“Concluiu a animação!”); }); $(“p”). fade. Out(“fast”); $(“p”). fade. Toggle();

    Funções j. Query Funções j. Query

    Adicionando funções customizadas $. fn. vazio = function () { var value = $(this). Adicionando funções customizadas $. fn. vazio = function () { var value = $(this). val(); if (value == “”) { return true; } else { return false; } }; $(“input”). vazio();

    Ajax Ajax

    XMLHttp. Request • Requisições assíncronas por trás dos panos $. ajax({ url: ‘usuarios. php’, XMLHttp. Request • Requisições assíncronas por trás dos panos $. ajax({ url: ‘usuarios. php’, data: { id: “ 10”, acao: “editar” }, cache: false, type: “POST”, before. Send: 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 } });

    load Permite especificar um elemento para receber a resposta e uma função de callback load Permite especificar um elemento para receber a resposta e uma função de callback $('#resultado'). load(‘usuarios. php‘); // A resposta da requisição à página usuarios. php é inserida dentro do elemento #resultado $('#resultado'). load(‘usuarios. php‘, function () { // Executa após terminar a requisição }); $('#resultado'). load(‘usuarios. php‘, { id: 10 } function () { // Executa após terminar a requisição });

    post $. post(url [, data] [, success(data, text. Status, jq. XHR)] [, data. Type]) post $. post(url [, data] [, success(data, text. Status, jq. XHR)] [, data. Type]) O método post do j. Query corresponde à seguinte implementação: $. ajax({ type: "POST", url: url, data: data, success: success, data. Type: data. Type }); $. post(“login. php”, { usuario: “vitorfs”, senha: “ 123456” }); $. post(“login. php”, $(“form”). serialize(), function () { // Executa callback });

    get $. get(url [, data] [, success(data, text. Status, jq. XHR)] [, data. Type]) get $. get(url [, data] [, success(data, text. Status, jq. XHR)] [, data. Type]) O método get do j. Query corresponde à seguinte implementação: $. ajax({ url: url, data: data, success: success, data. Type: data. Type }); $. get(“cidades. php”, { uf: “mg” }, function (data) { $(“select”). html(data); });

    Formulários Formulários

    Serializando formulários <form method=“post” action=“cadastro. php” id=“cadastro”> Nome: <input type=“text” name=“nome” id=“nome”> Email: <input Serializando formulários

    Nome: Email: Cpf:
    Nome: Vitor Email: vitorfs@gmail. com Cpf: 123456789012 $(“#cadastro”). serialize(); Retorna: nome=Vitor&email=vitorfs@gmail. com&cpf=123456789012

    Serializando em array $(“#cadastro”). serialize. Array(); [ { name = “nome”, value = “vitor” Serializando em array $(“#cadastro”). serialize. Array(); [ { name = “nome”, value = “vitor” }, { name = “email”, value = “vitorfs@gmail. com” }, { name = “cpf”, value = “ 123456789012” } ]