jQuery básico (parte 2)

RetrospectivaTivemos uma visão geral sobreJavascriptUsoTiposOOPjQueryO que éComo funcionaSeletores básicosExemplo prático (validação de formulário)

ObjetivosConhecer outros seletores do jQueryConhecer as possibilidades que o jQuery oferece para manipulação de eventos e animações de elementosEntender sobre requisições assíncronas e como utilizá-las com o jQuery

AgendaDOMSeletores 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()Cadaelemento é vistocomoumaramificação do documento (nó)O conteúdotexto das tags é um nó de textoligado à tagVia 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()Javascriptelement.appendChild(node) – adiciona um nófilhoaoelemento (últimofilho)jQueryelement.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()Javascriptelement.removeChild(node) – remove um nófilho do elementojQueryelement.remove() – remove o elementoelement.remove(selector) – remove oselementosencontradosdentro do elemento

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

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

EventosAtravés do métodobind() podemosdefinirumafunçãopara um oumaiseventosAtravés do métodotrigger()podemoschamar a função de um eventoAtravé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>

EventosO jQueryprovêatalhosparaoseventosmaiscomuns (click, dblclick, blur, change, load, focus, …)http://api.jquery.com/category/events/

EfeitosO 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ínioPodemsertransferidos dados XML, JSON, HTML ouatétextoplanoAs requisiçõessãorealizadasatravés do objetoXMLHttpRequestAs requisiçõespodemserassíncronaousíncrona

AJAX.usage()Deveserutilizadaquandoqueremosenviaroubuscarinformações do servidorsemrecarregar a páginaO 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=testeteste({“nome”: “Luís”});

jQuery básico (parte 2)

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a jQuery básico (parte 2)

Último

jQuery básico (parte 2)