View
322
Download
0
Category
Preview:
Citation preview
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 elemento <ul>
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').click(function(){! ! console.log('Clicou no botão 2')!! })})
$(function(){! $('#secao1, #secao2').hide()
! $('#btn1').click(function(){! ! console.log('Clicou no botão 1')! })
! $('#btn2').click(function(){! ! console.log('Clicou no botão 2')!! })})
$(function(){! $('#secao1, #secao2').hide()! !! $('#btn1').click(function (){! ! $('#secao1').slideDown()! ! $('#secao2').slideUp()! })
! $('#btn2').click(function (){! ! $('#secao1').slideUp()! ! $('#secao2').slideDown()! ! !! })})
:)
Recommended