jquery básico (parte 2)

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

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.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”});

jquery básico (parte 2)

Technology