Your SlideShare is downloading. ×
0
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
J query 1
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

J query 1

628

Published on

jQuery, javascript

jQuery, javascript

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

  • Be the first to like this

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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. JQUERY - SELETORES
  • 2. JS NÃO-OBSTRUSIVO <ul><li>Com css a estrutura html ficou separada do estilo. </li></ul><ul><li>jQuery pretende facilitar a separação da estrutura html e o seu comportamento. </li></ul>
  • 3. DOM <ul><li>DOM (Document Object Model) é uma API HTML e XML especificada pela W3C </li></ul><ul><li>A API DOM oferece uma maneira padrão de se acessar os elementos de um documento. </li></ul><ul><li>Objetivo é padronizar o acesso ao XML </li></ul>
  • 4. JQUERY WRAPPER <ul><li>Adiciona recursos aos elementos nativos DOM </li></ul><ul><li>A maioria dos comandos jQuery retornam coleções Wrappers. </li></ul>
  • 5. SELETORES <ul><li>Seleção de elementos DOM via seletores. </li></ul><ul><li>Criação de elementos DOM. </li></ul><ul><li>Principal recurso do jQuery. </li></ul>
  • 6. TESTES <ul><li>http://www.bibeault.org/jqueryinaction/chapter2/lab.wrapped.set.html </li></ul><ul><li>Testar comandos jQuery em tempo real. </li></ul><ul><li>http://docs.jquery.com/Selectors </li></ul>
  • 7. CONFIGURAÇÃO <ul><li>Copiar a biblioteca jQuery (16k zipada, 97k versão para estudos) </li></ul><ul><li>Referenciá-la na página </li></ul>
  • 8. ANTES DE USAR OS COMANDOS... <ul><li>Necessidade de que a árvore DOM esteja totalmente carregada </li></ul><ul><li>$(document).ready(function() { //faça }); </li></ul><ul><li>Atalho: $(function() { //faça }); </li></ul>
  • 9. EXERCÍCIO <ul><li>Realizar um alerta utilizando jQuery. </li></ul>
  • 10. SELETORES CSS <ul><li>Conjunto de métodos seletores </li></ul><ul><li>Seleção através de ID, class, nome da tag e hierarquia </li></ul><ul><li>Típico comando jQuery: $(“a”) </li></ul>
  • 11. COMANDOS BÁSICOS <ul><li>$(‘a’) - Retorna todos os elementos links (&lt;a&gt;). </li></ul><ul><li>$(‘#idElem’) - Encontra o elemento que possui um atributo id com o valor “idElem”. </li></ul><ul><li>$(‘.tagClass’) – Encontra os elementos que possuem o class igual a “tagClass”. </li></ul>
  • 12. OPERADORES <ul><li>Espaço – encontra elementos que são descendentes </li></ul><ul><li>&gt; - Encontra elementos que estão diretamente aninhados </li></ul><ul><li>+ - Busca em todos os elementos irmãos. </li></ul>
  • 13. COMANDOS BÁSICOS <ul><li>$(‘p a.tagClass’) – Encontra todos os links localizados dentro de elementos &lt;p&gt; com o class “tagClass”. </li></ul>
  • 14. EXERCÍCIOS <ul><li>1 - Criar um comando jQuery que encontre o elemento DIV que possua o id ‘someDiv‘. </li></ul><ul><li>2 - Encontrar todos os links localizados dentro de uma tag &lt;li&gt;. </li></ul><ul><li>3 - Encontrar todas as tags &lt;li&gt; que estão aninhadas dentro de elementos que possuem class igual a myList. </li></ul>
  • 15. EXERCÍCIOS <ul><li>4 – Selecionar somente os links que são filhos diretos de um elemento &lt;li&gt;, que por sua vez estão diretamente aninhados ao elementos &lt;ul&gt; que possuam a class myList . </li></ul>
  • 16. SELETORES AVANÇADOS <ul><li>Selecionar elementos diretamente aninhados a outros. </li></ul><ul><li>Encontrar elementos que possuem determinados atributos. </li></ul><ul><li>Pesquisar pela hierarquia. </li></ul>
  • 17. SELETORES AVANÇADOS <ul><li>E[A] Encontra todos os elementos E que possuem um atributo A. </li></ul><ul><li>E[A=V] Encontra todos os elementos E que possuem um atributo A, que por fim possui o valor V. </li></ul><ul><li>E[A^=V] Encontra todos os elementos E que possuem um atributo A que começa com a letra V. </li></ul>
  • 18. SELETORES AVANÇADOS <ul><li>E[A$=V] Encontra todos elementos E com atributo A que possui o valor que termina com V. </li></ul><ul><li>E[A*=V] Encontra todos elementos E com atributo A o qual o valor contém V. </li></ul><ul><li>E:has(F) Encontra todos elementos E os quais possui ao menos um descendente com a tag name F. </li></ul>
  • 19. SELETORES AVANÇADOS <ul><li>E&gt;F Procura todos os elementos F descendentes diretos de E. </li></ul><ul><li>E+F Encontra todos os elementos F que são imediatamente precedido por um irmão E </li></ul><ul><li>E~F Encontra todos os F precedidos por um irmão E. </li></ul>
  • 20. CONTAINER SELECTOR <ul><li>Selecionar apenas elementos que contêm algum outro elemento aninhado recebido como parâmetro. </li></ul><ul><li>li:has(a) </li></ul><ul><li>Somente um nível aninhado é suportado </li></ul>
  • 21. SELETORES POR POSIÇÃO <ul><li>Necessidade de buscar elementos por sua posição. </li></ul><ul><ul><li>:first- li:child </li></ul></ul><ul><ul><li>:last </li></ul></ul><ul><ul><li>:first-child - li:first-child </li></ul></ul><ul><ul><li>:last-child </li></ul></ul><ul><ul><li>:only-child </li></ul></ul>
  • 22. SELETORES POR POSIÇÃO <ul><ul><li>:nth-child( n ) - li:nth-child(2) </li></ul></ul><ul><ul><li>:nth-child( even | odd ) </li></ul></ul><ul><ul><li>:even / :odd </li></ul></ul><ul><ul><li>:eq( n ) </li></ul></ul><ul><ul><li>:gt( n ) </li></ul></ul><ul><ul><li>:lt( n ) </li></ul></ul>
  • 23. SELETORES XPATH (DEPRECIADO) <ul><li>Suporte básico XPath. </li></ul><ul><li>http://jquery.com/plugins/project/xpath </li></ul>
  • 24. EXERCÍCIOS <ul><li>1 – Selecionar todos os elementos &lt;div&gt; que possuem o atributo title, que também possua o valor começando com ‘my’. </li></ul><ul><li>2 - Recuperar todas as células que contém os nomes das linguagem de programação; </li></ul><ul><li>3 – Encontrar todas as tags &lt;li&gt; que são o último elemento aninhado. </li></ul>
  • 25. EXERCÍCIOS <ul><li>4 - Retornar a primeira ocorrência de um link </li></ul><ul><li>que está aninhado a tag &lt;li&gt;. </li></ul><ul><li>5 – Selecionar links para arquivos pdf. </li></ul>
  • 26. COMANDOS JQUERY CUSTOMIZADOS <ul><li>Seletores CSS possuem algumas limitações. </li></ul><ul><li>Adição de seletores que filtram pelo estado do elemento foi adicionado. </li></ul>
  • 27. COMANDOS JQUERY CUSTOMIZADOS <ul><li>:checkbox – Seleciona todos os elementos do tipo checkbox </li></ul><ul><li>:checked – Encontra todos os elementos atualmente checkados. </li></ul><ul><li>:visible – Seleciona todos os elementos que estão atualmente visíveis. </li></ul>
  • 28. COMANDOS JQUERY CUSTOMIZADOS <ul><li>:checkbox:checked:enabled </li></ul><ul><ul><li>Encontra todos os elementos do tipo checkbox, checkados e habilitados. </li></ul></ul><ul><li>input:not(:checkbox) </li></ul><ul><ul><li>Seleciona todos os elementos input que não são do tipo checkbox. </li></ul></ul><ul><li>contains(teste) </li></ul><ul><ul><li>Seleciona elementos que contenham como valor o texto ‘teste’. </li></ul></ul>
  • 29. COMANDOS JQUERY CUSTOMIZADOS <ul><li>:input </li></ul><ul><ul><li>Encontra todos inputs da página </li></ul></ul><ul><li>input:text </li></ul><ul><ul><li>Retorna todos os inputs que possuem o type text </li></ul></ul>
  • 30. MÉTODOS JQUERY <ul><li>not(expressão) </li></ul><ul><ul><li>jQuery(‘div’).not(‘div.naoSeleciona’); </li></ul></ul><ul><li>find(expressão) </li></ul><ul><ul><li>$(‘div’).css(‘background-color’,’blue’) </li></ul></ul><ul><ul><li>.find(‘img’).css(‘border’,’1px solid aqua’); </li></ul></ul>
  • 31. FILTROS <ul><li>filter(expression) </li></ul><ul><ul><li>jQuery(‘div’).class(‘blue’).(‘div.vermelho’).class(‘vemelho’); </li></ul></ul><ul><li>slice(being,end) </li></ul><ul><ul><li>jQuery(‘div’).slice(2, 3); </li></ul></ul>
  • 32. MÉTODOS DE BUSCA <ul><li>children(expression) </li></ul><ul><ul><li>Recupera os filhos dos elementos da coleção </li></ul></ul><ul><li>next(expression) </li></ul><ul><ul><li>Retorno o irmão imediatamente posterior a cada item da coleção </li></ul></ul>
  • 33. <ul><li>nextAll(expression) </li></ul><ul><ul><li>Recupera todos os irmãos posteriores ao item da coleção </li></ul></ul><ul><li>parent(expression) </li></ul><ul><ul><li>Retorna o pai de cada item da coleção </li></ul></ul>
  • 34. <ul><li>parents(expression) </li></ul><ul><ul><li>Recupera todos os ascendentes do elemento da coleção </li></ul></ul><ul><li>prev(expression) </li></ul><ul><ul><li>Retorno o irmão imediatamente anterior a cada item da coleção </li></ul></ul>
  • 35. <ul><li>prevAll(expression) </li></ul><ul><ul><li>Recupera todos os irmãos anteriores ao item da coleção </li></ul></ul>
  • 36. ENCADEAMENTO <ul><li>andSelf() </li></ul><ul><ul><li>$(‘div’).css(‘background-color’,’yellow’) </li></ul></ul><ul><ul><li>.children(‘img’).css(‘border’,’4px ridge maroon’) </li></ul></ul><ul><ul><li>.andSelf().css(‘margin’,’4em’); </li></ul></ul><ul><li>end() </li></ul><ul><ul><li>$(‘div’).add(‘p’).css(‘color’,’red’).end().hide(); </li></ul></ul>
  • 37. INCLUINDO HTML DINAMICAMENTE <ul><li>Usar o método html, que recebe um string como parâmetro. </li></ul><ul><li>var mensagem = $(&amp;quot;&lt;p&gt;Olá&lt;/p&gt;“); </li></ul><ul><li>$(‘divR’).html(mensagem); </li></ul>
  • 38. COMANDOS - INTERAÇÃO <ul><li>Existem alguns métodos para interagir com o retorno. </li></ul>
  • 39. MANIPULAÇÃO <ul><li>Retornar a quantidade de elementos retornados() </li></ul><ul><ul><li>$(‘img’).size(); </li></ul></ul><ul><li>Recuperar um elemento específico </li></ul><ul><ul><li>Através do índice: $(`img`)[0] </li></ul></ul><ul><ul><li>Usando comando jQuery: $(`img`).get(0) </li></ul></ul>
  • 40. MANIPULAÇÃO <ul><li>Retornar a posição do primeiro elemento que satisfaz os critérios passados como parâmetro. </li></ul><ul><ul><li>var n = $(&apos;img&apos;).index($(&apos;img#id&apos;)[0]); </li></ul></ul><ul><li>Concatenar duas coleções jQuery </li></ul><ul><ul><li>$(‘img[teste], img[res]’) ou $(‘img[teste]’).add (‘img[res]’) </li></ul></ul>
  • 41. MANIPULAÇÃO <ul><li>Procurar determinado elemento passado como parâmetro e retornar seu índice. </li></ul><ul><ul><li>var n = $(&apos;img&apos;).index($(&apos;img#id&apos;)[0]); </li></ul></ul><ul><li>Concatenar duas coleções jQuery </li></ul><ul><ul><li>$(img[teste], img[res]) ou $(img[teste]).add (img[res]) </li></ul></ul>
  • 42. MANIPULAÇÃO <ul><li>Indicar se ao menos um elemento do array satisfaz a condição. </li></ul><ul><ul><li>var temImagem = $(&apos;*&apos;).is(&apos;img&apos;); </li></ul></ul><ul><li>Alterar css dos elementos da coleção. </li></ul><ul><ul><li>$(‘div.escondida&apos;).css(‘display’,’hidden&apos;); </li></ul></ul>
  • 43. EXERCÍCIOS <ul><li>http://www.bibeault.org/jqueryinaction/chapter2/lab.wrapped.set.html </li></ul><ul><li>Testar os comandos jQuery para manipulação de elementos </li></ul>
  • 44. MANIPULANDO PROPRIEDADES <ul><li>Não existe um comando específico </li></ul><ul><li>Estratégia mais comum, usar o comando each e manipular </li></ul><ul><ul><li>$(&apos;img&apos;).each(function(n){ </li></ul></ul><ul><ul><li>this.alt=&apos; Imagem[&apos;+n+&apos;] &apos; ; </li></ul></ul><ul><ul><li>}); </li></ul></ul>
  • 45. MANIPULANDO ATRIBUTOS <ul><li>Attr </li></ul><ul><li>Utilizado para recuperar e alterar valor de um atributo </li></ul><ul><ul><li>Recuperando valor </li></ul></ul><ul><ul><ul><li>$(&amp;quot;#img&amp;quot;).attr(“tamanho&amp;quot;); </li></ul></ul></ul><ul><ul><li>Atualizando </li></ul></ul><ul><ul><ul><li>$(&amp;quot;#img&amp;quot;).attr(“tamanho“, “12”); </li></ul></ul></ul><ul><ul><li>Removendo </li></ul></ul><ul><ul><ul><li>$(&amp;quot;#img&amp;quot;).removeAttr(“tamanho”); </li></ul></ul></ul>
  • 46. ALTERANDO ESTILOS DE ELEMENTOS <ul><li>Adicionando estilo </li></ul><ul><ul><li>$(p).addClass(“colorido”); </li></ul></ul><ul><li>Removendo estilo </li></ul><ul><ul><li>$(p).removeClass(“colorido”); </li></ul></ul><ul><li>Adiciona caso o elemento não possua o class, e remove caso já possua. </li></ul><ul><ul><li>$(&apos;tr&apos;).toggleClass(&apos;striped&apos;) </li></ul></ul><ul><li>Indicar se o elemento possui ou não determinada class </li></ul><ul><ul><li>$(&apos;tr&apos;).hasClass(&apos;striped&apos;) </li></ul></ul>
  • 47. REMOVENDO ELEMENTOS <ul><li>Podemos remover todas os elementos retornados da árvore DOM </li></ul><ul><ul><li>$(‘img’).remove() </li></ul></ul>
  • 48. LIDANDO COM ELEMENTOS DO FORM <ul><li>Utilizado o comando val(). </li></ul><ul><li>Recuperando o valor de um input </li></ul><ul><ul><li>$(&apos;:checkbox:checked&apos;).val() </li></ul></ul><ul><li>Setando o valor nos elementos selecionados </li></ul><ul><ul><li>Usando o parâmetro val() com um parâmetro. </li></ul></ul>
  • 49. EXERCÍCIOS <ul><li>1 – Criar um comando que retorna o elemento radiobox atualmente selecionado. </li></ul><ul><li>2 – Setar o valor do campo ‘text’ com o valor ‘teste’. </li></ul>
  • 50. FUNÇÕES UTILITÁRIAS <ul><li>Detecção de Browser </li></ul><ul><li>Manipulação de arrays </li></ul><ul><li>Compatibilidade com outras bibliotecas </li></ul>
  • 51. DETECÇÃO DE BROWSERS <ul><li>Impreciso </li></ul><ul><li>Não escalável </li></ul>
  • 52. ALTERNATIVA <ul><li>Detecção de objeto. </li></ul><ul><li>Verificar se existe o suporte para determinado método. </li></ul><ul><li>Eliminar a necessidade de vários if´s e else´s </li></ul>
  • 53. <ul><li>if (element.attachEvent) { </li></ul><ul><li>element.attachEvent(&apos;onclick&apos;, acao); </li></ul><ul><li>} </li></ul><ul><li>else if (element.addEventListener) { </li></ul><ul><li>element.addEventListener(&apos;click&apos;, acao); </li></ul><ul><li>} </li></ul><ul><li>else { </li></ul><ul><li>throw new Error(‘Ação não suportada&apos;); </li></ul><ul><li>} </li></ul>
  • 54. ... QUANDO FOR INEVITÁVEL <ul><li>$.browser </li></ul><ul><ul><li>msie </li></ul></ul><ul><ul><li>mozzila </li></ul></ul><ul><ul><li>Safari </li></ul></ul><ul><ul><li>Opera </li></ul></ul><ul><li>Detecta a família do browser </li></ul>
  • 55. COMPATIBILIDADE BIBLIOTECAS <ul><li>Evitar incompatibilidade com a flag $ </li></ul><ul><li>$ também é usado pelo prototype </li></ul><ul><li>$.noConflict(); - Setando jQuery como alias </li></ul><ul><li>$j = $.noConflict(); </li></ul>
  • 56. MANIPULANDO ARRAYS <ul><li>$.trim(value) </li></ul><ul><li>■ $.each(container,callback) </li></ul><ul><li>■ $.grep(array,callback,invert) </li></ul><ul><li>■ $.map(array,callback) </li></ul><ul><li>■ $.inArray(value,array) </li></ul><ul><li> ■ $.makeArray(value,array) </li></ul>
  • 57. FUNÇÕES UTILITÁRIAS <ul><li>$.each </li></ul><ul><ul><li>Itera sobre o array </li></ul></ul><ul><ul><ul><li>var array = [‘um&apos;,‘dois&apos;,‘três&apos;]; </li></ul></ul></ul><ul><ul><ul><li>$.each(array ,function(n,valor) { </li></ul></ul></ul><ul><ul><ul><li>//fazer </li></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul>
  • 58. GREP <ul><li>$.grep </li></ul><ul><ul><li>Itera sobre o array selecionando os elementos que satisfazem a condição do callback. </li></ul></ul><ul><li>var numGrandes = $.grep(array,&apos;a&gt;100&apos;); </li></ul>
  • 59. FUNÇÕES UTILITÁRIAS <ul><li>$.map </li></ul><ul><ul><li>Itera sobre o array, realizando determinada </li></ul></ul><ul><ul><li>ação sobre os elementos e colhendo os </li></ul></ul><ul><ul><li>resultados </li></ul></ul><ul><ul><li>var alterado = $.map([0,1,2,3,4],function(value){ </li></ul></ul><ul><ul><li> return value+1; </li></ul></ul><ul><ul><li> }); </li></ul></ul>
  • 60. FUNÇÕES UTILITÁRIAS <ul><li>$.inArray(value,array) </li></ul><ul><ul><li>Itera sobre o array retornando a posição da primeira ocorrência encontrada. </li></ul></ul><ul><ul><li>var indice = $.inArray(2,[1,2,3,4,5]); </li></ul></ul>
  • 61. FUNÇÕES UTILITÁRIAS <ul><li>$.makeArray(object) </li></ul><ul><ul><li>Transforma o objeto passado como parâmetro em um array javascript . </li></ul></ul><ul><ul><li>$.makeArray(objeto); </li></ul></ul>
  • 62. EXERCÍCIO <ul><li>1 - Criar uma página que adiciona uma mensagem html em uma div avisando qual é a familia do browser que esté sendo atualmente utilizado, junto com a informação se o box model segue regras da W3C. </li></ul><ul><li>2 – Nesta mesma página, criar uma função que itera sobre o array [96, 98, 100, ’a’ ,1002] e retorna apenas elementos maiores que 1000. </li></ul>

×