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)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie jQuery básico (parte 2)

Ähnlich wie jQuery básico (parte 2) (20)

jQuery básico (parte 2)