Introdução ao JQuery e AJAX

Introdução ao JQuery e AJAXProf: Sérgio Souza Costa

Write Less

DO MORE

Sobre mim

Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)

prof.sergio.costa@gmail.com

https://sites.google.com/site/profsergiocosta/home

https://twitter.com/profsergiocosta

http://gplus.to/sergiosouzacosta

http://www.slideshare.net/skosta/presentations?order=popular

"Considered a “toy” language by serious web developers for most of its lifetime, Java-Script has regained its prestige in the past few years as a result of the renewed interest in Rich Internet Applications and Ajax technologies".

John Resig - jQuery in Action

O que é JQuery ?

HTML/ BrowserJavaScript

O que é JQuery ?

HTML/ BrowserJavaScript DOM/

O que é JQuery ?

BOMJQuery

O que é JQuery ?

BOMJQuery

Independente de browser

O que é JQuery ?

BOMJQuery

Independente de browser

JQuery é uma biblioteca JavaScript, ou seja, um conjunto de objetos e funções em um arquivo js.

Como usar ?

Matando a ansiedade com um "Hello World"

Acesse http://jquery.com/, e baixem o arquivo JQuery

Como usar ?

ou diretamente:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

Como usar ?

ou diretamente:

ou baixem o hello_jquery.rar, no site

Como usar ?

ou diretamente:

ou baixem o hello_jquery.rarO "min" significa que este arquivo foi "minificado", ou seja, eliminado todos os espaçamentos, tabs ...

Hello World

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")

})</script></head><body></body></html>

equivalente ao window.onload

Hello World

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")

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

Hello World - 2 - Atalho "document ready"<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >

$( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")

</script></head><body></body></html>

Hello World - 3 - Sem "innerHtml"

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ $ ("<p/>", {

text: "Ola Mundo !!"}).appendTo("body")

1. Cria a tag <p>2. Atribui a ela o texto3. Adiciona a "body"

Hello World - 3 - Sem "innerHtml"

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ $ ("<p/>", {

text: "Ola Mundo !!"}).appendTo("body")

1. Cria a tag <p>2. Atribui a ela o texto3. Adiciona a "body"

Matado a ansiedade, vamos entender melhor isso ...

Para quê ?

Produtividade = Poucas linhas de códigos

Para quê ?

Produtividade = Poucas linhas de códigos

Cross browser

Para quê ?

Produtividade – Poucas linhas de códigos

Cross browser

Para quê ?

Cross browser

DOM CSS

Para quê ?

Cross browser

DOMCSS

Para quê ?

Cross browserDOM

PLUGINS

Jquery

● Released Jan. 2006● Foco na manipulação de DOM● Suporte a Events, Ajax e Animações● Código sucinto, arquivos pequenos● Extensível via plugin● Cross browser (se comporta da mesma maneira

sobre diferentes browser)

Ranking das bibliotecas JavaScript

Jquery + Programação Funcional

JQuery foi desenvolvido usando muitas das suas características como linguagem de programação funcional

Funções como parâmetros

Funções como retorno

Funções anônimas

Closures

“Thank God for closures!”. John Resig

Alguns slides a partir daqui foram baseados em:jQuery Essentials by Marc Grabanskihttp://marcgrabanski.com/presentations/jquery-essentials.pdf

Mais fácil escrever do que códigos JavaScript puros.

Ocultando divs com JavaScript e DOMdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}

Ocultando divs com JQuery$(“div”).hide();

1. Selecionava todos <div>2. Para cada um3. Mudava o estilo, css

Ocultando divs com JavaScript e DOMdivs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}

Ocultando divs com JQuery$(“div”).hide();

Filosofia JQuery

#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 $()

$(“#myId”)

Use o seletor $()

$(“#myId”) $(“.myClass”)

Use o seletor $()

$(“#myId”) $(“.myClass”)

Use o seletor $()

$(“#myId”) $(“.myClass”) $(“table”)

Exemplos de seletores

$(“#content”) todos elementos com id content

$(“li:first”) o primeiro item de uma lista

$(“a[target=_blank]”) todos links onde target “_blank”

$(“form[id^=step]”) todos "forms" onde id começa com “step”

$("img", cell) todos as imagens dentro de cell

Seleção com composição:

$(“#myId, .myClass, table”)

Seleção com composição:

Procure

$(“div”)

Procure

$(“div”).hide()

Vamos ver ....

teste_jquery_1.html

Encadeamento

$("#div_1").addClass("redbox")

Encadeamento

$("#div_1").addClass("redbox").fadeOut();

Encadeamento

Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos.

Encadeamento

Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos.

Testando .....

Encadeamento

$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');

Encadeamento

$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');

$('#content') .find('h3') .eq(2) .html('o novo texto do terceiro h3!');

Formatando

Salvando seleções

var $divs = $('div');

Salvando seleções

var $divs = $('div');$divs.addClass(“redbox”)

Salvando seleções

O JQuery não salva as consultas, se for precisar do resultado dessa consulta, salve-a em uma variável

Salvando seleções

Não existe nada especial no nome $divs, o $ é apenas uma notação para diferenciar o objetos JQuery

O JQuery não salva as consultas, se for precisar do resultado dessa consulta, salve-a em uma variável

Checando o retorno de uma seleção

Uma seleção sempre retornara um objeto, então o teste a seguir será sempre verdadeiro:

if ($('div.foo')) { ... }

Checando o retorno de uma seleção

Uma seleção sempre retornara um objeto, então o teste a seguir será sempre verdadeiro:

if ($('div.foo')) { ... }

Ao invés disso, testem o tamanho do objeto:

if ($('div.foo').length) { ... }

Refinando & Filtrando Seleções

$('div.foo').has('p'); // o elemento div.foo que contém <p>'s

$('h1').not('.bar'); // elementos h1 que não têm a classe bar

$('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current

$('ul li').first(); // somente o primeiro item da lista não ordenada

$('ul li').eq(5); // o sexto item da lista

Oculte o primeiro item das listas do arquivo teste_jquery_1.html

Seletores relacionados à formulários

:button Seleciona elementos do tipo <button>

:checkbox Seleciona inputs com type="checkbox"

:checked Seleciona inputs selecionados

:disabled Seleciona elementos de formulário desabilitados

:enabled Seleciona elementos de formulário habilitados

Seletores relacionados à formulários

:input Seleciona <input>, <textarea>, e elementos <select>

:radio Selecionam inputs com type="radio"

:selected Seleciona inputs que estão selecionados

:submit Seleciona inputs com type="submit"

:text Seleciona inputs com type="text"...

Um Método, Diferentes usos

$(...).html();

$(...).html(“<p>hello</p>”);

$(...).html();

$(...).html(“<p>hello</p>”);

$(...).html(function(i){ return “<p>hello “ + i + “</p>”;});

$(...).html();

$(...).html(“<p>hello</p>”);

$(...).html(function(i){ return “<p>hello “ + i + “</p>”;}); Lembram da

sobrecarga ?

Este método é um exemplo de "sobrecarga".

Getters & Setters

O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome do método usado para obter um valor

Getters & Setters

O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome do método usado para obter um valor.

O método $.fn.html usado como setter$('h1').html('olá mundo');

Getters & Setters

O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome do método usado para obter um valor.

O método $.fn.html usado como setter$('h1').html('olá mundo');

O método html usado como getter$('h1').html();

JQuery MétodosMovendoappend(), appendTo(), before(), after(),

Atributoscss(), attr(), html(), val(), addClass()

Eventosbind(), trigger(), unbind(), live(), click()

Travessiafind(), is(), prevAll(), next(), hasClass()

Efeitosshow(), fadeOut(), toggle(), animate()

Ajaxget(), getJSON(), post(), ajax(), load()

Método $()

Podemos passar uma função para o método $(), que será executada após o HTML ser carregado.

Método $()

$(function(){

Método $()

$(function(){ // código será executado após o carregamento do DOM });

Método $()

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

$(“#foo”).append(“<p>test</p>”);

<html><body><div>jQuery</div> <div id=”foo”>example</div></body></html>

Movendo elementos

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

$(“p”).appendTo(“#foo”);

Movendo elementos

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

Copiando elementos

$(“p”).clone()

Copiando elementos

$(“p”).clone().appendTo(“#foo”);

Copiando elementos

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

$(“<p>”, {text:"teste"})

Criando elementos

$(“<p>”, {text:"teste"}).appendTo(“#foo”);

Criando elementos

$(“<p>”, {text:"teste"}).appendTo(“#foo”);

<html><body><div id=”foo”><p>teste</p> </div></body></html>

Atributos

.attr(‘id’)

Atributos

.attr(‘id’)

.html()

Atributos

.attr(‘id’)

.html()

.css(“fontSize”)

Atributos

.attr(‘id’)

.html()

.width()

.attr(‘id’, ‘foo’)

Atributos

.attr(‘id’)

.html()

.width()

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

Atributos

.attr(‘id’)

.html()

.width()

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

Atributos

.attr(‘id’)

.html()

.width()

.width(60)

Atributos

.attr(‘id’)

.html()

.width()

.width(60)

Largura do primeiro elemento

Atributos

.attr(‘id’)

.html()

.width()

.width(60)

Largura do primeiro elemento

Largura de todos elemento

Atributos

Seta a borda para 1px black

$(...).css(“border”, “1px solid black”);

Atributos

Seta varias propriedades CSS.$(...).css({ “background”: “yellow”, “height”: “400px”});

Atributos

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

$h1.toggleClass('big');Adiciona se ainda não foi adiciona e remove caso contrário.

Atributos

$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

Atributos

Mude HTML com um novo parágrafo.