WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e 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).

Método 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

Método 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) {
	//Através do seletor :eq(), iremos determinar diretamente qual o número do elemento que irá receber
      a configuração. No caso do :eq(), o número de elementos é contado a partir do 0, então o número 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

Método 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 método .click() para que as funções ocorram apenas ao clicar nos botões
	$('#adicionar-direita').click(function(){
		//Neste exemplo, toda vez que clicarmos no botão  "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 botão "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

Método :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 notícias todas semanas

Últimos Clientes

[veja todos]