SlideShare uma empresa Scribd logo
1 de 211
Baixar para ler offline
Write Less

DO MORE
Introdução ao
JQuery e AJAX
Prof: Sérgio Souza Costa
Sobre mim
Sérgio Souza Costa
Professor - UFMA
Doutor em Computação Aplicada (INPE)
prof.sergio.costa@gmail.com
https://sites.google.com/site/profsergiocosta/home
http://www.slideshare.net/skosta/presentations?order=popular
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta
"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 ?

JavaScript

HTML/
Browser
O que é JQuery ?

JavaScript

DOM/
BOM

HTML/
Browser
O que é JQuery ?

JavaScript

JQuery

DOM/
BOM

HTML/
Browser
O que é JQuery ?

JavaScript

JQuery

DOM/
BOM

Independente de browser

HTML/
Browser
O que é JQuery ?

JavaScript

JQuery

Independente de

DOM/
BOM

HTML/
Browser

JQuery é uma
biblioteca JavaScript,
ou seja, um conjunto
de
browser 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.rar

O "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" >
equivalente ao
$(document).ready(
window.onload
function(){
$ ("body").html ("<p>Ola Mundo !!</p>")
})
</script>
</head>
<body>
</body>
</html>
Hello World

Observem o uso de
funções como
parâmetros e de
funções anônimas.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" >
equivalente ao
$(document).ready(
window.onload
function(){
$ ("body").html ("<p>Ola Mundo !!</p>")
})
</script>
</head>
<body>
</body>
</html>
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/>", {
1. Cria a tag <p>
text: "Ola Mundo !!"
2. Atribui a ela o texto
}).appendTo("body")
3. Adiciona a "body"
})
</script>
</head>
<body>
</body>
</html>
Hello World - 3 - Sem "innerHtml"
Matado a
ansiedade, vamos
entender melhor
isso ...

<!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/>", {
1. Cria a tag <p>
text: "Ola Mundo !!"
2. Atribui a ela o texto
}).appendTo("body")
3. Adiciona a "body"
})
</script>
</head>
<body>
</body>
</html>
Para quê ?
Para quê ?

Produtividade = Poucas linhas de códigos
Para quê ?

Cross browser
Produtividade = Poucas linhas de códigos
Para quê ?
DOM
Cross browser
Produtividade – Poucas linhas de códigos
Para quê ?

CSS

DOM

Cross browser
Produtividade – Poucas linhas de códigos
Para quê ?
CSS
DOM

Cross browser
Produtividade – Poucas linhas de códigos

AJAX
Para quê ?

DOM

PLUGINS
Cross browser

Produtividade – Poucas linhas de códigos

AJAX

CSS
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

Closures

Funções como retorno
Funções anônimas

“Thank God for closures!”.
John Resig
Alguns slides a partir daqui
foram baseados em:
jQuery Essentials by Marc Grabanski
http://marcgrabanski.com/presentations/jquery-essentials.pdf
Mais fácil escrever do que
códigos JavaScript puros.
Ocultando divs com JavaScript e DOM
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}
Ocultando divs com JavaScript e DOM
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
1. Selecionava todos <div>
divs[i].style.display = ‘none’;
2. Para cada um
}
3. Mudava o estilo, css

Ocultando divs com JQuery
$(“div”).hide();
Ocultando divs com JavaScript e DOM
divs = 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:
Seleção com composição:
$(“#myId, .myClass, table”)
Procure

$(“div”)
Procure

Faça

$(“div”).hide()
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!');

Formatando
$('#content')
.find('h3')
.eq(2)
.html('o novo texto do terceiro h3!');
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”)
O JQuery não salva
as consultas, se for
precisar do resultado
dessa consulta,
salve-a em
uma variável

Não existe nada
especial no nome
$divs, o $ é apenas
uma notação para
diferenciar o objetos
JQuery
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
Oculte o primeiro

$('ul li').filter('.current'); // itens de listas não-ordenadas com a classe
item das listas do
current
arquivo
teste_jquery_1.html

$('ul li').first(); // somente o primeiro item da lista não ordenada
$('ul li').eq(5); // o sexto item da lista
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 mesmo
nome 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 mesmo
nome 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 mesmo
nome 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étodos
Movendo
append(), appendTo(), before(), after(),
Atributos
css(), attr(), html(), val(), addClass()
Eventos
bind(), trigger(), unbind(), live(), click()
Travessia
find(), is(), prevAll(), next(), hasClass()
Efeitos
show(), fadeOut(), toggle(), animate()
Ajax
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

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()
.css(“fontSize”)
.width()
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

.html(“<p>hi</p>”)

.css(“fontSize”)
.width()
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

.html(“<p>hi</p>”)

.css(“fontSize”)

.css(“fontSize”, “100px”)

.width()
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

.html(“<p>hi</p>”)

.css(“fontSize”)

.css(“fontSize”, “100px”)

.width()

.width(60)
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

.html(“<p>hi</p>”)

.css(“fontSize”)

.css(“fontSize”, “100px”)

.width()

.width(60)

Largura do primeiro
elemento
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

.html(“<p>hi</p>”)

.css(“fontSize”)

.css(“fontSize”, “100px”)

.width()

.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”);
Usado para pegar um valor
de um elemento de um
Seta o value para 3.
formulário. Ex. text.
$(...).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”);
Pega o valor.
$(...).val();
Seta o value para 3.
$(...).val(“3”);
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

Remove espaços em branco à esquerda e à
direita.
$.trim(" muitos espaços em branco extras ");
// returns "muitos espaços em branco extras"

$.each

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étodos
Movendo
append(), appendTo(), before(), after(),
Atributos
css(), attr(), html(), val(), addClass()
Eventos
bind(), trigger(), unbind(), live(), click()
Travessia
find(), is(), prevAll(), next(), hasClass()
Efeitos
show(), fadeOut(), toggle(), animate()
Ajax
JQuery Métodos
Movendo
append(), appendTo(), before(), after(),
Atributos
css(), attr(), html(), val(), addClass()
Eventos
bind(), trigger(), unbind(), live(), click()
Travessia
find(), is(), prevAll(), next(), hasClass()
Efeitos
show(), fadeOut(), toggle(), animate()
Ajax
Travessia
Travessia
Uma vez que você tem uma seleção do jQuery, você pode
encontrar outros elementos usando sua seleção
como ponto de início.
Travessia
Uma vez que você tem uma seleção do jQuery, você pode
encontrar outros elementos usando sua seleção
como 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ção
como 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+, Safari
xmlHttp=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+, Safari
xmlHttp=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
<p>Ola mundo</p>
$.ajax({
url: "ajax_test.htm",
success: function(response){ $("#a1").html(response); }})

</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
<p>Ola mundo</p>
$.get("ajax_test.htm",
function (response) { $("#a1").html(response); })

</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: JSON
Calculadora 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: JSON
Calculadora 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.

Mais conteúdo relacionado

Mais procurados

Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
Yuri Costa
 

Mais procurados (20)

Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
 
JQuery
JQuery JQuery
JQuery
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
Aumentando a produtividade com Android Libs
Aumentando a produtividade com Android LibsAumentando a produtividade com Android Libs
Aumentando a produtividade com Android Libs
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
 
JavaScript - A Linguagem
JavaScript - A LinguagemJavaScript - A Linguagem
JavaScript - A Linguagem
 
JavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosJavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a Objetos
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Python 06
Python 06Python 06
Python 06
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Angular JS - Fundamentos
Angular JS - FundamentosAngular JS - Fundamentos
Angular JS - Fundamentos
 
AngularJS - Rotas
AngularJS - RotasAngularJS - Rotas
AngularJS - Rotas
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 

Semelhante a Introdução ao JQuery e AJAX

J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
nobios
 

Semelhante a Introdução ao JQuery e AJAX (20)

LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
JQuery
JQueryJQuery
JQuery
 
Javascript + jQuery
Javascript + jQueryJavascript + jQuery
Javascript + jQuery
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
Dinamizando Sites Estáticos
Dinamizando Sites EstáticosDinamizando Sites Estáticos
Dinamizando Sites Estáticos
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
J query
J queryJ query
J query
 
Hooks, o condimento mágico e escondido do WordPress
Hooks, o condimento mágico e escondido do WordPressHooks, o condimento mágico e escondido do WordPress
Hooks, o condimento mágico e escondido do WordPress
 
Como conectar programas em linguagem java a bases de dados
Como conectar programas em linguagem java  a bases de dadosComo conectar programas em linguagem java  a bases de dados
Como conectar programas em linguagem java a bases de dados
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Minicurso groovy grails
Minicurso groovy grailsMinicurso groovy grails
Minicurso groovy grails
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 

Mais de Sérgio Souza Costa

Mais de Sérgio Souza Costa (20)

Expressões aritméticas, relacionais e lógicas
Expressões aritméticas, relacionais e lógicasExpressões aritméticas, relacionais e lógicas
Expressões aritméticas, relacionais e lógicas
 
De algoritmos à programas de computador
De algoritmos à programas de computadorDe algoritmos à programas de computador
De algoritmos à programas de computador
 
Introdução ao pensamento computacional e aos algoritmos
Introdução ao pensamento computacional e aos algoritmosIntrodução ao pensamento computacional e aos algoritmos
Introdução ao pensamento computacional e aos algoritmos
 
Minicurso de introdução a banco de dados geográficos
Minicurso de introdução a banco de dados geográficosMinicurso de introdução a banco de dados geográficos
Minicurso de introdução a banco de dados geográficos
 
Modelagem de dados geográficos
Modelagem de dados geográficosModelagem de dados geográficos
Modelagem de dados geográficos
 
Banco de dados geográfico - Aula de Encerramento
Banco de dados geográfico - Aula de EncerramentoBanco de dados geográfico - Aula de Encerramento
Banco de dados geográfico - Aula de Encerramento
 
Banco de dados geográficos – Arquiteturas, banco de dados e modelagem
Banco de dados geográficos – Arquiteturas, banco de dados e modelagemBanco de dados geográficos – Arquiteturas, banco de dados e modelagem
Banco de dados geográficos – Arquiteturas, banco de dados e modelagem
 
Banco de dados geográficos - Aula de abertura
Banco de dados geográficos - Aula de aberturaBanco de dados geográficos - Aula de abertura
Banco de dados geográficos - Aula de abertura
 
Linguagem SQL e Extensões Espacias - Introdução
Linguagem SQL e Extensões Espacias - IntroduçãoLinguagem SQL e Extensões Espacias - Introdução
Linguagem SQL e Extensões Espacias - Introdução
 
Gödel’s incompleteness theorems
Gödel’s incompleteness theoremsGödel’s incompleteness theorems
Gödel’s incompleteness theorems
 
Turing e o problema da decisão
Turing e o problema da decisãoTuring e o problema da decisão
Turing e o problema da decisão
 
DBCells - an open and global multi-scale linked cells
DBCells - an open and global multi-scale linked cellsDBCells - an open and global multi-scale linked cells
DBCells - an open and global multi-scale linked cells
 
Conceitos básicos de orientação a objetos
Conceitos básicos de orientação a objetosConceitos básicos de orientação a objetos
Conceitos básicos de orientação a objetos
 
Polymorphism (Ad-hoc and Universal)
Polymorphism (Ad-hoc and Universal)Polymorphism (Ad-hoc and Universal)
Polymorphism (Ad-hoc and Universal)
 
Herança e Encapsulamento
Herança e EncapsulamentoHerança e Encapsulamento
Herança e Encapsulamento
 
Relações (composição e agregação)
Relações (composição e agregação)Relações (composição e agregação)
Relações (composição e agregação)
 
Abstract classes and interfaces
Abstract classes and interfacesAbstract classes and interfaces
Abstract classes and interfaces
 
Introdução ao Prolog
Introdução ao PrologIntrodução ao Prolog
Introdução ao Prolog
 
Heap - Python
Heap - PythonHeap - Python
Heap - Python
 
Paradigma lógico
Paradigma lógicoParadigma lógico
Paradigma lógico
 

Introdução ao JQuery e AJAX