jQuery na Prática

Cauê [email protected]

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>

DOMhtml

head body

title h1#titulo p.autor ul

lililijQuery 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)

DOMhtml

body

h1 jQuery na Prática p.autor Cauê Fajoli p#rodape [email protected]

Seletores jQuery

jQuery$(“p”);

(Nome do elemento)

DOMhtml

body


Seletores jQuery

jQuery$(“p.autor”);

(Elemento + . + Classe)

DOMhtml

body


Seletores jQuery

jQuery$(“.autor”);

(Somente a classe)

DOMhtml

body


Seletores jQuery

jQuery$(“p#rodape”);

(Elemento + # + Id)

DOMhtml

body


Resultado da Seleção

jQuery$(“p”);

DOMp.autor Cauê Fajolip#rodape [email protected]

JavaScript[“<p class=‘autor’>Cauê Fajoli</p>”, “<p id=‘rodape’>[email protected]</p>”]

Resultado da Seleção

jQuery$(“h1, p#rodape”); $(“h1”, “p#rodape”);

DOMh1 jQuery na Práticap#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

HTMLConteúdo

CSSApresentação

JavaScriptInteraçã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>


</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/01Horário: 19:00 às 22:40


Data: 28/01 à 01/02Horá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>


Data: 21/01 à 25/01Horário: 19:00 às 22:40


Data: 28/01 à 01/02Horá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/01Horário: 19:00 às 22:40

Prepend

$(“ul”).prepend(“<li>Seletores jQuery</li>”);

Cronograma• Seletores jQuery• Fundamentos JavaScript• DOM• jQuery

Data: 21/01 à 25/01Horário: 19:00 às 22:40

Before

$(“ul”).before(“<h3>Conteúdo</h3>”);

CronogramaConteúdo• Fundamentos JavaScript• DOM• jQuery

Data: 21/01 à 25/01Horário: 19:00 às 22:40

After

$(“ul”).after(“<h3>Data e Hora:</h3>”);


Data e Hora:Data: 21/01 à 25/01Horário: 19:00 às 22:40

Eventos

Como funciona

<html>

<head>


</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/05Horário: 19:00 às 22:40Data: 21/01 à 25/05

Hover


$(“p”).hover( function () { $(this).addClass(“destacar”);}, function () { $(this).removeClass(“destacar”);});


Hover


$(“p”).hover(function () { $(this).toggleClass(“destacar”);});


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

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 protected]&cpf=123456789012

Caue

[email protected]

123456789012

Nome:Email:Cpf:

<h1>Muito Obrigado</h1>

<a href="mailto:[email protected]"></a>

<p>Cauê Fajoli</p>

jQuery na Prática - Cauê Fajoli

Technology

Transcript of jQuery na Prática - Cauê Fajoli