Your SlideShare is downloading. ×
jQuery na Prática!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery na Prática!

11,195

Published on

Aula apresentada por mim na disciplina de Tópicos Especiais 2

Aula apresentada por mim na disciplina de Tópicos Especiais 2

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,195
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
463
Comments
0
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Apresentado por José Alexandre Macedo
  • 2. O que é jQuery? Biblioteca JavaScript rápida e concisa que simplifica percorrer documentos HTML, manipular eventos, criar animações e interações Ajax para um desenvolvimento web rápido O jQuery foi desenvolvido para mudar a forma com que você escreve JavaScript!
  • 3. Por que utilizá-lo? • Aumento da produtividade • 24kb (versão 1.4.2) para fazer tudo o que você precisa – requisições AJAX – iteração e criação de elementos DOM – tratamento de eventos • Cross-browser – Funciona no Internet Explorer 6.0+, Firefox 2.0+, Safari 2.0+ e Opera 9.0+ • Open Source
  • 4. Por que utilizá-lo?
  • 5. Quem utiliza jQuery?
  • 6. Manipulação de Elementos DOM • DOM = Document Object Model • Padrão da W3C que define um conjunto de objetos para o HTML e forma de acessá-los e manipulá-los – Todos os elementos HTML, assim como seus textos e atributos podem ser acessados via DOM – Podem ser modificados, removidos, e novos elementos podem ser criados • O HTML DOM é uma plataforma independente de linguagem – A linguagem mais usada para acessá-lo é o JavaScript (onde o jQuery entra para facilitar as coisas) • Window, Document, Table, IFrame, Link, Input Button, InputRadio e Select são alguns dos objetos DOM.
  • 7. A função $ () • Função para selecionar um ou mais elementos DOM em uma página HTML e manipulá-los de diversas formas • É possível fazer outras chamadas subsequentes para filtrar ou adicionar mais objetos a seleção atual e manipulá-los • O $ por si só é um alias para a "classe" jQuery
  • 8. Preparando para o Hello World • Colocar dentro da tag <head> <script src="jquery.js" type="text/javascript"></script> <script src="meujs.js" type="text/javascript"></script> • Colocar dentro do <body> <h1>Hello World com jQuery!</h1> <a id="first" href="#">Link 0</a> <a name="top" href="#">Link 1</a><a name="bottom" href="#">Link 2</a> <div id="div1"> </div>
  • 9. Hello World no jQuery! • No arquivo meujs.js adicionar $(document).ready(function() { $("a").click(function() { alert("Olá mundo!"); }); });
  • 10. Hello World no jQuery! • Vamos dar uma olhada no que estamos fazendo: – $("a") seleciona todos os elementos <a> – A função click() é um método do objeto jQuery. Liga o evento clique a todos os elementos selecionados e executa a função fornecida quando o evento ocorre – Similar ao código: • <a href="#" onclick="alert('Olá mundo')">Link</a>
  • 11. Exercicio 1 • $('div').add('p.quote').html('um pequeno teste!'); • $("#rodape").css('color', 'red'); – Obtém o elemento com ID igual a rodapé e altera sua cor para vermelho. • $("button.classButtons").click(function() { alert('Bom Dia') }); – Obtém todos os elementos do tipo button com classe classButtons e vincula o evento onclick (ao clicar) desse elemento à uma função que exibe uma caixa de diálogo (alert) • $('td').css("color","blue"); – Obtém todos os elementos td (células de tabelas) e para cada elemento encontrado executa uma função que exibe uma caixa de diálogo (alert) com ID do elemento • $("tr:first").css("font-style","italic"); – Obtém apenas o primeiro elemento tr encontrado
  • 12. Possibilidades de seleção
  • 13. Seleção Básica • #id. Seleciona o elemento com determinado id – Exemplo: $("#primDiv").css("background-color","black"); • elemento. Seleção pelo elemento HTML – Exemplo: $("div").css("border","9px double red"); • .classe. Elementos de determinada classe – Exemplo: $(".destaque").css("fontWeight","bolder"); • .classe.classe. Elementos que pertençam a ambas classes. – Exemplo: $(".destaque. especial").css("color","red"); • *. Todos elementos – Exemplo: $("*").css("color","black"); • Combinação dos anteriores com virgula – Exemplo: $("div,span,p.olho").css("margin","3px 0 0 0");
  • 14. Seleção Hierarquia • Ascendente Descendente. Seleção de descendentes de determinado elemento – Exemplo: $("form label").css("color","gray"); • Pai > Filho. Seleção de elementos-filho de um determinado elemento – Exemplo: $("#conteudo > *") .css("border","2px solid green"); • Anterior + Seguinte. Seleção de elemento que segue-se a um determinado elemento – Exemplo: $("label + input").css("border","1px dotted blue"); • Anterior ~ Irmãos. Seleção de elementos-irmãos após determinado elemento – Exemplo: $("#inicio ~ div").css("color","aquamarine");
  • 15. Seleção com Filtros • :first. Primeiro elemento da seleção – Exemplo: $("tr:first").css("font-style","italic"); • :last. Inverso de :first • :not(seletor). Filtra elementos que não se encaixam em determinado seletor – Exemplo: $("input:not(:checked) + span") .css("border","1px dotted darkSalmon"); • :even. Elementos com índice par, considerado que o índice inicia em zero. – Exemplo: $("tr:even").css("background-color","lavender"); • :odd. Inverso de :even • :eq(índice). Determinado elemento pelo seu índice – Exemplo: $("td:eq(2)").css("background-color","MintCream"); • :gt(índice). Todos elementos com índice superior a determinado valor. – Exemplo: $("p:gt(1)").hide(); • :lt(índice). Inverso de :gt(índice) • :header. Todos elementos header – Exemplo: $(":header").css("color","navy"); • :animated. Todos elementos que estão sendo animados no momento da seleção.
  • 16. Seleção com Filtros de Conteúdo • :contains(texto). Seleciona elementos que contenha determinado texto – Exemplo: $("p:contains('JQuery')").css("text-decoration","underline"); • :empty. Seleciona elementos sem filhos – Exemplo: $("td:empty").css("background-color","MediumOrchid"); • :has(seletor). Seleciona elementos que contenham ao menos um determinado elemento que combine com o seletor informado – Exemplo: $("div:has(p)").addClass("grade"); • :parent. Seleciona elementos que tenham elementos filhos – Exemplo: $("td:parent").hide();
  • 17. Seleção com Filtros de Visibilidade • :hidden: Seleciona elementos ocultados – Exemplo: $("div:hidden").show(2000); • :visible. Inverso de :hidden
  • 18. Seleção com Filtros de Atributos • [atributo]. Elementos que contenham determinado atributo – Exemplo: $("div[id]").css("color","lime"); • [atributo=valor]. Elementos com atributo que tenham determinado valor – Exemplo: $("p[class='ocultar']").hide(3000); • [atributo!=valor]. Elementos com atributo que não tenham determinado valor • [atributo^=valor]. Elementos com atributo que inicie com determinado valor – Exemplo: $("input[name^='req']").val("Requerido"); • [atributo$=valor]. Elementos com atributo que termine com determinado valor • [atributo*=valor]. Elementos com atributo que contenha determinado valor • Estes filtros podem ser combinados como neste exemplo: $("input[type='text'][id]").css("color","Darkred");
  • 19. Seleção por Elementos do formulário • Também podem ser selecionados os elementos de formulários como – :input – :text – :password – :radio – :checkbox – :submit – :image – :reset – :button – :file • Exemplo – $("form :checkbox").css("border","2px solid LightSlateGray");
  • 20. Seleção por Estado dos Elementos de Formulário • Os elementos de formulários podem ter sua seleção refinada pelo estado destes elementos São exemplos • :enabled • :disabled • :checked • :selected • Um exemplo de uso seria – alert($("input:checked").length + " selecionados");
  • 21. Exercicio 2 - Efeitos • Dentro da tag <body> <h1>Exercicio 2 com jQuery</h1> <button id="btn1">Show div</button> <button id="btn2">Desaparecer div</button> <div class="texto" id="div1"> <p> Caixa de texto que aparecerá e desaparecerá com as funções do jQuery!</p> </div>
  • 22. Exercicio 2 - Efeitos • Dentro da arquivo meujs.js $(document).ready(function() { $("#btn1").click(function() { $("#div1").fadeIn(); }); $("#btn2").click(function() { $("#div1").fadeOut(); }); });
  • 23. Ajax com jQuery!
  • 24. Preparando o terreno • Criar novo projeto Php • Adicionar biblioteca jQuery • Importar o caminho da biblioteca no <head> • Criar uma página que receberá o código html <button id="btn1">Carregar Feeds por ajax</button><div class="texto" id="feeds">Ao carregar os feedseste texto irá sumir!</div>
  • 25. • Com jQuery realizar requisições ajax tornou-se uma tarefa extramente trivial – Adicionar no arquivo meujs.js • $("#btn1").click(function() { $("#feeds").load("feeds.html"); }); • Realiza uma requisição GET para feeds.html e insere o resultado no elemento com ID igual a feeds
  • 26. • Utilizando o post para enviar dados • Adicionar o código html <p>Envie algum dado por ajax!</p> <input type="text" id="myInputText"/><br/> <button id="btn2">Enviar texto por post</button> <div class="texto" id="feedsPost"> Ao carregar os feeds(por ajax) este texto irá sumir! </div>
  • 27. • Utilizando o post para enviar dados • Adicionar no meujs.js $("#btn2").click(function() { $("#feedsPost").load("pagina.php", { dado: $("#myInputText").val() }, function(){ alert("Fim do carregamento dos dados!"); }); }); – Realiza uma requisição POST à página feeds.php passando o parâmetro dado com o valor dadopassado
  • 28. • Complemento para jQuery • Conjunto de componentes para construção de interfaces gráficas • Construção de componentes com funcionalidade de arrastar e soltar (drag and drop) • Componentes que podem ter seus tamanhos alterados (resizable) • Componentes tradicionais – Barras de progresso – Accordion – Calendário (date picker) – Caixas de diálogo e confirmação – Tab panels – Inputs com auto-complete • Com a mesma simplicidade anteriormente apresentada!
  • 29. Preparando para utilizar jQuery UI • Novo Projeto PHP • Adicionar na tag <head> <link type="text/css" href="libs/jquery-ui/css/ui-lightness/jquery-ui- 1.8.1.custom.css" rel="stylesheet" /> <script src="libs/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="libs/jquery-ui/js/jquery-ui- 1.8.1.custom.min.js"></script> <script src="libs/meujs.js" type="text/javascript"></script> • Para cada exercício criar uma nova página
  • 30. UI - Abas com conteúdo estático <div id="abas"> No arquivo meujs.js <ul> <li><a href="#panel1">Panel 1</a></li> <li><a href="#panel2">Panel 2</a></li> <li><a href="#panel3">Panel 3</a></li> $("#abas").tabs(); </ul> <div id="panel1"> <p>Conteudo do painel 1</p> </div> <div id="panel2"> <p>Conteudo do painel 2</p> </div> <div id="panel3"> <p>Conteudo do painel 3</p> </div> </div>
  • 31. UI - Abas com conteúdo via ajax <div id="abas"> No arquivo meujs.js <ul> <li><a href="pag.php?dado=id1">Show $("#abas").tabs(); Time</a></li> <li><a href="pag.php?dado=id2"> Show Small Numbers</a></li> <li><a href="pag.php?dado=id3"> Show Big Numbers</a></li> </ul> </div>
  • 32. UI - DataPicker
  • 33. UI - DataPicker <h1>Exemplos 4 - jQuery UI DataPicker</h1> <form action=#"> <table> <tr><td align="right"> From: <input type="text"/></td></tr> <tr><td align="right"> Departure Date: <input type="text" id="start-date"/></td></tr> <tr><td align="right"> To: <input type="text"/></td></tr> <tr><td align="right"> Return Date: <input type="text" id="end-date"/></td></tr> <tr><td align="center"> <input type="button" value="Show Flights"/> <input type="button" value="Show Hotels"/> </td></tr> </table> </form>
  • 34. UI - DataPicker • No arquivo meujs.js $("#start-date").datepicker(); $("#end-date").datepicker();
  • 35. UI - Autocomplete <h1>Exemplos 4 - jQuery UI No arquivo meujs.js Autocomplete</h1> var availableTags = ["c++", "java", <label for="autoc">Tags: </label> "php", "coldfusion", <input id="autoc" /> "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; $("#autoc").autocomplete({ source: availableTags });
  • 36. UI - Button <h1>Exemplos 4 - jQuery UI No arquivo meujs.js Botões</h1> $("button, <button>Utilizando elemento botão</button> input:submit, a").button(); <input type="submit" value="Utilizando input tipo submit"/> <a href="#">Utilizando tag a</a>
  • 37. UI - Dialog <h1>Exemplos 4 - jQuery UI No arquivo meujs.js Dialog</h1> <div id="dialog-modal" $("#dialog-modal").dialog({ title="Exemplo básico de janela height: 200, com modal"> modal: true <p>Adicione informações dentor do seu dialog!</p> }); </div>
  • 38. UI - Dragdrop <div id="draggable" class="ui- No arquivo meujs.js widget-content" style="width: 150px; height: 150px; padding: $("#draggable").draggable(); 0.5em;"> <p>Arraste-me!</p> </div>
  • 39. Plugins • Grande quantidade de plugins disponíveis – validação de formulários – componentes visuais – datagrids – tool tips – slide shows – formatação de números – internacionalização – efeitos visuais
  • 40. Quero mais! • Documentação Oficial jQuery – http://docs.jquery.com/Main_Page • Documentação com exemplos – http://visualjquery.com/ • Tutorias – http://docs.jquery.com/Tutorials • 50 plugins – http://www.noupe.com/jquery/50-amazing-jquery-examples- part1.html • Plugins – http://plugins.jquery.com/ • Livro recomedado – jQuery in Action
  • 41. Duvidas?

×