jquery básico (parte 2)
DESCRIPTION
Trabalhamos aqui uma visão geral sobre manipulação DOM, criação de efeitos e envio de requisições assíncronas usando jQueryTRANSCRIPT
![Page 1: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/1.jpg)
jQueryIniciando (Parte II)
![Page 2: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/2.jpg)
Retrospectiva
Tivemos uma visão geral sobre◦Javascript
Uso Tipos OOP
◦jQuery O que é Como funciona Seletores básicos Exemplo prático (validação de formulário)
![Page 3: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/3.jpg)
Objetivos
Conhecer outros seletores do jQueryConhecer as possibilidades que o jQuery
oferece para manipulação de eventos e animações de elementos
Entender sobre requisições assíncronas e como utilizá-las com o jQuery
![Page 4: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/4.jpg)
Agenda
DOMSeletores avançadosGerenciando eventosEfeitosAJAX
![Page 5: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/5.jpg)
DOM.intro()
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.“
http://www.w3schools.com/htmldom/dom_intro.asp
![Page 6: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/6.jpg)
DOM.intro()
<html><head>
<title>My title</title></head><body>
<a href=“”>My link</a><h1>My header</h1>
</body></html>
![Page 7: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/7.jpg)
DOM.intro()
![Page 8: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/8.jpg)
DOM.intro()
Cada elemento é visto como uma ramificação do documento (nó)
O conteúdo texto das tags é um nó de texto ligado à tag
Via Javascript utilizamos basicamente o objeto document para criar novos nós
![Page 9: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/9.jpg)
DOM.creating().pureJs()
<script type=“text/javascript”>var link = document.createElement('a');link.href = "http://www.google.com";link.target = "_blank";link.appendChild(
document.createTextNode('Link!'));
document.body.appendChild(link);</script>
![Page 10: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/10.jpg)
DOM.creating().jQuery1()
<script type=“text/javascript”>var link = $('<a>');link.attr('href', 'http://www.google.com');link.attr('target', '_blank');link.text('Link!');
link.appendTo('body');</script>
![Page 11: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/11.jpg)
DOM.creating().jQuery2()
<script type=“text/javascript”>$('<a href="http://www.google.com"
target="_blank">Link!</a>').appendTo('body');
</script>
![Page 12: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/12.jpg)
DOM.creating().jQuery3()
<script type=“text/javascript”>$('<a>')
.attr('href', 'http://www.google.com')
.attr('target', '_blank')
.text('Link!')
.appendTo('body');</script>
![Page 13: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/13.jpg)
DOM.basicSelections()
Javascript jQuery
document.getElementById(“id”) $(“#id”)
document.getElementsByTagName(“a”) $(“a”);
document.getElementsByClassName(“class”); (HTML5)
$(“.class”);
element.childNodes element.children();
element.parentNode element.parent();
![Page 14: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/14.jpg)
DOM.appending()
Javascript◦ element.appendChild(node) – adiciona um nó filho
ao elemento (último filho)jQuery
◦ element.append(node) – adiciona um nó filho ao elemento (último filho)
◦ element.appendTo(node) – adiciona o elemento como nó filho do element passado (último filho)
◦ element.prepend(node) – adiciona um nó filho ao elemento (primeiro filho)
◦ element.prependTo(node) – adiciona o elemento como nó filho do element passado (primeiro filho)
![Page 15: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/15.jpg)
DOM.removing()
Javascript◦element.removeChild(node) – remove um
nó filho do elementojQuery
◦element.remove() – remove o elemento◦element.remove(selector) – remove os
elementos encontrados dentro do elemento
![Page 16: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/16.jpg)
Seletores avançados
Através do jQuery podemos selecionar os elementos através dos atributos das tags. A sintaxe similar ao CSS:◦$(‘label’)◦$(‘label[for=“nome”]’)
http://api.jquery.com/category/selectors/
![Page 17: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/17.jpg)
Seletores avançados
Também podemos fazer verificações com os seletores (se está visível, selecionado, …) através do método is()◦if ($(“#barraLateral”).is(“:hidden”))
![Page 18: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/18.jpg)
Eventos
Através do método bind() podemos definir uma função para um ou mais eventos
Através do método trigger() podemos chamar a função de um evento
Através do método unbind() podemos remover a função dos eventos
![Page 19: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/19.jpg)
Eventos.example()
<script>var a = $(“a”);a.bind(‘click’, function() { alert(“Hey!” });
a.trigger(‘click’);</script>
![Page 20: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/20.jpg)
Eventos
O jQuery provê atalhos para os eventos mais comuns (click, dblclick, blur, change, load, focus, …)
http://api.jquery.com/category/events/
![Page 21: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/21.jpg)
Efeitos
O jQuery possibilita criarmos efeitos com os elementos através de métodos como: animate(), fadeIn(), fadeOut(), fadeTo, hide(), show(), toggle(), slide()
http://api.jquery.com/category/effects/
![Page 22: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/22.jpg)
Efeitos.animation()
O método animate() altera as propriedades visuais do elemento em uma determinada duração
![Page 23: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/23.jpg)
Efeitos.animation().example()
<script type=“text/javascript”>$("#block").animate(
{width: "70%",opacity: 0.4,marginLeft: "0.6in",fontSize: "3em",borderWidth: "10px“
},1500
);</script>
![Page 24: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/24.jpg)
Efeitos.visibility()
Os método show(), hidden(), toggle() alteram a visibilidade do elemento
![Page 25: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/25.jpg)
Efeitos.visibility().example()
<script type=“text/javascript”>$("#block").show();$("#block").hide();$("#block").toggle();$("#block").toggle();</script>
![Page 26: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/26.jpg)
AJAX.intro()
“AJAX (acrônimo em língua inglesa de Asynchronous Javascript and XML, em português "Javascript e XML Assíncronos") é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações”
http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)
![Page 27: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/27.jpg)
AJAX.intro()
![Page 28: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/28.jpg)
AJAX.intro()
Requisição HTTP realizada pelo navegador para uma URL do mesmo domínio
Podem ser transferidos dados XML, JSON, HTML ou até texto plano
As requisições são realizadas através do objeto XMLHttpRequest
As requisições podem ser assíncrona ou síncrona
![Page 29: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/29.jpg)
AJAX.usage()
Deve ser utilizada quando queremos enviar ou buscar informações do servidor sem recarregar a página
O ideal é que sejam trafegados poucos dados e usando Javascript manipular e criar elementos necessários
![Page 30: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/30.jpg)
AJAX.usage().example()
<script type=“text/javascript”>$.ajax(
{url: “teste.php”,data: {nome: “Luís”},dataType: “json”,type: “POST”,success: function(result) {
alert(result);}
});</script>
![Page 31: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/31.jpg)
AJAX.usage().crossDomain()
Aproveitando a possibilidade de carregar arquivos Javascript externos, foi criado o conceito JSONP (JSON with padding) para realizar requisições em outros domínios.
A idéia é criar dinamicamente uma função e passar o nome dela por parâmetro na requisição, o servidor irá responder no formato JSON, passando por parâmetro para a função
![Page 32: jQuery básico (parte 2)](https://reader036.vdocuments.mx/reader036/viewer/2022070318/5579a30fd8b42ac1148b4903/html5/thumbnails/32.jpg)
AJAX.usage().crossDomain()
GET teste.php?callback=teste
teste({“nome”: “Luís”});