1) O documento discute seletores e comandos básicos do jQuery para manipular elementos DOM, incluindo a seleção de elementos através de IDs, classes e nomes de tags. 2) São apresentados vários métodos jQuery para buscar, filtrar e manipular elementos na página, como attr(), addClass(), removeClass() entre outros. 3) Também são explicadas funções utilitárias do jQuery para detecção de navegadores, manipulação de arrays e compatibilidade com outras bibliotecas.

1. JQUERY - SELETORES

2. JS NÃO-OBSTRUSIVO Com css a estrutura html ficou separada do estilo. jQuery pretende facilitar a separação da estrutura html e o seu comportamento.

3. DOM DOM (Document Object Model) é uma API HTML e XML especificada pela W3C A API DOM oferece uma maneira padrão de se acessar os elementos de um documento. Objetivo é padronizar o acesso ao XML

4. JQUERY WRAPPER Adiciona recursos aos elementos nativos DOM A maioria dos comandos jQuery retornam coleções Wrappers.

5. SELETORES Seleção de elementos DOM via seletores. Criação de elementos DOM. Principal recurso do jQuery.

6. TESTES http://www.bibeault.org/jqueryinaction/chapter2/lab.wrapped.set.html Testar comandos jQuery em tempo real. http://docs.jquery.com/Selectors

7. CONFIGURAÇÃO Copiar a biblioteca jQuery (16k zipada, 97k versão para estudos) Referenciá-la na página

8. ANTES DE USAR OS COMANDOS... Necessidade de que a árvore DOM esteja totalmente carregada $(document).ready(function() { //faça }); Atalho: $(function() { //faça });

9. EXERCÍCIO Realizar um alerta utilizando jQuery.

10. SELETORES CSS Conjunto de métodos seletores Seleção através de ID, class, nome da tag e hierarquia Típico comando jQuery: $(“a”)

11. COMANDOS BÁSICOS $(‘a’) - Retorna todos os elementos links (<a>). $(‘#idElem’) - Encontra o elemento que possui um atributo id com o valor “idElem”. $(‘.tagClass’) – Encontra os elementos que possuem o class igual a “tagClass”.

12. OPERADORES Espaço – encontra elementos que são descendentes > - Encontra elementos que estão diretamente aninhados + - Busca em todos os elementos irmãos.

13. COMANDOS BÁSICOS $(‘p a.tagClass’) – Encontra todos os links localizados dentro de elementos <p> com o class “tagClass”.

14. EXERCÍCIOS 1 - Criar um comando jQuery que encontre o elemento DIV que possua o id ‘someDiv‘. 2 - Encontrar todos os links localizados dentro de uma tag <li>. 3 - Encontrar todas as tags <li> que estão aninhadas dentro de elementos que possuem class igual a myList.

15. EXERCÍCIOS 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 .

16. SELETORES AVANÇADOS Selecionar elementos diretamente aninhados a outros. Encontrar elementos que possuem determinados atributos. Pesquisar pela hierarquia.

17. SELETORES AVANÇADOS E[A] Encontra todos os elementos E que possuem um atributo A. E[A=V] Encontra todos os elementos E que possuem um atributo A, que por fim possui o valor V. E[A^=V] Encontra todos os elementos E que possuem um atributo A que começa com a letra V.

18. SELETORES AVANÇADOS E[A$=V] Encontra todos elementos E com atributo A que possui o valor que termina com V. E[A*=V] Encontra todos elementos E com atributo A o qual o valor contém V. E:has(F) Encontra todos elementos E os quais possui ao menos um descendente com a tag name F.

19. SELETORES AVANÇADOS E>F Procura todos os elementos F descendentes diretos de E. E+F Encontra todos os elementos F que são imediatamente precedido por um irmão E E~F Encontra todos os F precedidos por um irmão E.

20. CONTAINER SELECTOR Selecionar apenas elementos que contêm algum outro elemento aninhado recebido como parâmetro. li:has(a) Somente um nível aninhado é suportado

21. SELETORES POR POSIÇÃO Necessidade de buscar elementos por sua posição. :first- li:child :last :first-child - li:first-child :last-child :only-child

22. SELETORES POR POSIÇÃO :nth-child( n ) - li:nth-child(2) :nth-child( even | odd ) :even / :odd :eq( n ) :gt( n ) :lt( n )

23. SELETORES XPATH (DEPRECIADO) Suporte básico XPath. http://jquery.com/plugins/project/xpath

24. EXERCÍCIOS 1 – Selecionar todos os elementos <div> que possuem o atributo title, que também possua o valor começando com ‘my’. 2 - Recuperar todas as células que contém os nomes das linguagem de programação; 3 – Encontrar todas as tags <li> que são o último elemento aninhado.

25. EXERCÍCIOS 4 - Retornar a primeira ocorrência de um link que está aninhado a tag <li>. 5 – Selecionar links para arquivos pdf.

26. COMANDOS JQUERY CUSTOMIZADOS Seletores CSS possuem algumas limitações. Adição de seletores que filtram pelo estado do elemento foi adicionado.

27. COMANDOS JQUERY CUSTOMIZADOS :checkbox – Seleciona todos os elementos do tipo checkbox :checked – Encontra todos os elementos atualmente checkados. :visible – Seleciona todos os elementos que estão atualmente visíveis.

28. COMANDOS JQUERY CUSTOMIZADOS :checkbox:checked:enabled Encontra todos os elementos do tipo checkbox, checkados e habilitados. input:not(:checkbox) Seleciona todos os elementos input que não são do tipo checkbox. contains(teste) Seleciona elementos que contenham como valor o texto ‘teste’.

29. COMANDOS JQUERY CUSTOMIZADOS :input Encontra todos inputs da página input:text Retorna todos os inputs que possuem o type text

30. MÉTODOS JQUERY not(expressão) jQuery(‘div’).not(‘div.naoSeleciona’); find(expressão) $(‘div’).css(‘background-color’,’blue’) .find(‘img’).css(‘border’,’1px solid aqua’);

31. FILTROS filter(expression) jQuery(‘div’).class(‘blue’).(‘div.vermelho’).class(‘vemelho’); slice(being,end) jQuery(‘div’).slice(2, 3);

32. MÉTODOS DE BUSCA children(expression) Recupera os filhos dos elementos da coleção next(expression) Retorno o irmão imediatamente posterior a cada item da coleção

33. nextAll(expression) Recupera todos os irmãos posteriores ao item da coleção parent(expression) Retorna o pai de cada item da coleção

34. parents(expression) Recupera todos os ascendentes do elemento da coleção prev(expression) Retorno o irmão imediatamente anterior a cada item da coleção

35. prevAll(expression) Recupera todos os irmãos anteriores ao item da coleção

36. ENCADEAMENTO andSelf() $(‘div’).css(‘background-color’,’yellow’) .children(‘img’).css(‘border’,’4px ridge maroon’) .andSelf().css(‘margin’,’4em’); end() $(‘div’).add(‘p’).css(‘color’,’red’).end().hide();

37. INCLUINDO HTML DINAMICAMENTE Usar o método html, que recebe um string como parâmetro. var mensagem = $(&quot;<p>Olá</p>“); $(‘divR’).html(mensagem);

38. COMANDOS - INTERAÇÃO Existem alguns métodos para interagir com o retorno.

39. MANIPULAÇÃO Retornar a quantidade de elementos retornados() $(‘img’).size(); Recuperar um elemento específico Através do índice: $(`img`)[0] Usando comando jQuery: $(`img`).get(0)

40. MANIPULAÇÃO Retornar a posição do primeiro elemento que satisfaz os critérios passados como parâmetro. var n = $('img').index($('img#id')[0]); Concatenar duas coleções jQuery $(‘img[teste], img[res]’) ou $(‘img[teste]’).add (‘img[res]’)

41. MANIPULAÇÃO Procurar determinado elemento passado como parâmetro e retornar seu índice. var n = $('img').index($('img#id')[0]); Concatenar duas coleções jQuery $(img[teste], img[res]) ou $(img[teste]).add (img[res])

42. MANIPULAÇÃO Indicar se ao menos um elemento do array satisfaz a condição. var temImagem = $('*').is('img'); Alterar css dos elementos da coleção. $(‘div.escondida').css(‘display’,’hidden');

43. EXERCÍCIOS http://www.bibeault.org/jqueryinaction/chapter2/lab.wrapped.set.html Testar os comandos jQuery para manipulação de elementos

44. MANIPULANDO PROPRIEDADES Não existe um comando específico Estratégia mais comum, usar o comando each e manipular $('img').each(function(n){ this.alt=' Imagem['+n+'] ' ; });

45. MANIPULANDO ATRIBUTOS Attr Utilizado para recuperar e alterar valor de um atributo Recuperando valor $(&quot;#img&quot;).attr(“tamanho&quot;); Atualizando $(&quot;#img&quot;).attr(“tamanho“, “12”); Removendo $(&quot;#img&quot;).removeAttr(“tamanho”);

46. ALTERANDO ESTILOS DE ELEMENTOS Adicionando estilo $(p).addClass(“colorido”); Removendo estilo $(p).removeClass(“colorido”); Adiciona caso o elemento não possua o class, e remove caso já possua. $('tr').toggleClass('striped') Indicar se o elemento possui ou não determinada class $('tr').hasClass('striped')

47. REMOVENDO ELEMENTOS Podemos remover todas os elementos retornados da árvore DOM $(‘img’).remove()

48. LIDANDO COM ELEMENTOS DO FORM Utilizado o comando val(). Recuperando o valor de um input $(':checkbox:checked').val() Setando o valor nos elementos selecionados Usando o parâmetro val() com um parâmetro.

49. EXERCÍCIOS 1 – Criar um comando que retorna o elemento radiobox atualmente selecionado. 2 – Setar o valor do campo ‘text’ com o valor ‘teste’.

50. FUNÇÕES UTILITÁRIAS Detecção de Browser Manipulação de arrays Compatibilidade com outras bibliotecas

51. DETECÇÃO DE BROWSERS Impreciso Não escalável

52. ALTERNATIVA Detecção de objeto. Verificar se existe o suporte para determinado método. Eliminar a necessidade de vários if´s e else´s

53. if (element.attachEvent) { element.attachEvent('onclick', acao); } else if (element.addEventListener) { element.addEventListener('click', acao); } else { throw new Error(‘Ação não suportada'); }

54. ... QUANDO FOR INEVITÁVEL $.browser msie mozzila Safari Opera Detecta a família do browser

55. COMPATIBILIDADE BIBLIOTECAS Evitar incompatibilidade com a flag $ $ também é usado pelo prototype $.noConflict(); - Setando jQuery como alias $j = $.noConflict();

56. MANIPULANDO ARRAYS $.trim(value) ■ $.each(container,callback) ■ $.grep(array,callback,invert) ■ $.map(array,callback) ■ $.inArray(value,array) ■ $.makeArray(value,array)

57. FUNÇÕES UTILITÁRIAS $.each Itera sobre o array var array = [‘um',‘dois',‘três']; $.each(array ,function(n,valor) { //fazer });

58. GREP $.grep Itera sobre o array selecionando os elementos que satisfazem a condição do callback. var numGrandes = $.grep(array,'a>100');

59. FUNÇÕES UTILITÁRIAS $.map Itera sobre o array, realizando determinada ação sobre os elementos e colhendo os resultados var alterado = $.map([0,1,2,3,4],function(value){ return value+1; });

60. FUNÇÕES UTILITÁRIAS $.inArray(value,array) Itera sobre o array retornando a posição da primeira ocorrência encontrada. var indice = $.inArray(2,[1,2,3,4,5]);

61. FUNÇÕES UTILITÁRIAS $.makeArray(object) Transforma o objeto passado como parâmetro em um array javascript . $.makeArray(objeto);

62. EXERCÍCIO 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. 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.