jQuery básico (parte 2)

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 jQuery Conhecer 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 DOM Seletores avançados Gerenciando eventos Efeitos AJAX

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() Cadaelemento é vistocomoumaramificação do documento (nó) O conteúdotexto das tags é um nó de textoligado à tag Via Javascriptutilizamosbasicamente o objetodocument paracriarnovosnós

DOM.creating().pureJs() <script type=“text/javascript”> varlink = 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”> varlink = $('<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.appending() Javascript element.appendChild(node) – adiciona um nófilhoaoelemento (últimofilho) jQuery element.append(node) – adiciona um nófilhoaoelemento(últimofilho) element.appendTo(node) – adiciona o elementocomonófilho do element passado(últimofilho) element.prepend(node)– adiciona um nófilhoaoelemento(primeirofilho) element.prependTo(node) – adiciona o elementocomonófilho do element passado(primeirofilho)

DOM.removing() Javascript element.removeChild(node) – remove um nófilho do elemento jQuery element.remove() – remove o elemento element.remove(selector) – remove oselementosencontradosdentro do elemento

Seletores avançados Através do jQuerypodemosselecionaroselementosatravés dos atributos das tags. A sintaxesimilar ao CSS: $(‘label’) $(‘label[for=“nome”]’) http://api.jquery.com/category/selectors/

Seletores avançados Tambémpodemosfazerverificações com osseletores(se estávisível, selecionado, …) através do método is() if ($(“#barraLateral”).is(“:hidden”))

Eventos Através do métodobind() podemosdefinirumafunçãopara um oumaiseventos Através do métodotrigger()podemoschamar a função de um evento Através do métodounbind()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 jQueryprovêatalhosparaoseventosmaiscomuns (click, dblclick, blur, change, load, focus, …) http://api.jquery.com/category/events/

Efeitos O jQuerypossibilitacriarmosefeitos com oselementosatravés de métodoscomo: animate(), fadeIn(), fadeOut(), fadeTo, hide(), show(), toggle(), slide() http://api.jquery.com/category/effects/

Efeitos.animation() O método animate() altera as propriedadesvisuais do elementoemumadeterminadaduraçã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() Osmé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 AsynchronousJavascript andXML, 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() Requisição HTTP realizadapelonavegadorparauma URL do mesmodomínio Podemsertransferidos dados XML, JSON, HTML ouatétextoplano As requisiçõessãorealizadasatravés do objetoXMLHttpRequest As requisiçõespodemserassíncronaousíncrona

AJAX.usage() Deveserutilizadaquandoqueremosenviaroubuscarinformações do servidorsemrecarregar a página O ideal é quesejamtrafegadospoucos dados e usandoJavascriptmanipular e criarelementosnecessá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 carregararquivosJavascriptexternos, foicriado o conceito JSONP (JSON with padding) pararealizarrequisiçõesem outros domínios. A idéia é criardinamicamenteumafunção e passar o nomedelaporparâmetronarequisição, o servidorirá responder no formato JSON, passandoporparâmetropara a função

AJAX.usage().crossDomain() GET teste.php?callback=teste teste({“nome”: “Luís”});

jQuery básico (parte 2)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (19)

Similaire à jQuery básico (parte 2)

Similaire à jQuery básico (parte 2) (20)

Dernier

Dernier (6)

jQuery básico (parte 2)