Your SlideShare is downloading. ×
0
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://sit...
"Considered a “toy” language by serious web
developers for most of its lifetime, Java-Script has
regained its prestige in ...
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 sej...
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:
...
Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery
ou diretamente:
...
Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery
ou diretamente:
...
Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jqu...
Hello World

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

<!DOCTYPE html>
<html>
<head>
<meta charset...
Hello World - 2 - Atalho "document
ready"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script t...
Hello World - 3 - Sem "innerHtml"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="tex...
Hello World - 3 - Sem "innerHtml"
Matado a
ansiedade, vamos
entender melhor
isso ...

<!DOCTYPE html>
<html>
<head>
<meta ...
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, arqui...
Ranking das bibliotecas JavaScript
Jquery + Programação Funcional
JQuery foi desenvolvido usando muitas das
suas características como linguagem de programaçã...
Jquery + Programação Funcional
JQuery foi desenvolvido usando muitas das
suas características como linguagem de programaçã...
Jquery + Programação Funcional
JQuery foi desenvolvido usando muitas das
suas características como linguagem de programaçã...
Alguns slides a partir daqui
foram baseados em:
jQuery Essentials by Marc Grabanski
http://marcgrabanski.com/presentations...
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...
Ocultando divs com JavaScript e DOM
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
1. Sel...
Ocultando divs com JavaScript e DOM
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
divs[i...
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=...
Exemplos de seletores
$(“#content”) todos elementos com id content
$(“li:first”) o primeiro item de uma lista
$(“a[target=...
Exemplos de seletores
$(“#content”) todos elementos com id content
$(“li:first”) o primeiro item de uma lista
$(“a[target=...
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
cons...
Encadeamento
$("#div_1").addClass("redbox").fadeOut();

Seleção retorna um objeto, então
podemos aplicá-las em outras
cons...
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')
.e...
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 resul...
Salvando seleções
var $divs = $('div');
$divs.addClass(“redbox”)
O JQuery não salva
as consultas, se for
precisar do resul...
Checando o retorno de uma seleção
Uma seleção sempre retornara um objeto, então o teste
a seguir será sempre verdadeiro:
i...
Checando o retorno de uma seleção
Uma seleção sempre retornara um objeto, então o teste
a seguir será sempre verdadeiro:
i...
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'); // eleme...
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // eleme...
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // eleme...
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // eleme...
Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
$('h1').not('.bar'); // eleme...
Seletores relacionados à formulários
:button Seleciona elementos do tipo <button>
:checkbox Seleciona inputs com type="che...
Seletores relacionados à formulários
:input Seleciona <input>, <textarea>, e elementos
<select>
:radio Selecionam inputs c...
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 + ...
Um Método, Diferentes usos
$(...).html();
$(...).html(“<p>hello</p>”);

$(...).html(function(i){
return “<p>hello “ + i + ...
Getters & Setters
O jQuery “sobrecarrega” seus métodos, então o método usado
para setar um valor geralmente tem o mesmo
no...
Getters & Setters
O jQuery “sobrecarrega” seus métodos, então o método usado
para setar um valor geralmente tem o mesmo
no...
Getters & Setters
O jQuery “sobrecarrega” seus métodos, então o método usado
para setar um valor geralmente tem o mesmo
no...
JQuery Métodos
Movendo
append(), appendTo(), before(), after(),
Atributos
css(), attr(), html(), val(), addClass()
Eventos...
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ód...
Método $()
Podemos passar uma função para o método $(), que será
executada após o HTML ser carregado.
$(function(){
// cód...
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!');...
Movendo elementos
Pegue um elemento com ID foo e adicione algum
HTML.
$(“#foo”)
<html>
<body>
<div>jQuery</div>
<div id=”f...
Movendo elementos
Pegue um elemento com ID foo e adicione algum
HTML.
$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>...
Movendo elementos
Pegue um elemento com ID foo e adicione algum
HTML.
$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>...
Movendo elementos
Move parágrafos para o elemento com id “foo”

$(“p”)
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragrap...
Movendo elementos
Move parágrafos para o elemento com id “foo”

$(“p”).appendTo(“#foo”);
<html>
<body>
<div>jQuery
<p>movi...
Movendo elementos
Move parágrafos para o elemento com id “foo”

$(“p”).appendTo(“#foo”);
<html>
<body>
<div>jQuery
</div>
...
Copiando elementos
Copiando parágrafos para o elemento com id “foo”

$(“p”)
<html>
<body>
<div>jQuery
<p>moving</p>
<p>par...
Copiando elementos
Copiando parágrafos para o elemento com id “foo”

$(“p”).clone()
<html>
<body>
<div>jQuery
<p>moving</p...
Copiando elementos
Copiando parágrafos para o elemento com id “foo”

$(“p”).clone().appendTo(“#foo”);
<html>
<body>
<div>j...
Copiando elementos
Copiando parágrafos para o elemento com id “foo”

$(“p”).clone().appendTo(“#foo”);
<html>
<body>
<div>j...
Criando elementos
Criando elementos
Copiando parágrafos para o elemento com id “foo”

$(“<p>”, {text:"teste"})
<html>
<body>
<div id=”foo”>
...
Criando elementos
Copiando parágrafos para o elemento com id “foo”

$(“<p>”, {text:"teste"}).appendTo(“#foo”);
<html>
<bod...
Criando elementos
Copiando parágrafos para o elemento com id “foo”

$(“<p>”, {text:"teste"}).appendTo(“#foo”);
<html>
<bod...
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”, “100p...
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

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

.css(“fontSize”)

.css(“fontSize”, “100p...
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

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

.css(“fontSize”)

.css(“fontSize”, “100p...
Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()

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

.css(“fontSize”)

.css(“fontSize”, “100p...
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({
...
Atributos
Seta a borda para 1px black
$(...).css(“border”, “1px solid black”);
Seta varias propriedades CSS.
$(...).css({
...
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 ...
Atributos
Trabalhando com classes
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('b...
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</...
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:
<div><p>I’m new</...
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:
<div><p>I’m new</...
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:
<div><p>I’m new</...
Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:
<div><p>I’m new</...
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:
$("butt...
Eventos
Hover, funções para o mouse in e mouseout
$("span").hover(
function () {
$(this).css ("color", "red");
},
function...
Funções utilitárias
.trim

Remove espaços em branco à esquerda e à
direita.
$.trim(" muitos espaços em branco extras ");
/...
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() ...
JQuery Parte 2
JQuery Métodos
Movendo
append(), appendTo(), before(), after(),
Atributos
css(), attr(), html(), val(), addClass()
Eventos...
JQuery Métodos
Movendo
append(), appendTo(), before(), after(),
Atributos
css(), attr(), html(), val(), addClass()
Eventos...
Travessia
Travessia
Uma vez que você tem uma seleção do jQuery, você pode
encontrar outros elementos usando sua seleção
como ponto d...
Travessia
Uma vez que você tem uma seleção do jQuery, você pode
encontrar outros elementos usando sua seleção
como ponto d...
Travessia
Uma vez que você tem uma seleção do jQuery, você pode
encontrar outros elementos usando sua seleção
como ponto d...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”)
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id=”myCell...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).prevAll()
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td ...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).prevAll().andSelf();
<html>
<body>
<table><tr>
<td></td>
<td...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”)
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id=”myCell...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).siblings();
<html>
<body>
<table><tr>
<td></td>
<td></td>
<t...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).siblings().andSelf();
<html>
<body>
<table><tr>
<td></td>
<t...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”)
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id=”myCell...
Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”).parent();
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td ...
Travessia
Pegue as celulas anteriores a #myCell.
$(“table”);
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id=”myCell”...
Travessia
Pegue as celulas anteriores a #myCell.
$(“table”).find ("td");
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td...
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);
$(......
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();
});
Ani...
Efeitos/Animação
Para cada click, slide up / slide down um elemento
$(...).click(function(){
$(...).slideToggle();
});
Ani...
Efeitos/Animação
$.fn.show Mostra o elemento selecionado.
$.fn.hide Esconde o elemente selecionado.
$.fn.fadeIn Anima a op...
Efeitos/Animação
$.fn.slideDown Mostra os elementos selecionados
com um deslizamento vertical.
$.fn.slideUp Esconde os ele...
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>
<...
Plugins
$.fn.OlaMundo = function(){
return this.each(function(){
$(this).html("Plugin Ola Mundo");
});
}
$(“div”).OlaMundo...
Plugins
Existem diversos plugins, com diferentes objetivos.
http://plugins.jquery.com/

Vocês podem fazer o seu próprio ou...
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+, Safa...
Meu primeiro AJAX
Criar uma requisição:
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safa...
Meu primeiro AJAX
Função que é chamado após a requisição for concluída.
Callback.
function stateChanged() {
if (xmlHttp.re...
Meu primeiro AJAX
Função que "monta" a requisição.
function olamundo() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
...
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...
Hello World Ajax - JQuery
Dado uma pagina ajax_test.htm
<p>Ola mundo</p>

</html>
</head>
<body>
<div id="a1"></div>
</bod...
Hello World Ajax - JQuery
Dado uma pagina ajax_test.htm
<p>Ola mundo</p>
$.ajax({
url: "ajax_test.htm",
success: function(...
Hello World Ajax - JQuery - V 2
Dado uma pagina ajax_test.htm
<p>Ola mundo</p>
$.get("ajax_test.htm",
function (response) ...
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;
?...
Recebendo dados do servidor: JSON
Calculadora no servidor
<?php
$n1 = $_REQUEST['n1'];
$n2 = $_REQUEST['n2'];
$res = array...
Recebendo e enviando: JSON
Calculadora no servidor
<?php
$data = json_decode ($_REQUEST['data'], true);
$res = array (
're...
É 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.
Upcoming SlideShare
Loading in...5
×

Introdução ao JQuery e AJAX

3,852

Published on

Transcript of "Introdução ao JQuery e AJAX"

  1. 1. Write Less DO MORE Introdução ao JQuery e AJAX Prof: Sérgio Souza Costa
  2. 2. 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
  3. 3. "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
  4. 4. O que é JQuery ?
  5. 5. O que é JQuery ? JavaScript HTML/ Browser
  6. 6. O que é JQuery ? JavaScript DOM/ BOM HTML/ Browser
  7. 7. O que é JQuery ? JavaScript JQuery DOM/ BOM HTML/ Browser
  8. 8. O que é JQuery ? JavaScript JQuery DOM/ BOM Independente de browser HTML/ Browser
  9. 9. 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.
  10. 10. Como usar ? Matando a ansiedade com um "Hello World" Acesse http://jquery.com/, e baixem o arquivo JQuery
  11. 11. 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
  12. 12. 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
  13. 13. 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 ...
  14. 14. 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>
  15. 15. 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>
  16. 16. 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
  17. 17. 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>
  18. 18. 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>
  19. 19. Para quê ?
  20. 20. Para quê ? Produtividade = Poucas linhas de códigos
  21. 21. Para quê ? Cross browser Produtividade = Poucas linhas de códigos
  22. 22. Para quê ? DOM Cross browser Produtividade – Poucas linhas de códigos
  23. 23. Para quê ? CSS DOM Cross browser Produtividade – Poucas linhas de códigos
  24. 24. Para quê ? CSS DOM Cross browser Produtividade – Poucas linhas de códigos AJAX
  25. 25. Para quê ? DOM PLUGINS Cross browser Produtividade – Poucas linhas de códigos AJAX CSS
  26. 26. 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)
  27. 27. Ranking das bibliotecas JavaScript
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. Alguns slides a partir daqui foram baseados em: jQuery Essentials by Marc Grabanski http://marcgrabanski.com/presentations/jquery-essentials.pdf
  32. 32. Mais fácil escrever do que códigos JavaScript puros.
  33. 33. Ocultando divs com JavaScript e DOM divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; }
  34. 34. 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();
  35. 35. 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();
  36. 36. Filosofia JQuery
  37. 37. Filosofia JQuery #1. PROCURE algo no HTML
  38. 38. Filosofia JQuery #1. PROCURE algo no HTML #2. FAÇA algo com ele
  39. 39. PROCURE $("div")
  40. 40. PROCURE $("div") Procurando elementos...
  41. 41. Use o seletor $()
  42. 42. Use o seletor $() $(“#myId”)
  43. 43. Use o seletor $() $(“#myId”) $(“.myClass”)
  44. 44. Use o seletor $() $(“#myId”) $(“.myClass”)
  45. 45. Use o seletor $() $(“#myId”) $(“.myClass”) $(“table”)
  46. 46. Exemplos de seletores
  47. 47. Exemplos de seletores $(“#content”) todos elementos com id content
  48. 48. Exemplos de seletores $(“#content”) todos elementos com id content $(“li:first”) o primeiro item de uma lista
  49. 49. 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”
  50. 50. 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”
  51. 51. 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
  52. 52. Seleção com composição:
  53. 53. Seleção com composição: $(“#myId, .myClass, table”)
  54. 54. Procure $(“div”)
  55. 55. Procure Faça $(“div”).hide()
  56. 56. Vamos ver .... teste_jquery_1.html
  57. 57. Encadeamento
  58. 58. Encadeamento $("#div_1").addClass("redbox")
  59. 59. Encadeamento $("#div_1").addClass("redbox").fadeOut();
  60. 60. Encadeamento $("#div_1").addClass("redbox").fadeOut(); Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos.
  61. 61. Encadeamento $("#div_1").addClass("redbox").fadeOut(); Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos. Testando .....
  62. 62. Encadeamento $('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');
  63. 63. 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!');
  64. 64. Salvando seleções var $divs = $('div');
  65. 65. Salvando seleções var $divs = $('div'); $divs.addClass(“redbox”)
  66. 66. 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
  67. 67. 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
  68. 68. 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')) { ... }
  69. 69. 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) { ... }
  70. 70. Refinando & Filtrando Seleções
  71. 71. Refinando & Filtrando Seleções $('div.foo').has('p'); // o elemento div.foo que contém <p>'s
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. 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" ...
  79. 79. Um Método, Diferentes usos
  80. 80. Um Método, Diferentes usos $(...).html();
  81. 81. Um Método, Diferentes usos $(...).html(); $(...).html(“<p>hello</p>”);
  82. 82. Um Método, Diferentes usos $(...).html(); $(...).html(“<p>hello</p>”); $(...).html(function(i){ return “<p>hello “ + i + “</p>”; });
  83. 83. 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".
  84. 84. 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
  85. 85. 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');
  86. 86. 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();
  87. 87. 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
  88. 88. Método $()
  89. 89. Método $() Podemos passar uma função para o método $(), que será executada após o HTML ser carregado.
  90. 90. Método $() Podemos passar uma função para o método $(), que será executada após o HTML ser carregado. $(function(){ });
  91. 91. 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 });
  92. 92. 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(){ });
  93. 93. Método $() Usando funções anônimas: $(function() { alert('pronto!'); });
  94. 94. Método $() Usando funções anônimas: $(function() { alert('pronto!'); }); Função nomeada f = function () {alert('pronto!'); } $(f);
  95. 95. 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>
  96. 96. 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>
  97. 97. 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>
  98. 98. 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>
  99. 99. 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>
  100. 100. 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>
  101. 101. 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>
  102. 102. 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>
  103. 103. 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>
  104. 104. 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>
  105. 105. Criando elementos
  106. 106. Criando elementos Copiando parágrafos para o elemento com id “foo” $(“<p>”, {text:"teste"}) <html> <body> <div id=”foo”> </div> </body> </html>
  107. 107. Criando elementos Copiando parágrafos para o elemento com id “foo” $(“<p>”, {text:"teste"}).appendTo(“#foo”); <html> <body> <div id=”foo”> </div> </body> </html>
  108. 108. 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>
  109. 109. Atributos
  110. 110. Atributos Get .attr(‘id’)
  111. 111. Atributos Get .attr(‘id’) .html()
  112. 112. Atributos Get .attr(‘id’) .html() .css(“fontSize”)
  113. 113. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .css(“fontSize”) .width()
  114. 114. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .width()
  115. 115. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .css(“fontSize”, “100px”) .width()
  116. 116. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .css(“fontSize”, “100px”) .width() .width(60)
  117. 117. 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
  118. 118. 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
  119. 119. Atributos
  120. 120. Atributos Seta a borda para 1px black $(...).css(“border”, “1px solid black”);
  121. 121. Atributos Seta a borda para 1px black $(...).css(“border”, “1px solid black”); Seta varias propriedades CSS. $(...).css({ “background”: “yellow”, “height”: “400px” });
  122. 122. 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.
  123. 123. Atributos Trabalhando com classes $h1.addClass('big'); $h1.removeClass('big');
  124. 124. 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.
  125. 125. Atributos Trabalhando com classes $h1.addClass('big'); $h1.removeClass('big'); $h1.toggleClass('big'); if ($h1.hasClass('big')) { ... }
  126. 126. Atributos Mude HTML com um novo parágrafo. $(...).html(“<p>I’m new</p>”);
  127. 127. 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>
  128. 128. 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”);
  129. 129. 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”);
  130. 130. 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”);
  131. 131. 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”);
  132. 132. Eventos
  133. 133. Eventos Quando o botão for clicado, faça algo. $(“button”).click(function(){ facaAlgo(); });
  134. 134. Eventos Quando o botão for clicado, faça algo. $(“button”).click(function(){ facaAlgo(); }); Usando o método bind: $("button").bind('click', function() { facaAlgo(); });
  135. 135. Eventos Hover, funções para o mouse in e mouseout $("span").hover( function () { $(this).css ("color", "red"); }, function () { $(this).css ("color", "black"); })
  136. 136. 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); });
  137. 137. Funções utilitárias $.inArray var meuArray = [ 1, 2, 3, 5 ]; if ($.inArray(4, meuArray) !== -1) { console.log('encontrei!'); }
  138. 138. Exercício 1 Baixem o arquivo Diga_incompleto, e insiram os códigos que permitirá o seguinte comportamento.
  139. 139. Exercício 2 Gerar tabela dinamicamente
  140. 140. 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
  141. 141. JQuery Parte 2
  142. 142. 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
  143. 143. 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
  144. 144. Travessia
  145. 145. 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.
  146. 146. 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');
  147. 147. 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');
  148. 148. 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>
  149. 149. 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>
  150. 150. 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>
  151. 151. 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>
  152. 152. 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>
  153. 153. 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>
  154. 154. 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>
  155. 155. 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>
  156. 156. 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>
  157. 157. 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>
  158. 158. Efeitos/Animação
  159. 159. Efeitos/Animação Tipos de efeitos
  160. 160. Efeitos/Animação Tipos de efeitos #1. Hide e Show
  161. 161. Efeitos/Animação Tipos de efeitos #1. Hide e Show #2. Fade In e Out
  162. 162. Efeitos/Animação Tipos de efeitos #1. Hide e Show #2. Fade In e Out #3. Slide Up e Down
  163. 163. Efeitos/Animação Hide e show $(...).click(function(){ $(...).hide(); });
  164. 164. Efeitos/Animação Hide e show $(...).click(function(){ $(...).hide(); }); $(...).hide("slow"); ou $(...).hide(5000);
  165. 165. Efeitos/Animação Hide e show $(...).click(function(){ $(...).hide(); }); $(...).hide("slow"); ou $(...).hide(5000); $(...).show() $(...).show("slow") $(...).show(500);
  166. 166. Efeitos/Animação Para cada click, slide up / slide down um elemento $(...).click(function(){ $(...).slideToggle(); });
  167. 167. Efeitos/Animação Para cada click, slide up / slide down um elemento $(...).click(function(){ $(...).slideToggle(); });
  168. 168. 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);
  169. 169. 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);
  170. 170. 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%.
  171. 171. 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.
  172. 172. Efeitos/Animação Experimentem os métodos com o código abaixo ... <button id="b1">Click</button> <p id="p1">ANIMADO</p> ...
  173. 173. Efeitos/Animação Usem os recursos de animação para mostrar e ocultar as mensagens de erro da calculadora.
  174. 174. Extendendo JQuery
  175. 175. Plugins $.fn.OlaMundo = function(){ return this.each(function(){ // faça algo com a seleção }); }
  176. 176. Plugins $.fn.OlaMundo = function(){ return this.each(function(){ $(this).html("Plugin Ola Mundo"); }); } $(“div”) <html> <body> <div></div> <div></div> </body> </html>
  177. 177. 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>
  178. 178. Plugins Existem diversos plugins, com diferentes objetivos. http://plugins.jquery.com/ Vocês podem fazer o seu próprio ou estender os já existentes.
  179. 179. Exercício Façam um programa que realce uma seleção: texto a realçar $("span").realce() texto a realçar
  180. 180. Mais exercicios Baixem o jogo quebra cabeça e mapeiem o seu código para JQuery:
  181. 181. AJAX
  182. 182. Modelo classico
  183. 183. AJAX
  184. 184. O que é Ajax ? Assyncronous
  185. 185. O que é Ajax ? Assyncronous JavaScript
  186. 186. O que é Ajax ? Assyncronous JavaScript And XML
  187. 187. O que é Ajax ? Assyncronous JavaScript And XML
  188. 188. O que é Ajax ? Assyncronous JavaScript And XML + XHTML + JSON + CSS
  189. 189. O que é AJAX ? Não é uma linguagem
  190. 190. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes
  191. 191. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes XHtmllRequest
  192. 192. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes XHtmllRequest + JavaScript
  193. 193. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes XHtmllRequest + JavaScript + DOM
  194. 194. 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; }
  195. 195. 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
  196. 196. 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; } }
  197. 197. 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()
  198. 198. Muito Complicado ?
  199. 199. Ajax no JQuery
  200. 200. Lembram do Hello World do JQuery ? $ ("#a1") </html> </head> <body> <div id="a1"></div> </body> </html>
  201. 201. 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>
  202. 202. Hello World Ajax - JQuery Dado uma pagina ajax_test.htm <p>Ola mundo</p> </html> </head> <body> <div id="a1"></div> </body> </html>
  203. 203. 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>
  204. 204. 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>
  205. 205. Enviando dados para o servidor Calculadora no servidor <?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; echo $n1+$n2; ?>
  206. 206. 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); }) }) });
  207. 207. 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) }) }) });
  208. 208. 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) }) })
  209. 209. É só isso ?
  210. 210. É só isso ? YES. Agora é JavaScript e criatividade.
  211. 211. É só isso ? YES. Agora é JavaScript e criatividade. No final da aula de PHP, tem outro exemplo de ajax com o php.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×