introdução ao jquery e ajax
DESCRIPTION
TRANSCRIPT
Introdução ao JQuery e AJAXProf: Sérgio Souza Costa
Write Less
DO MORE
Sobre mim
Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)
https://sites.google.com/site/profsergiocosta/home
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta
http://www.slideshare.net/skosta/presentations?order=popular
"Considered a “toy” language by serious web developers for most of its lifetime, Java-Script has regained its prestige in the past few years as a result of the renewed interest in Rich Internet Applications and Ajax technologies".
John Resig - jQuery in Action
O que é JQuery ?
O que é JQuery ?
HTML/ BrowserJavaScript
O que é JQuery ?
HTML/ BrowserJavaScript DOM/
BOM
O que é JQuery ?
HTML/ BrowserJavaScript DOM/
BOMJQuery
O que é JQuery ?
HTML/ BrowserJavaScript DOM/
BOMJQuery
Independente de browser
O que é JQuery ?
HTML/ BrowserJavaScript DOM/
BOMJQuery
Independente de browser
JQuery é uma biblioteca JavaScript, ou seja, um conjunto de objetos e funções em um arquivo js.
Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery
Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery
ou diretamente:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery
ou diretamente:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
ou baixem o hello_jquery.rar, no site
Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery
ou diretamente:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
ou baixem o hello_jquery.rarO "min" significa que este arquivo foi "minificado", ou seja, eliminado todos os espaçamentos, tabs ...
Hello World
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")
})</script></head><body></body></html>
equivalente ao window.onload
Hello World
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")
})</script></head><body></body></html>
equivalente ao window.onload
Observem o uso de funções como parâmetros e de funções anônimas.
Hello World - 2 - Atalho "document ready"<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >
$( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")
})
</script></head><body></body></html>
equivalente ao window.onload
Hello World - 3 - Sem "innerHtml"
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ $ ("<p/>", {
text: "Ola Mundo !!"}).appendTo("body")
})</script></head><body></body></html>
1. Cria a tag <p>2. Atribui a ela o texto3. Adiciona a "body"
Hello World - 3 - Sem "innerHtml"
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ $ ("<p/>", {
text: "Ola Mundo !!"}).appendTo("body")
})</script></head><body></body></html>
1. Cria a tag <p>2. Atribui a ela o texto3. Adiciona a "body"
Matado a ansiedade, vamos entender melhor isso ...
Para quê ?
Para quê ?
Produtividade = Poucas linhas de códigos
Para quê ?
Produtividade = Poucas linhas de códigos
Cross browser
Para quê ?
Produtividade – Poucas linhas de códigos
Cross browser
DOM
Para quê ?
Produtividade – Poucas linhas de códigos
Cross browser
DOM CSS
Para quê ?
Produtividade – Poucas linhas de códigos
Cross browser
DOMCSS
AJAX
Para quê ?
Produtividade – Poucas linhas de códigos
Cross browserDOM
CSS
AJAX
PLUGINS
Jquery
● Released Jan. 2006● Foco na manipulação de DOM● Suporte a Events, Ajax e Animações● Código sucinto, arquivos pequenos● Extensível via plugin● Cross browser (se comporta da mesma maneira
sobre diferentes browser)
Ranking das bibliotecas JavaScript
Jquery + Programação Funcional
JQuery foi desenvolvido usando muitas das suas características como linguagem de programação funcional
Funções como parâmetros
Funções como retorno
Jquery + Programação Funcional
JQuery foi desenvolvido usando muitas das suas características como linguagem de programação funcional
Funções como parâmetros
Funções como retorno
Funções anônimas
Jquery + Programação Funcional
JQuery foi desenvolvido usando muitas das suas características como linguagem de programação funcional
Funções como parâmetros
Funções como retorno
Funções anônimas
Closures
“Thank God for closures!”. John Resig
Alguns slides a partir daqui foram baseados em:jQuery Essentials by Marc Grabanskihttp://marcgrabanski.com/presentations/jquery-essentials.pdf
Mais fácil escrever do que códigos JavaScript puros.
Ocultando divs com JavaScript e DOMdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}
Ocultando divs com JavaScript e DOMdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}
Ocultando divs com JQuery$(“div”).hide();
1. Selecionava todos <div>2. Para cada um3. Mudava o estilo, css
Ocultando divs com JavaScript e DOMdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}
Ocultando divs com JQuery$(“div”).hide();
Filosofia JQuery
Filosofia JQuery
#1. PROCURE algo no HTML
Filosofia JQuery
#1. PROCURE algo no HTML
#2. FAÇA algo com ele
PROCURE
$("div")
PROCURE
$("div") Procurando elementos...
Use o seletor $()
Use o seletor $()
$(“#myId”)
Use o seletor $()
$(“#myId”) $(“.myClass”)
Use o seletor $()
$(“#myId”) $(“.myClass”)
Use o seletor $()
$(“#myId”) $(“.myClass”) $(“table”)
Exemplos de seletores
Exemplos de seletores
$(“#content”) todos elementos com id content
Exemplos de seletores
$(“#content”) todos elementos com id content
$(“li:first”) o primeiro item de uma lista
Exemplos de seletores
$(“#content”) todos elementos com id content
$(“li:first”) o primeiro item de uma lista
$(“a[target=_blank]”) todos links onde target “_blank”
Exemplos de seletores
$(“#content”) todos elementos com id content
$(“li:first”) o primeiro item de uma lista
$(“a[target=_blank]”) todos links onde target “_blank”
$(“form[id^=step]”) todos "forms" onde id começa com “step”
Exemplos de seletores
$(“#content”) todos elementos com id content
$(“li:first”) o primeiro item de uma lista
$(“a[target=_blank]”) todos links onde target “_blank”
$(“form[id^=step]”) todos "forms" onde id começa com “step”
$("img", cell) todos as imagens dentro de cell
Seleção com composição:
$(“#myId, .myClass, table”)
Seleção com composição:
Procure
$(“div”)
Procure
$(“div”).hide()
Faça
Vamos ver ....
teste_jquery_1.html
Encadeamento
Encadeamento
$("#div_1").addClass("redbox")
Encadeamento
$("#div_1").addClass("redbox").fadeOut();
Encadeamento
$("#div_1").addClass("redbox").fadeOut();
Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos.
Encadeamento
$("#div_1").addClass("redbox").fadeOut();
Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos.
Testando .....
Encadeamento
$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');
Encadeamento
$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');
$('#content') .find('h3') .eq(2) .html('o novo texto do terceiro h3!');
Formatando
Salvando seleções
var $divs = $('div');
Salvando seleções
var $divs = $('div');$divs.addClass(“redbox”)
Salvando seleções
var $divs = $('div');$divs.addClass(“redbox”)
O JQuery não salva as consultas, se for precisar do resultado dessa consulta, salve-a em uma variável
Salvando seleções
var $divs = $('div');$divs.addClass(“redbox”)
Não existe nada especial no nome $divs, o $ é apenas uma notação para diferenciar o objetos JQuery
O JQuery não salva as consultas, se for precisar do resultado dessa consulta, salve-a em uma variável
Checando o retorno de uma seleção
Uma seleção sempre retornara um objeto, então o teste a seguir será sempre verdadeiro:
if ($('div.foo')) { ... }
Checando o retorno de uma seleção
Uma seleção sempre retornara um objeto, então o teste a seguir será sempre verdadeiro:
if ($('div.foo')) { ... }
Ao invés disso, testem o tamanho do objeto:
if ($('div.foo').length) { ... }
Refinando & Filtrando Seleções
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // elementos h1 que não têm a classe bar
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // elementos h1 que não têm a classe bar
$('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // elementos h1 que não têm a classe bar
$('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current
$('ul li').first(); // somente o primeiro item da lista não ordenada
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // elementos h1 que não têm a classe bar
$('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current
$('ul li').first(); // somente o primeiro item da lista não ordenada
$('ul li').eq(5); // o sexto item da lista
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // elementos h1 que não têm a classe bar
$('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current
$('ul li').first(); // somente o primeiro item da lista não ordenada
$('ul li').eq(5); // o sexto item da lista
Oculte o primeiro item das listas do arquivo teste_jquery_1.html
Seletores relacionados à formulários
:button Seleciona elementos do tipo <button>
:checkbox Seleciona inputs com type="checkbox"
:checked Seleciona inputs selecionados
:disabled Seleciona elementos de formulário desabilitados
:enabled Seleciona elementos de formulário habilitados
Seletores relacionados à formulários
:input Seleciona <input>, <textarea>, e elementos <select>
:radio Selecionam inputs com type="radio"
:selected Seleciona inputs que estão selecionados
:submit Seleciona inputs com type="submit"
:text Seleciona inputs com type="text"...
Um Método, Diferentes usos
Um Método, Diferentes usos
$(...).html();
Um Método, Diferentes usos
$(...).html();
$(...).html(“<p>hello</p>”);
Um Método, Diferentes usos
$(...).html();
$(...).html(“<p>hello</p>”);
$(...).html(function(i){ return “<p>hello “ + i + “</p>”;});
Um Método, Diferentes usos
$(...).html();
$(...).html(“<p>hello</p>”);
$(...).html(function(i){ return “<p>hello “ + i + “</p>”;}); Lembram da
sobrecarga ?
Este método é um exemplo de "sobrecarga".
Getters & Setters
O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome do método usado para obter um valor
Getters & Setters
O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome do método usado para obter um valor.
O método $.fn.html usado como setter$('h1').html('olá mundo');
Getters & Setters
O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome do método usado para obter um valor.
O método $.fn.html usado como setter$('h1').html('olá mundo');
O método html usado como getter$('h1').html();
JQuery MétodosMovendoappend(), appendTo(), before(), after(),
Atributoscss(), attr(), html(), val(), addClass()
Eventosbind(), trigger(), unbind(), live(), click()
Travessiafind(), is(), prevAll(), next(), hasClass()
Efeitosshow(), fadeOut(), toggle(), animate()
Ajaxget(), getJSON(), post(), ajax(), load()
Método $()
Método $()
Podemos passar uma função para o método $(), que será executada após o HTML ser carregado.
Método $()
Podemos passar uma função para o método $(), que será executada após o HTML ser carregado.
$(function(){
});
Método $()
Podemos passar uma função para o método $(), que será executada após o HTML ser carregado.
$(function(){ // código será executado após o carregamento do DOM });
Método $()
Podemos passar uma função para o método $(), que será executada após o HTML ser carregado.
$(function(){ // código será executado após o carregamento do DOM });
Nota: Esse é um atalho para:
$(document).ready(function(){ });
Método $()
Usando funções anônimas:
$(function() { alert('pronto!'); });
Método $()
Usando funções anônimas:
$(function() { alert('pronto!'); });
Função nomeada
f = function () {alert('pronto!'); }$(f);
Movendo elementos
Pegue um elemento com ID foo e adicione algum HTML.
$(“#foo”)
<html><body><div>jQuery</div> <div id=”foo”>example</div></body></html>
Movendo elementos
Pegue um elemento com ID foo e adicione algum HTML.
$(“#foo”).append(“<p>test</p>”);
<html><body><div>jQuery</div> <div id=”foo”>example</div></body></html>
Movendo elementos
Pegue um elemento com ID foo e adicione algum HTML.
$(“#foo”).append(“<p>test</p>”);
<html><body><div>jQuery</div> <div id=”foo”>example<p>test</p></div></body></html>
Movendo elementos
Move parágrafos para o elemento com id “foo”
$(“p”)
<html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body></html>
Movendo elementos
Move parágrafos para o elemento com id “foo”
$(“p”).appendTo(“#foo”);
<html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body></html>
Movendo elementos
Move parágrafos para o elemento com id “foo”
$(“p”).appendTo(“#foo”);
<html><body><div>jQuery</div><div id=”foo”>example <p>moving</p> <p>paragraphs</p></div></body></html>
Copiando elementos
Copiando parágrafos para o elemento com id “foo”
$(“p”)
<html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body></html>
Copiando elementos
Copiando parágrafos para o elemento com id “foo”
$(“p”).clone()
<html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body></html>
Copiando elementos
Copiando parágrafos para o elemento com id “foo”
$(“p”).clone().appendTo(“#foo”);
<html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body></html>
Copiando elementos
Copiando parágrafos para o elemento com id “foo”
$(“p”).clone().appendTo(“#foo”);
<html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example <p>moving</p> <p>paragraphs</p></div></body></html>
Criando elementos
Criando elementos
Copiando parágrafos para o elemento com id “foo”
$(“<p>”, {text:"teste"})
<html><body><div id=”foo”> </div></body></html>
Criando elementos
Copiando parágrafos para o elemento com id “foo”
$(“<p>”, {text:"teste"}).appendTo(“#foo”);
<html><body><div id=”foo”> </div></body></html>
Criando elementos
Copiando parágrafos para o elemento com id “foo”
$(“<p>”, {text:"teste"}).appendTo(“#foo”);
<html><body><div id=”foo”><p>teste</p> </div></body></html>
Atributos
Atributos
Get
.attr(‘id’)
Atributos
Get
.attr(‘id’)
.html()
Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)
Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)
.width()
Set
.attr(‘id’, ‘foo’)
Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)
.width()
Set
.attr(‘id’, ‘foo’)
.html(“<p>hi</p>”)
Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)
.width()
Set
.attr(‘id’, ‘foo’)
.html(“<p>hi</p>”)
.css(“fontSize”, “100px”)
Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)
.width()
Set
.attr(‘id’, ‘foo’)
.html(“<p>hi</p>”)
.css(“fontSize”, “100px”)
.width(60)
Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)
.width()
Set
.attr(‘id’, ‘foo’)
.html(“<p>hi</p>”)
.css(“fontSize”, “100px”)
.width(60)
Largura do primeiro elemento
Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)
.width()
Set
.attr(‘id’, ‘foo’)
.html(“<p>hi</p>”)
.css(“fontSize”, “100px”)
.width(60)
Largura do primeiro elemento
Largura de todos elemento
Atributos
Atributos
Seta a borda para 1px black
$(...).css(“border”, “1px solid black”);
Atributos
Seta a borda para 1px black
$(...).css(“border”, “1px solid black”);
Seta varias propriedades CSS.$(...).css({ “background”: “yellow”, “height”: “400px”});
Atributos
Seta a borda para 1px black
$(...).css(“border”, “1px solid black”);
Seta varias propriedades CSS.$(...).css({ “background”: “yellow”, “height”: “400px”});
Nota: $.fn.css é útil, mas, ele geralmente deve ser evitado como um setter. Pois você não quer informação de apresentação no seu JavaScript. Escreva regras CSS para classes que descrevam os vários estados visuais, e então mude a classe no elemento que você quer afetar.
Atributos
Trabalhando com classes
$h1.addClass('big');
$h1.removeClass('big');
Atributos
Trabalhando com classes
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');Adiciona se ainda não foi adiciona e remove caso contrário.
Atributos
Trabalhando com classes
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('big')) { ... }
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:<div><p>I’m new</p></div>
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:<div><p>I’m new</p></div>
Seta o atributo “checked” para checked.$(“:checkbox”).attr(“checked”,”checked”);
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:<div><p>I’m new</p></div>
Seta o atributo “checked” para checked.$(“:checkbox”).attr(“checked”,”checked”);
Seta o value para 3.$(...).val(“3”);
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:<div><p>I’m new</p></div>
Seta o atributo “checked” para checked.$(“:checkbox”).attr(“checked”,”checked”);
Seta o value para 3.$(...).val(“3”);
Usado para pegar um valor de um elemento de um formulário. Ex. text.
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:<div><p>I’m new</p></div>
Seta o atributo “checked” para checked.$(“:checkbox”).attr(“checked”,”checked”);
Seta o value para 3.$(...).val(“3”);
Pega o valor.$(...).val();
Eventos
Eventos
Quando o botão for clicado, faça algo.
$(“button”).click(function(){ facaAlgo();});
Eventos
Quando o botão for clicado, faça algo.
$(“button”).click(function(){ facaAlgo();});
Usando o método bind:
$("button").bind('click', function() { facaAlgo();});
Eventos
Hover, funções para o mouse in e mouseout
$("span").hover( function () { $(this).css ("color", "red"); }, function () { $(this).css ("color", "black"); })
Funções utilitárias
.trim
$.each
Remove espaços em branco à esquerda e à direita.
$.trim(" muitos espaços em branco extras ");// returns "muitos espaços em branco extras"
Itera sobre arrays e objetos.$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {console.log('elemento ' + idx + 'é ' + val);});$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {console.log(k + ' : ' + v);});
Funções utilitárias
$.inArray var meuArray = [ 1, 2, 3, 5 ];if ($.inArray(4, meuArray) !== -1) {console.log('encontrei!');}
Exercício 1
Baixem o arquivo Diga_incompleto, e insiram os códigos que permitirá o seguinte comportamento.
Exercício 2
Gerar tabela dinamicamente
Exercício e
Façam uma calculadora usando o que foi discutido até aqui. Obs: para mostrar ou ocultar um objeto, use show() e hide ()
Caso o usuário entre com valores inválidos
JQuery Parte 2
JQuery MétodosMovendoappend(), appendTo(), before(), after(),
Atributoscss(), attr(), html(), val(), addClass()
Eventosbind(), trigger(), unbind(), live(), click()
Travessiafind(), is(), prevAll(), next(), hasClass()
Efeitosshow(), fadeOut(), toggle(), animate()
Ajaxget(), getJSON(), post(), ajax(), load()
JQuery MétodosMovendoappend(), appendTo(), before(), after(),
Atributoscss(), attr(), html(), val(), addClass()
Eventosbind(), trigger(), unbind(), live(), click()
Travessiafind(), is(), prevAll(), next(), hasClass()
Efeitosshow(), fadeOut(), toggle(), animate()
Ajaxget(), getJSON(), post(), ajax(), load()
Travessia
Travessia
Uma vez que você tem uma seleção do jQuery, você pode encontrar outros elementos usando sua seleçãocomo ponto de início.
Travessia
Uma vez que você tem uma seleção do jQuery, você pode encontrar outros elementos usando sua seleçãocomo ponto de início.
$('h1').prevAll();$('h1').next('p');$('div:visible').parent();$('input[name=first_name]').closest('form');$('#myList').children();$('li.selected').siblings();$('h1').find('p');
Travessia
Uma vez que você tem uma seleção do jQuery, você pode encontrar outros elementos usando sua seleçãocomo ponto de início.
$('h1').prevAll();$('h1').next('p');$('div:visible').parent();$('input[name=first_name]').closest('form');$('#myList').children();$('li.selected').siblings();$('h1').find('p');
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”)<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).prevAll()<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).prevAll().andSelf();<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”)<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).siblings();<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).siblings().andSelf();<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”)<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).parent();<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“table”);<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Travessia
Pegue as celulas anteriores a #myCell.
$(“table”).find ("td");<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>
Efeitos/Animação
Efeitos/Animação
Tipos de efeitos
Efeitos/Animação
Tipos de efeitos
#1. Hide e Show
Efeitos/Animação
Tipos de efeitos
#1. Hide e Show
#2. Fade In e Out
Efeitos/Animação
Tipos de efeitos
#1. Hide e Show
#2. Fade In e Out
#3. Slide Up e Down
Efeitos/Animação
Hide e show
$(...).click(function(){ $(...).hide();});
Efeitos/Animação
Hide e show
$(...).click(function(){ $(...).hide();});
$(...).hide("slow"); ou $(...).hide(5000);
Efeitos/Animação
Hide e show
$(...).click(function(){ $(...).hide();});
$(...).hide("slow"); ou $(...).hide(5000);
$(...).show() $(...).show("slow") $(...).show(500);
Efeitos/Animação
Para cada click, slide up / slide down um elemento
$(...).click(function(){ $(...).slideToggle();});
Efeitos/Animação
Para cada click, slide up / slide down um elemento
$(...).click(function(){ $(...).slideToggle();});
Efeitos/Animação
Para cada click, slide up / slide down um elemento
$(...).click(function(){ $(...).slideToggle();});
Animar elementos é alterar a apresentação, atributos CSS. Essa animação irá durar 1 segundo. $(...).animate({ "fontSize": "400%" }, 1000);
Efeitos/Animação
Para cada click, slide up / slide down um elemento
$(...).click(function(){ $(...).slideToggle();});
Animar elementos é alterar a apresentação, atributos CSS. Essa animação irá durar 1 segundo. $(...).animate({ "fontSize": "400%" }, 1000);
Fade to 30% de opacidade$(...).fadeTo(500, 0.3);
Efeitos/Animação
$.fn.show Mostra o elemento selecionado.
$.fn.hide Esconde o elemente selecionado.
$.fn.fadeIn Anima a opacidade dos elementos selecionados para 100%.
$.fn.fadeOut Anima a opacidade dos elementos selecionados para 0%.
Efeitos/Animação
$.fn.slideDown Mostra os elementos selecionados com um deslizamento vertical.
$.fn.slideUp Esconde os elementos selecionados com um deslizamento vertical.
$.fn.slideToggle Mostra ou esconde os elementos selecionados com um deslizamento vertical, dependendo se os elementos atualmente estão visíveis.
Efeitos/Animação
Experimentem os métodos com o código abaixo...<button id="b1">Click</button><p id="p1">ANIMADO</p>...
Efeitos/Animação
Usem os recursos de animação para mostrar e ocultar as mensagens de erro da calculadora.
Extendendo JQuery
Plugins
$.fn.OlaMundo = function(){return this.each(function(){ // faça algo com a seleção});}
Plugins
$.fn.OlaMundo = function(){return this.each(function(){ $(this).html("Plugin Ola Mundo");});}
$(“div”)<html><body><div></div><div></div></body></html>
Plugins
$.fn.OlaMundo = function(){return this.each(function(){ $(this).html("Plugin Ola Mundo");});}
$(“div”).OlaMundo();<html><body><div>Plugin Ola Mundo</div><div>Plugin Ola Mundo</div></body></html>
Plugins
Existem diversos plugins, com diferentes objetivos.
http://plugins.jquery.com/
Vocês podem fazer o seu próprio ou estender os já existentes.
Exercício
Façam um programa que realce uma seleção:
texto a realçar
$("span").realce()
texto a realçar
Mais exercicios
Baixem o jogo quebra cabeça e mapeiem o seu código para JQuery:
AJAX
Modelo classico
AJAX
O que é Ajax ?
Assyncronous
O que é Ajax ?
Assyncronous JavaScript
O que é Ajax ?
Assyncronous JavaScript And
XML
O que é Ajax ?
Assyncronous
JavaScript And
XML
O que é Ajax ?
Assyncronous
JavaScript And
XML+ XHTML+ JSON+ CSS
O que é AJAX ?
Não é uma linguagem
O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
XHtmllRequest
O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
XHtmllRequest + JavaScript
O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
XHtmllRequest + JavaScript + DOM
Meu primeiro AJAX
Criar uma requisição:
function GetXmlHttpObject() {var xmlHttp=null;try {// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();} catch (e) {// Internet Explorer try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}
Meu primeiro AJAX
Criar uma requisição:
function GetXmlHttpObject() {var xmlHttp=null;try {// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();} catch (e) {// Internet Explorer try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}
Só existo por causa do IE
Meu primeiro AJAX
Função que é chamado após a requisição for concluída. Callback.
function stateChanged() {if (xmlHttp.readyState==4) {document.getElementById("a1").innerHTML = xmlHttp.responseText;}}
Meu primeiro AJAX
Função que "monta" a requisição.
function olamundo() {xmlHttp=GetXmlHttpObject();if (xmlHttp==null) {alert ("Your browser does not support AJAX!");return;}xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET","ajax_test.htm",true);xmlHttp.send(null);}
window.onload = olamundo()
Muito Complicado ?
Ajax no JQuery
Lembram do Hello World do JQuery ?
$ ("#a1")
</html></head><body><div id="a1"></div> </body></html>
Lembram do Hello World do JQuery ?
$ ("#a1").html ("<p>Ola Mundo</p>")
</html></head><body><div id="a1"><p>Ola Mundo</p></div> </body></html>
Hello World Ajax - JQuery
Dado uma pagina ajax_test.htm
<p>Ola mundo</p>
</html></head><body><div id="a1"></div> </body></html>
Hello World Ajax - JQuery
Dado uma pagina ajax_test.htm
$.ajax({ url: "ajax_test.htm", success: function(response){ $("#a1").html(response); }})
<p>Ola mundo</p>
</html></head><body><div id="a1"><p>Ola Mundo</p></div> </body></html>
Hello World Ajax - JQuery - V 2
Dado uma pagina ajax_test.htm
$.get("ajax_test.htm", function (response) { $("#a1").html(response); })
<p>Ola mundo</p>
</html></head><body><div id="a1"><p>Ola Mundo</p></div> </body></html>
Enviando dados para o servidor
Calculadora no servidor
<?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; echo $n1+$n2;?>
Enviando dados para o servidor
Calculadora no servidor
<?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; echo $n1+$n2;?>
$(function () { $("#button").click ( function () { $.get("calc.php", {n1: $("#n1").val(), n2: $("#n2").val() }, function (response) { $("#res").html(response); }) }) });
Recebendo dados do servidor: JSONCalculadora no servidor
<?php$n1 = $_REQUEST['n1'];$n2 = $_REQUEST['n2'];$res = array ( 'res' => $n1+$n2,);$output = json_encode($res);echo $output;
$("#button").click ( function () {$.getJSON("calc_json.php", {n1: $("#n1").val(), n2: $("#n2").val() }, function (response) { $("#res").html(response.res) })})});
Recebendo e enviando: JSONCalculadora no servidor<?php$data = json_decode ($_REQUEST['data'], true);$res = array ( 'res' => $data['n1'] + $data['n2']);$output = json_encode($res);echo $output ?>
$("#button").click ( function () {$.getJSON("calc_json2.php", {data: JSON.stringify ({n1:$("#n1").val(), n2:$("#n2").val() }) }, function (response) {$("#res").html(response.res)})})
É só isso ?
É só isso ?YES. Agora é JavaScript e criatividade.
É só isso ?YES. Agora é JavaScript e criatividade.
No final da aula de PHP, tem outro exemplo de ajax com o php.