Bem vindo ao SOS Designers

Faça o seu cadastro gratuito no Portal SOS Designers e tenha um acesso personalizado.

Empresas

Cadastre gratuitamente suas vagas, crie sua propria Lista de Curriculos Favoritos, e tenha um acesso personalizado.

Usuarios

Cadastre gratuitamente seu curriculo, crie sua propria Lista de Noticias Favoritas e tenha um acesso personalizado.

Área de Empresas | Vagas

Área de acesso a empresas cadastradas que desejam postar vagas de empregos no Portal e pesquisar curriculos.

Cadastre-se gratuitamente
Esqueceu a sua senha?

Área de Usuarios | Curriculos

Área do Usuario que deseja cadastrar seu curriculo e pesquisar vagas.



Cadastre-se gratuitamente
Esqueceu a sua senha?


Redes Sociais
Siga o Portal SOS Designers no Twitter Siga o Portal SOS Designers no Facebook

JavaScript / jQuery


Você está aqui: Home » JavaScript / jQuery » Entendendo os seletores do jQuery

Entendendo os seletores do jQuery


Pesquisar no Portal SOS Designers





Tempo Real



Siga o SOS Designers








pub_flash( 'http://www.sosdesigners.com/banners/mkt digital_flash_300x250.swf', 300, 250 ); " alt="Tecnoponta - 300 x 250 - MKT Digital" />

Hoje vou falar sobre uma parte bem simples mas de enorme importância no uso do jQuery: os seletores.

Através dos seletores você escolhe com qual elemento do HTML irá trabalhar e/ou interagir.


Os seletores do jQuery são muito parecidos com os seletores do CSS onde você identifica cada elemento usando uma sintaxe em particular… Pra quem entende de CSS vai ser bem simples.


Suponhamos que você tenha três DIVs em seqüência e queira colocar uma borda apenas na div com classe “carros”, exemplo:

<div>Olá mundo!</div>
<div class="carros">Olá mundo!</div>
<div class="naves">Olá mundo!</div>


Nossa linha do jQuery que coloca uma borda ficaria assim:


// Assim:
$("div.carros").css('border', '1px solid red');

// Ou assim:
$(".carros").css('border', '1px solid red');


Percebam que a segunda regra vai afetar TODOS os elementos que tenham a class “carros”. :)

Agora vamos mudar a linha de ação um pouco e afetar todas as DIVs exceto a que tenha a classe “naves”… Para isso vamos usar o seletor “div” e excluir o elemento que tenha class “naves”, assim:


$("div[class!='naves']").css('border', '1px solid red');


Agora suponhamos que você queira fazer três ações sobre o mesmo elemento, você pode fazer isso de três formas:


// Assim:
$("div.carros").css('border', '1px solid red');
$("div.carros").css('color', 'blue');

// Ou assim:
$("div.carros").css('border', '1px solid red').css('color', 'blue');

// Ou assim:
var elemento = $("div.carros");
elemento.css('border', '1px solid red');
elemento.css('color', 'blue');

// E até assim:
var elemento = $("div.carros");


Existem várias outras formas e atalhos legais para se usar nos
seletores… Para selecionar dois (ou mais) elementos você poderia fazer


$("div.carros, div.naves, div#topo").css('border', '1px solid red');


Sabe aquele efeito legal de zebra nas tabelas? O famoso “cor sim, cor
não, cor sim, cor não”? Você pode ter esse efeito usando apenas uma
linha de jQuery sem definir nenhuma classe ou rodar nenhum codigo dentro


$("tr:odd td").css('background', '#008800');


Isso vai afetar todos os <td> que estão dentro dos <tr> ímpares (por causa do odd), ou seja: 1°, 3°, 5° e por aí vai! Legal não? :)

Percebam que o único exemplo de função/método que eu usei foi o css(), mas existem dezenas e dezenas de outras funções legais no jQuery e a maioria deve estar associada a um seletor.


Espero que tenham gostado e não deixem de ler a documentação oficial sobre os seletores!

 

Sobre o Colunista:

Thiago Belem


Profissão: Desenvolvedor PHP, WebMaster e Geek

Descrição: Sou WebMaster e Desenvolvedor PHP há cinco anos, trabalho no Jornal do Brasil, estou cursando o 3º período de Ciência da Computação na Unicarioca e atuo como Desenvolvedor Freelancer na Clio Interactive. Estudo programação desde os 12 anos de idade e trabalho com PHP e MySQL voltados para o desenvolvimento WEB desde o fim de 2006. Atualmente mantenho meu blog sobre PHP, MySQL, jQuery e Desenvolvimento WEB e sou colunista do portal iMasters, onde também sou moderador do Fórum de PHP e do Fórum Oficial de CakePHP (Brasil).
Thiago Belem

Deixe seu comentário:





© Copyright 2002-2017
Portal SOS Designers
Webmaster: Luiz Antonio Bovi