jQuery Funções Básicas
Vou começar falando sobre algumas funções básicas de jQuery para quem está começando a estudar. Darei exemplos práticos de como a biblioteca jQuery pode agilizar a vida dos desenvolvedores.
- Selecionando um elemento e aplicando uma propriedade Css
Com o código abaixo iremos selecionar todos os elementos “p” e aplicar uma cor de fundo
Clique aqui para ver o exemplo funcionando.
O script:
1 2 3 | $(document).ready(function(){ $('p').css('background','#cecece'); }); |
O html:
1 2 3 | <body> <p>Esse é um parágrafo modificado por jQuery.</p> </body> |
A primeira linha diz que quando o documento for lido a seguinte função será executada.
Na segunda linha pegamos o elemento “p” e incluimos background com a cor de fundo cinza.
O mesmo efeito pode ser conseguido também apenas com quando o evento for acionado pelo usuário, como por exemplo clicando em um botão.
Clique aqui para ver o exemplo funcionando.
Ficaria assim:
O script:
1 2 3 4 5 | $(document).ready(function(){ $('#modificar').click(function(){ $('p').css('background','#cecece'); }); }); |
O html:
1 2 3 4 | <body> <button name="bt" id="modificar">Modificar</button> <p>Esse é um parágrafo modificado por jQuery.</p> </body> |
Aqui dizemos que quando o id “modificar” for clicado vai executar a seguinte função: trocar o background do elemento p para cinza.
E se eu tiver mais que um parágrafo e quiser alterar apenas o primeiro?
Clique aqui para ver o exemplo funcionando.
O script:
1 2 3 4 5 | $(document).ready(function(){ $('#modificar').click(function(){ $('p:first').css('background','#cecece'); }); }); |
O html:
1 2 3 4 5 6 7 | <body> <button name="bt" id="modificar">Modificar</button> <p>Esse é o parágrafo que será modificado por jQuery.</p> <p>Esse é o parágrafo comum.</p> <p>Esse é o parágrafo comum.</p> <p>Esse é o parágrafo comum.</p> </body> |
Aqui utilizamos o seletor “:first” para identificar que é apenas o primeiro parágrafo que será alterado.
Podemos também utilizar o “:last” e alterar apenas o último parágrafo.
Clique aqui para ver o exemplo funcionando.
Por hoje é só mais continuarei postando sobre jQuery.
Esse blog não tem RSS? Vou ter que ficar entrando todo dia pra saber se tem novidade?
Bjos e parabens pela iniciativa!
Lully
Oie… achei vc!
Nao sabia desse seu lado… parabéns!!!
Beijos!