JQuery - JS 101

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()! ! !! })})

:)

Technology

JQuery - JS 101