jquery básico (parte 2)
Post on 11-Jun-2015
1.153 Views
Preview:
DESCRIPTION
TRANSCRIPT
jQueryIniciando (Parte II)
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)
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
Agenda
DOMSeletores avançadosGerenciando eventosEfeitosAJAX
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
DOM.intro()
<html><head>
<title>My title</title></head><body>
<a href=“”>My link</a><h1>My header</h1>
</body></html>
DOM.intro()
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
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>
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>
DOM.creating().jQuery2()
<script type=“text/javascript”>$('<a href="http://www.google.com"
target="_blank">Link!</a>').appendTo('body');
</script>
DOM.creating().jQuery3()
<script type=“text/javascript”>$('<a>')
.attr('href', 'http://www.google.com')
.attr('target', '_blank')
.text('Link!')
.appendTo('body');</script>
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();
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)
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
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/
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”))
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
Eventos.example()
<script>var a = $(“a”);a.bind(‘click’, function() { alert(“Hey!” });
a.trigger(‘click’);</script>
Eventos
O jQuery provê atalhos para os eventos mais comuns (click, dblclick, blur, change, load, focus, …)
http://api.jquery.com/category/events/
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/
Efeitos.animation()
O método animate() altera as propriedades visuais do elemento em uma determinada duração
Efeitos.animation().example()
<script type=“text/javascript”>$("#block").animate(
{width: "70%",opacity: 0.4,marginLeft: "0.6in",fontSize: "3em",borderWidth: "10px“
},1500
);</script>
Efeitos.visibility()
Os método show(), hidden(), toggle() alteram a visibilidade do elemento
Efeitos.visibility().example()
<script type=“text/javascript”>$("#block").show();$("#block").hide();$("#block").toggle();$("#block").toggle();</script>
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)
AJAX.intro()
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
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
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>
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
AJAX.usage().crossDomain()
GET teste.php?callback=teste
teste({“nome”: “Luís”});
top related