WebCis - Servios de criao sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um oramento

Dicas para Criao de sites

Criando e configurando elementos HTML com jQuery e CSS

Publicidade

Informação
Uma das maiores funcionalidades do jQuery é permitir que seja definido um comportamento dinâmico para determinados elementos que normalmente não seria possível utilizando apenas CSS e HTML sem que haja a preocupação com a compatibilidade dessas funcionalidades entre os navegadores.

Nessa matéria iremos comentar algumas das principais funcionalidades que são possíveis através da biblioteca jQuery.

Observação: Todas as funções são compatíveis com todas as versões do nagedaores atuais (Internet Explorer, Goolge Chrome, Opera, Firefox, Safari, etc).

Mtodo addClass() e removeClass()

Duas das funções mais conhecidas, ela permitem que alteremos dinâmicamente as classes de determinados elementos sem que o código HTML seja alterado diretamente.

EXEMPLO

<style type="text/css">.bloco{width:50px; height:50px; background:#036; float:left; margin:0 15px 0 0}.vermelho{background:#C00}.borda{border:3px solid #6CC}</style><script type="text/javascript">$().ready(function(e) {//Utilizando o seletor :first, removeremos a classe 'borda' do primeiro elemento$('.exemplo1 .bloco:first').removeClass('borda')//Utilizando o seletor :last, adicionaremos uma class ao ltimo elemento    $('.exemplo1 .bloco:last').addClass('vermelho')});</script><div class="exemplo1 fl">   <div class="bloco borda fl"></div>    <div class="bloco borda fl"></div>   <div class="bloco borda fl"></div>   <div class="bloco borda fl"></div></div>
RESULTADO

Mtodo css()

Muito parecido com a função "addClass", a função "CSS" permite que editemos siretamente uma ou mais cofigurações de um determinado elemento sem que isso afete diretamente as configuração determindas na folha de estilo. Ao ser utilizada, ela irá adicionar essa nova configuração através de um "style" diretamente no elemento.

EXEMPLO:

<style type="text/css">.bloco{width:50px; height:50px; background:#036; float:left; margin:0 15px 0 0}</style><script type="text/javascript">$().ready(function(e) {//Atravs do seletor :eq(), iremos determinar diretamente qual o nmero do elemento que ir receber      a configurao. No caso do :eq(), o nmero de elementos  contado a partir do 0, ento o nmero 2      define que ser o 3 elemento (elemento 0, elemento 1 e elemento 2).$('.exemplo2 .bloco:eq(2)').css('border-bottom','4px solid #9C0')});</script><div class="exemplo2 fl">   <div class="bloco fl"></div>   <div class="bloco fl"></div>   <div class="bloco fl"></div>   <div class="bloco fl"></div></div>
RESULTADO

Mtodo append() e prepend()

Essas funções permitem a inserção de novos conteúdos ou elementos, antes (prepende) ou depois (apend) de um determinado elemento HTML de referência, dependendo da função utilizada.

EXEMPLO

<style type="text/css">.bloco{width:50px; height:50px; background:#036; float:left; margin:0 15px 10px 0}.vermelho{background:#C00}.verde{background:#9C0}</style><script type="text/javascript">$().ready(function(e) {//Utilizaremos o mtodo .click() para que as funes ocorram apenas ao clicar nos botes$('#adicionar-direita').click(function(){//Neste exemplo, toda vez que clicarmos no boto  "Adicionar a Direita", ele adicionar           uma nova div DEPOIS da DIV exemplo3    $('.exemplo3').append('<div class="bloco verde fl"></div>')})$('#adicionar-esquerda').click(function(){//Neste exemplo, toda vez que clicarmos no boto "Adicionar a Esquerda", ele adicionar           uma nova div ANTES da DIV exemplo3$('.exemplo3').prepend('<div class="bloco vermelho fl"></div>')})});</script><div class="exemplo3 fl">   <div class="bloco fl"></div>   <div class="bloco fl"></div>   <div class="bloco fl"></div>   <div class="bloco fl"></div></div><div class="botoes fl"><button name="adicionar-esquerda" id="adicionar-esquerda">Adicionar  esquerda</button><button name="adicionar-direita" id="adicionar-direita">Adicionar  direita</button></div>
RESULTADO

Mtodo :even e :odd

A grande maioria dos selectores utilizados pelo jQuery são baseados em seletores já implementados via CSS (first, last, first-child, etc), mas alguns deles continuam exclusivos a própria biblioteca jQuery, que é o caso dos seletores ":even" (par) e ":odd" (ímpar). No exemplo abaixo, iremos aplicar diferentes configurações para as linhas pares e ímpares da tabela.

EXEMPLO

<style type="text/css">.bloco{width:50px; height:50px; background:#036; float:left; margin:0 15px 0 0}</style><script type="text/javascript">$().ready(function(e) {// Adicionar a cor ao background das td's pares    $('.exemplo4 td:even').css('background','#BCE9E0')// Adicionar a cor ao background das td's mpares$('.exemplo4 td:odd').css('background','#F5D5C5')});</script><div class="exemplo4 fl"><table width="500" border="0" cellspacing="1" cellpadding="4">  <tr>    <td><strong>Linha 1</strong></td>  </tr>  <tr>    <td><strong>Linha 2</strong></td>  </tr>  <tr>    <td><strong>Linha 3</strong></td>  </tr>  <tr>    <td><strong>Linha 4</strong></td>  </tr></table>
RESULTADO
Linha 1
Linha 2
Linha 3
Linha 4
Publicidade
Postado por: Arthur P. Saborido
Criação e Diagramação

 

Assine nosso feeds e receba notcias todas semanas

ltimos Clientes

[veja todos]