JQuery na Prática vitorfs.com/jquery-na-pratica. Vitor Freitas [email protected]...

jQuery na Prática

vitorfs.com/jquery-na-pratica

Vitor Freitas

[email protected]/vitorfs

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

Em 1995 nasce o JavaScript

VBSCRIPT

MOCHA

LIVESCRIPT

JAVASCRIPT

JavaScript hoje

Por que usar jQuery?

jQuery é uma camada de abstração

Use jQuery porque...

... é fácil

... é produtivo

... browsers são incompatíveis

... seus usuários utilizam browsers antigos

jQuery não é nenhuma panacéia

• Você ainda precisa de JavaScript

• jQuery é pesado

• Construa agora, melhore depois

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çõesfunction 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”>Vitor Freitas</p> <ul> <li>JS</li> <li>DOM</li> <li>jQuery</li> </ul> </body></html>

DOM

html

head body

title h1#titulo p.autor ul

lililijQuery na Prática

Curso de jQuery

Vitor Freitas

JS DOM jQuery

Preparando o Ambiente

http://jquery.com

Carregando jQuery

<script type=“text/javascript” src=“jquery-1.9.0.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 Vitor Freitas

p#rodape vitorfs.com/jquery-na-pratica

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 Vitor Freitas


JavaScript[“<p class=‘autor’>Vitor Freitas</p>”,

“<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”]

Resultado da Seleção

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

DOMh1 jQuery na Prática


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”>Vitor Freitas</p>]

$(“p.autor”).show();[<p class=“autor” style=“display: normal”>Vitor Freitas</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/01Horário: 19:00 às 22:40


Data: 28/01 à 01/02Horá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><span class=“data”><u>28/01 à 01/02</u></span>


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


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


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>DOM</li>

<li>jQuery</li>

</ul>



</body>

</html>

Click!

Possui handler?

Possui handler?

Possui handler?

Possui handler?

Timing<html>

<head>


<script src=“jquery.js”></script>

<script>

$(“p”).hide();

</script>

</head>

<body>

<h2>Cronograma</h2>

<ul>


<li>DOM</li>

<li>jQuery</li>

</ul>



</body>

</html>

Timing<html>

<head>



<script>

$(“p”).hide();

</script> Nenhum parágrafo no documento!

</head>

<body>

<h2>Cronograma</h2>

<ul>


<li>DOM</li>

<li>jQuery</li>

</ul>



</body>

</html> DOM está pronto!

Document Ready<html>

<head>



<script>

$(document).ready(function () {

$(“p”).hide();

});

</script>

</head>

<body>

<h2>Cronograma</h2>

<ul>


<li>DOM</li>

<li>jQuery</li>

</ul>



</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

Clickfunction 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.destacar {

background: yellow;

}

$(“p”).hover(

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

function () { $(this).removeClass(“destacar”);}

);


Hover.destacar {

background: yellow;

}

$(“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

}

});

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, textStatus, jqXHR)] [,dataType])

O método post do jQuery corresponde à seguinte implementação:

$.ajax({

type: "POST",

url: url,

data: data,

success: success,

dataType: dataType

});

$.post(“login.php”, { usuario: “vitorfs”, senha: “123456” });

$.post(“login.php”, $(“form”).serialize(), function () {

// Executa callback

});

get$.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])

O método get do jQuery corresponde à seguinte implementação:

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.get(“cidades.php”, { uf: “mg” }, function (data) {

$(“select”).html(data);

});

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

Vitor

[email protected]

123456789012

Nome:

Email:

Cpf:

Serializando em array$(“#cadastro”).serializeArray();

[

{

name = “nome”,

value = “vitor”

},

{

name = “email”,

value = “[email protected]”

},

{

name = “cpf”,

value = “123456789012”

}

]

JQuery na Prática vitorfs.com/jquery-na-pratica. Vitor Freitas [email protected]...

Documents

Transcript of JQuery na Prática vitorfs.com/jquery-na-pratica. Vitor Freitas [email protected]...