J query 1

903 visualizações

Publicada em

jQuery, javascript

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
903
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

J query 1

  1. 1. JQUERY - SELETORES
  2. 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. 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. 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. 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. 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. 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. 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. 9. EXERCÍCIO <ul><li>Realizar um alerta utilizando jQuery. </li></ul>
  10. 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. 11. COMANDOS BÁSICOS <ul><li>$(‘a’) - Retorna todos os elementos links (<a>). </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. 12. OPERADORES <ul><li>Espaço – encontra elementos que são descendentes </li></ul><ul><li>> - Encontra elementos que estão diretamente aninhados </li></ul><ul><li>+ - Busca em todos os elementos irmãos. </li></ul>
  13. 13. COMANDOS BÁSICOS <ul><li>$(‘p a.tagClass’) – Encontra todos os links localizados dentro de elementos <p> com o class “tagClass”. </li></ul>
  14. 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 <li>. </li></ul><ul><li>3 - Encontrar todas as tags <li> que estão aninhadas dentro de elementos que possuem class igual a myList. </li></ul>
  15. 15. EXERCÍCIOS <ul><li>4 – Selecionar somente os links que são filhos diretos de um elemento <li>, que por sua vez estão diretamente aninhados ao elementos <ul> que possuam a class myList . </li></ul>
  16. 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. 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. 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. 19. SELETORES AVANÇADOS <ul><li>E>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. 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. 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. 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. 23. SELETORES XPATH (DEPRECIADO) <ul><li>Suporte básico XPath. </li></ul><ul><li>http://jquery.com/plugins/project/xpath </li></ul>
  24. 24. EXERCÍCIOS <ul><li>1 – Selecionar todos os elementos <div> 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 <li> que são o último elemento aninhado. </li></ul>
  25. 25. EXERCÍCIOS <ul><li>4 - Retornar a primeira ocorrência de um link </li></ul><ul><li>que está aninhado a tag <li>. </li></ul><ul><li>5 – Selecionar links para arquivos pdf. </li></ul>
  26. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 37. INCLUINDO HTML DINAMICAMENTE <ul><li>Usar o método html, que recebe um string como parâmetro. </li></ul><ul><li>var mensagem = $(&quot;<p>Olá</p>“); </li></ul><ul><li>$(‘divR’).html(mensagem); </li></ul>
  38. 38. COMANDOS - INTERAÇÃO <ul><li>Existem alguns métodos para interagir com o retorno. </li></ul>
  39. 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. 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 = $('img').index($('img#id')[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. 41. MANIPULAÇÃO <ul><li>Procurar determinado elemento passado como parâmetro e retornar seu índice. </li></ul><ul><ul><li>var n = $('img').index($('img#id')[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. 42. MANIPULAÇÃO <ul><li>Indicar se ao menos um elemento do array satisfaz a condição. </li></ul><ul><ul><li>var temImagem = $('*').is('img'); </li></ul></ul><ul><li>Alterar css dos elementos da coleção. </li></ul><ul><ul><li>$(‘div.escondida').css(‘display’,’hidden'); </li></ul></ul>
  43. 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. 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>$('img').each(function(n){ </li></ul></ul><ul><ul><li>this.alt=' Imagem['+n+'] ' ; </li></ul></ul><ul><ul><li>}); </li></ul></ul>
  45. 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>$(&quot;#img&quot;).attr(“tamanho&quot;); </li></ul></ul></ul><ul><ul><li>Atualizando </li></ul></ul><ul><ul><ul><li>$(&quot;#img&quot;).attr(“tamanho“, “12”); </li></ul></ul></ul><ul><ul><li>Removendo </li></ul></ul><ul><ul><ul><li>$(&quot;#img&quot;).removeAttr(“tamanho”); </li></ul></ul></ul>
  46. 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>$('tr').toggleClass('striped') </li></ul></ul><ul><li>Indicar se o elemento possui ou não determinada class </li></ul><ul><ul><li>$('tr').hasClass('striped') </li></ul></ul>
  47. 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. 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>$(':checkbox:checked').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. 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. 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. 51. DETECÇÃO DE BROWSERS <ul><li>Impreciso </li></ul><ul><li>Não escalável </li></ul>
  52. 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. 53. <ul><li>if (element.attachEvent) { </li></ul><ul><li>element.attachEvent('onclick', acao); </li></ul><ul><li>} </li></ul><ul><li>else if (element.addEventListener) { </li></ul><ul><li>element.addEventListener('click', acao); </li></ul><ul><li>} </li></ul><ul><li>else { </li></ul><ul><li>throw new Error(‘Ação não suportada'); </li></ul><ul><li>} </li></ul>
  54. 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. 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. 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. 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',‘dois',‘três']; </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. 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,'a>100'); </li></ul>
  59. 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. 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. 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. 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>

×