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. "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
6. O que é JQuery ?
JavaScript
DOM/
BOM
HTML/
Browser
7. O que é JQuery ?
JavaScript
JQuery
DOM/
BOM
HTML/
Browser
8. O que é JQuery ?
JavaScript
JQuery
DOM/
BOM
Independente de browser
HTML/
Browser
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. Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery
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. 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. 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 ...
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>
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. 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>
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)
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. 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. 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. Alguns slides a partir daqui
foram baseados em:
jQuery Essentials by Marc Grabanski
http://marcgrabanski.com/presentations/jquery-essentials.pdf
33. Ocultando divs com JavaScript e DOM
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}
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. 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();
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. 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. 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
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. 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. 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. 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) { ... }
71. Refinando & Filtrando Seleções
$('div.foo').has('p'); // o elemento div.foo que contém <p>'s
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. 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. 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. 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. 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. 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. 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"
...
82. Um Método, Diferentes usos
$(...).html();
$(...).html(“<p>hello</p>”);
$(...).html(function(i){
return “<p>hello “ + i + “</p>”;
});
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. 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. 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. 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();
89. Método $()
Podemos passar uma função para o método $(), que será
executada após o HTML ser carregado.
90. Método $()
Podemos passar uma função para o método $(), que será
executada após o HTML ser carregado.
$(function(){
});
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. 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(){ });
94. Método $()
Usando funções anônimas:
$(function() { alert('pronto!'); });
Função nomeada
f = function () {alert('pronto!'); }
$(f);
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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
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. 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>
121. Atributos
Seta a borda para 1px black
$(...).css(“border”, “1px solid black”);
Seta varias propriedades CSS.
$(...).css({
“background”: “yellow”,
“height”: “400px”
});
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.
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. 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. 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. 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. 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”);
133. Eventos
Quando o botão for clicado, faça algo.
$(“button”).click(function(){
facaAlgo();
});
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. Eventos
Hover, funções para o mouse in e mouseout
$("span").hover(
function () {
$(this).css ("color", "red");
},
function () {
$(this).css ("color", "black");
})
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);
});
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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
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. 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. 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. 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.
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. Plugins
Existem diversos plugins, com diferentes objetivos.
http://plugins.jquery.com/
Vocês podem fazer o seu próprio ou estender os já existentes.
190. O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
191. O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
XHtmllRequest
192. O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
XHtmllRequest
+ JavaScript
193. O que é AJAX ?
Não é uma linguagem
Uso de tecnologias já existentes
XHtmllRequest
+ JavaScript + DOM
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. 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. 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. 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()