Your SlideShare is downloading. ×
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
jQuery na Prática!
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,259

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,259
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
465
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?

×