A biblioteca do dólar

Transcript

1. A biblioteca do dólar
2. $
4. “Ah, jQuery eu já sei…” Todo mundo conhece, usa, mas saber o que está acontecendo... saber mesmo ninguém sabe. • Preciso fazer algo (com jQuery) • Procuro no Google • Acho a resposta no StackOverflow ☺ • … • Repete Com qual frequência você segue esse fluxo?
5. “Ah, jQuery eu já sei…” Que tal: • Aprendo como a biblioteca funciona • Me deparo com algo que não sei • Tento primeiro ler a documentação • Aprendo mais sobre jQuery ☺ • Resolvo meu problema “sozinho” ☺☺☺ • Repete
6. Serve para • Navegação no DOM • Escuta de eventos • Animação • Ajax • Plugins • Utilitários e etceteras
7. Não tão leve • Normal: 241,59 KB • Minificado: 82,34 KB • Minificado e gzipped: 28,87 KB.
8. Popularíssima Porcentagem de uso do jQuery pelos sites mais acessados nos Estados Unidos: • Top 1000k: 54,6% • Top 100k: 61,9% • Top 10k: 69,6%
9. Popularíssima
10. Antiguíssima Desde 2006.
11. Open Source
12. Excelente documentação api.jquery.com
13. Milhares de plugins plugins.jquery.com
14. John Resig
15. John Resig Autor, blogger, palestrante, ganhador de prêmios...
16. Fundação
17. Projetos
18. Eventos
19. Mas… precisa? document.getElementByID… Qual o problema?
20. Precisa. function outerHeight(el) { var height = el.offsetHeight var style = getComputedStyle(el) height += parseInt(style.marginTop) + parseInt(style.marginBottom) return height } outerHeight(el) $(el).outerHeight(true)
21. (mas nem sempre) youmightnotneedjquery.com
22. DOM
23. Todo mundo odeia o DOM
24. O cifrão mágico $ é um caractere válido para nomear funções/variáveis em JavaScript como qualquer outro. var $$$ = ‘dinheiro’
25. $ é um alias para a função jQuery $(‘#meu-id’) é o mesmo que jQuery(‘#meu-id’). É uma forma de deixar o uso da biblioteca mais sucinto. A idéia do cifrão foi imitada da biblioteca Prototype.
26. Mas o $ ainda é mágico Já reparou que o $, ou melhor, a função jQuery, é utilizada de diversas maneiras diferentes?
27. Mas o $ ainda é mágico var extras = $(‘p.extra’) // Como seletor var titulo = $(‘<h1>Olá mundo</h1>’) // Criando novos elementos // Encapsulando objetos do DOM var username = document.getElementById(‘username’) var usernameJquery = $(username) // Como evento ‘ready’ de ‘document’ $(function () { // Aqui vai aquele monte de coisa que fazemos na inicialização da página })
28. Paremos um minuto Para refletirmos como JavaScript é maleável.
29. Seletores Não passemos um a um (documentação existe para isso) mas jQuery fornece vários seletores para navegarmos no DOM. # para id, . para classe, [nome=valor] para atributo, : first para primeiro elemento...
30. Seletores var extras = $(‘p.extras’) O que está acontecendo aqui?
31. Seletores var extras = $(‘p.extras’) Estamos chamando a função jQuery.
32. Seletores var extras = $(‘p.extra’) Estamos passando para o jQuery uma string com a especificação dos elementos que queremos, no caso todos paragráfos (p) que possuem a classe extra (.extra).
33. Seletores var extras = $(‘p.extra’) Um parse é feito dessa expressão pela biblioteca sizzle (é uma parte do jQuery).
34. Seletores var extras = $(‘p.extra’) Os elementos que casaram com a expressão são retornados para extras.
35. Seletores var extras = $(‘p.extra’) extras aqui é um objeto jQuery.
36. Objeto jQuery No exemplo anterior, que selecionamos elementos no documento, o jQuery retorna uma coleção com os elementos encontrados. Essa coleção é um tipo do próprio jQuery, que chamamos de simplesmente objeto jQuery.
37. Objeto jQuery Um objeto jQuery é uma coleção, possui .length, índice e algumas funções próprias de manipulação de coleção. Mas não é um Array. E claro, o objeto jQuery vai nos fornecer todas aquelas funções utilissímas como hide(), ready(), css(), animate(), append(), on()...
38. Chamadas em cascata A maioria das funções do jQuery retornam objetos jQuery (as vezes o próprio objeto manipulado), isso permite realizar chamadas em cascata. $(‘#login’).removeClass(‘ativo’).fadeOut()
39. Criando elementos $ serve não só para selecionar elementos, mas também para criar novos. var rodape = $(‘<footer>Colocar aqui um rodapé criativo<footer>’) var body = $(‘body’) body.append(rodape)
40. Criando elementos Lembra que falei sobre chamadas em cascata? var rodape = $(‘<footer>Colocar aqui um rodapé criativo<footer>’) var body = $(‘body’) body.append(rodape) $(‘<footer>Colocar aqui um rodapé criativo</footer>’).appendTo(‘body’)
41. Criando elementos Existem duas maneiras de criar um elemento, com uma string de seu HTML ou via um objeto com as propriedades: $(‘<div id=”meu-id” class=”minha-classe”>meu texto</div>’) $(‘<div/>’, { id: ‘meu-id’, class: ‘minha-classe’, text: ‘meu texto’ })
42. Inicializando a página <html> <head> <script src=”//caminho-do-jquery”></script> <script> $(function () { alert(‘Pronto! O DOM já está carregando e pronto para ser manipulado.’) }) </script> </head> <body> <!-- Aqui vai uma infinidade de elementos → </body> </html>
43. Inicializando a página $(callback) é uma forma simplificada de chamar $(document).ready(callback).
44. Mãos na massa