namespace Programatik - jQuery: Aprenda o Básico

iMask: Criando mascara para input HTML »

07.10.08

jQuery: Aprenda o Básico - Lição 2

13:02:48, por mrxrsd

304 visualizações
Categorias: javascript, jquery, design, css

Como vimos na Lição 1, o jQuery através do operador $ retorna uma coleção de elementos, assim como nas linguagens OO, podemos iterar sobre essa coleção.

Resposta:

Iterando pelas coleções

Para determinar o tamanho da coleção de objetos, usamos o comando size(). Por exemplo, desejamos saber todos os ID´s dos elementos div do nosso site.

Javascript:

for (var i = 0 ; i < $('div').size(); i++){
        alert('Olá! Sou a div de ID ' + $('div')[i].id);
}

Outra opção é usar o comando each(), que é basicamente nosso famoso delegate do .net.

Javascript:

$('div').each( function(){
                            alert('Olá! Sou a div de ID ' + this.id);
                         }
              );

Repare que o nosso objeto é acesso pelo uso da palavra-reservada this.

Obtendo e Setando Atributos

Podemos realizar essas operações através do método attr(). Ele possui dois overloads, que fazemos o uso da seguinte maneira

Javascript:

$('elemento').attr('atributo'); // Obtendo o valor atual
$('elemento').attr('atributo','valor'); // Setando um valor

Alguns atributos que são muito comum tem sua própria propriedade, como é o caso de width e height.

Javascript:

$('elemento').width(100);
$('elemento').height(100);
$('elemento').width(100).height(150);

Adicionando e Removendo classes CSS de um elemento

Imagine que queremos setar várias propriedades em um elemento

Javascript:

	$('elemento').attr('background-color','red');
	$('elemento').attr('width,'150');
	$(' elemento').attr('height,'250');

Ter que fazer todas essas atribuições é um saco né? Você pode criar uma classe CSS com todas essas propriedades e atribuir a um elemento com um único comando.

Javascript:

$('elemento').addClass('nome-da-classe1','nome-da-classe2',...);
$('elemento').removeClass('nome-da-classe1','nome-da-classe2',...);

Em alguns momentos pode ser interessante adicionar uma classe ou remove-la dependendo do estado atual, o famoso "mouse em cima, mouse fora", "liga, desliga", etc.

Javascript:

$('elemento').toggleClass('nome-da-classe');

Sendo que esse "estado atual", é verificar se ela já possui a classe que você está passando paramêtros, ele vai verificar se o elemento já possui a classe que você está passando, caso tenha, ele retira as propriedades referente a essa classe, caso não tenha, ele adiciona.

Tags: css, design, javascript, jquery