jQuery$$      @ JS101
Procurem no Google:    “jQuery”
Coloquem entre <head> e </head>:<script src="jquery-1.6.x.min.js"></script>                    versão atual
CTRL   SHIFT   I
jQuery()
$()
$(p)
$(p)Selecione todos os elementos <p> da página
$(#favorito)
$(#favorito)Selecione o elemento da página com o id="favorito"
$(.especial)
$(.especial)Selecione todos os elementos da página com class="especial"
$(ul .especial)
$(ul .especial)Selecione todos os elementos da página com class="especial"...        ...que estiverem dentro de um element...
CSSSelectors
var x = $(h2)   x.hide()
x.show()
x.slideUp()
x.slideDown()
x.slideUp(5000)
x.slideDown(5000, function(){ console.log(fim) })
x.slideDown(5000, function(){ console.log(fim) })             é chamada quando a função acaba
x.fadeOut()x.fadeIn()
x.animate({ fontSize: 150px })
x.animate({ fontSize: 150px })     objeto com propriedades CSS a serem animadas
x.animate(estilo, tempo, func)                    opcionais
$(function(){   // quando a página carregar})
$(function(){! $(#secao1, #secao2).hide()! $(#btn1).click(function(){! ! console.log(Clicou no botão 1)! })! $(#btn2).clic...
$(function(){! $(#secao1, #secao2).hide()! $(#btn1).click(function(){! ! console.log(Clicou no botão 1)! })! $(#btn2).clic...
$(function(){! $(#secao1, #secao2).hide()! !! $(#btn1).click(function (){! ! $(#secao1).slideDown()! ! $(#secao2).slideUp(...
:)
Upcoming SlideShare
Loading in …5
×

JQuery - JS 101

356 views
327 views

Published on

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
356
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQuery - JS 101

  1. 1. jQuery$$ @ JS101
  2. 2. Procurem no Google: “jQuery”
  3. 3. Coloquem entre <head> e </head>:<script src="jquery-1.6.x.min.js"></script> versão atual
  4. 4. CTRL SHIFT I
  5. 5. jQuery()
  6. 6. $()
  7. 7. $(p)
  8. 8. $(p)Selecione todos os elementos <p> da página
  9. 9. $(#favorito)
  10. 10. $(#favorito)Selecione o elemento da página com o id="favorito"
  11. 11. $(.especial)
  12. 12. $(.especial)Selecione todos os elementos da página com class="especial"
  13. 13. $(ul .especial)
  14. 14. $(ul .especial)Selecione todos os elementos da página com class="especial"... ...que estiverem dentro de um elemento <ul>
  15. 15. CSSSelectors
  16. 16. var x = $(h2) x.hide()
  17. 17. x.show()
  18. 18. x.slideUp()
  19. 19. x.slideDown()
  20. 20. x.slideUp(5000)
  21. 21. x.slideDown(5000, function(){ console.log(fim) })
  22. 22. x.slideDown(5000, function(){ console.log(fim) }) é chamada quando a função acaba
  23. 23. x.fadeOut()x.fadeIn()
  24. 24. x.animate({ fontSize: 150px })
  25. 25. x.animate({ fontSize: 150px }) objeto com propriedades CSS a serem animadas
  26. 26. x.animate(estilo, tempo, func) opcionais
  27. 27. $(function(){ // quando a página carregar})
  28. 28. $(function(){! $(#secao1, #secao2).hide()! $(#btn1).click(function(){! ! console.log(Clicou no botão 1)! })! $(#btn2).click(function(){! ! console.log(Clicou no botão 2)!! })})
  29. 29. $(function(){! $(#secao1, #secao2).hide()! $(#btn1).click(function(){! ! console.log(Clicou no botão 1)! })! $(#btn2).click(function(){! ! console.log(Clicou no botão 2)!! })})
  30. 30. $(function(){! $(#secao1, #secao2).hide()! !! $(#btn1).click(function (){! ! $(#secao1).slideDown()! ! $(#secao2).slideUp()! })! $(#btn2).click(function (){! ! $(#secao1).slideUp()! ! $(#secao2).slideDown()! ! !! })})
  31. 31. :)

×