<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
    		$('button').click(function () {
			/*linha dos exemplos*/
			});
		});
</script>

Seletores de conteúdo

Seletor contains

Esse seletor é exclusivo da biblioteca jQuery. Acessa o texto definido no parâmetro.

$('div:contains(jQuery)').css('text-decoration', 'underline');

HTML

<button type="button">Alterar</button>
    <div><p>Biblioteca jQuery</p></div>
    <div><p>div é elemento de bloco</p></div>
    <div>Biblioteca jQuery é ótima</div>

Ao disparar o evento o seletor acessa todos elementos div e procura o nome jQuery. No exemplo será afetada a primeira linha, mesmo estando dentro do elemento p, pois é descendente do elemento dv.
A terceira linha será afetada também.

Seletor empty

Acessa todos elementos que não tenham conteúdos.

$('td:empty').text('Estava vazia') .css('background', 'red');

HTML

<button type="button">Vermelha</button>
	  <table border="1">
    <tr>
    	<td>Com conteúdo</td><td></td>
    </tr>
    <tr>
    	<td>Com conteúdo</td><td></td>
    </tr>
    <tr>
	<td></td><td>Com conteúdo</td>
    </tr>
  </table>

No exemplo acima o seletor procura as células vazias e escreve o texto “Estava vazia”.

Seletor parent

Seletor exclusivo da biblioteca. Acessa todas as ocorrências de elementos que sejam elementos pais de outros elementos e até texto.

$('p:parent').css('background', 'red');

HTML

<button type="button">Vermelha</button>
	<p>Texto do primeiro parágrafo</p>
	<p></p>
	<p>Texto do <b>Terceiro</b>parágrafo</p>

Nesse caso será alvo o primeiro e o terceiro parágrafo. O Segundo não será alvo pois não tem conteúdo.

Seletor has

Exclusivo da biblioteca. Acessa elementos que contenham pelo menos um elemento que coincide com o especificado no seletor.

$(‘div:has(p)’).css('background','yellow');

HTML

<div><p>Olá! Aqui é um parágrafo</p></div>
  <div>Olá! Aqui é outro parágrafo</div>

A div que contem o elemento p é afetada, já que possui ao menos um elemento p dentro da div.

Isso vai interessar você também

• Nenhum post relacionado

<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
    		$('button').click(function () {
			/*linha dos exemplos*/
			});
		});
</script>

Seletor anterior irmão

Esse seletor está previsto para as CSS 3. Esse seletor tem como objetivo acessar todos os elementos irmãos que se seguem ao elemento declarado como anterior.

$('h2 ~ p').css('background', 'red');

HTML

<button type="button">Vermelha</button>
	<p>Parágrafo antes do cabeçalho h2</p>

<h2>Cabeçalho h2</h2>
	<p>Primeiro parágrafo</p>
	<p>Segundo parágrafo</p>
<div>conteúdo da primeira div</div>
	<p>Terceiro parágrafo</p>

<div>
	<p>Quarto parágrafo, dentro da segunda div</p>
</div>
<p>Quinto parágrafo</p>

No exemplo acima todos os parágrafos que estão fora das divs serão afetados, já que ele vem após o elemento h2 e são irmãos, são filhos do elemento body. Os que estão dentro das divs, não são afetados, porque seguem ao elemento div e não h2.
Um rápido teste. Se trocarmos o seletor para:

$('div ~ p').css('background', 'red');

Você seria capaz de dizer qual o efeito final. Quem será alvo da estilização?

Seletores filtros

Utilizado para fazer um filtro com uma condição. Podemos usar seletor simples e composto.

Seletor first, last e not

É alvo o primeiro elemento do conjunto de elementos selecionados.

$('p:first').css('background', 'red');

HTML

	<button type="button">Vermelha</button>
	<div>
		<p>Primeiro parágrafo</p>
		<p>Segundo parágrafo</p>
        <p>Terceiro parágrafo</p>
    </div>

O alvo será o primeiro parágrafo.
Se trocarmos o seletor por:

$('p:last').css('background', 'red');

O alvo será o último parágrafo.

Temos também a opção de selecionarmos um conjunto e excluirmos uma instancia desse conjunto.

$('p:not(p:last)').css('background', 'red');

Acima estamos dizendo: selecione todos os p, não (not) o último p (p:last).

Seletor even e odd

Este é um seletor da biblioteca jQuery e não das CSS. Esse seletor acessa as ocorrências pares do conjunto de elementos selecionados. Em JavaScript a contagem inicia em 0 (zero).

$('li:even').css('background', 'red');

HTML

<ul>
	<li>Ítem 0</li>
   	<li>Ítem 1</li>
	<li>Ítem 2</li>
	<li>Ítem 3</li>
	<li>Ítem 4</li>
</ul>

O seletor vai afetar os seguintes itens da lista: 0, 2 e 4. Como explicado anteriormente a contagem JavaScript começa em 0 (zero) por isso o primeiro item da lista é afetado.
O Seletor odd faz tem a mesma função, só que acessa as ocorrências impares.

$('li:odd').css('background', 'red');

Seletor eq(índice)

Este é um seletor da biblioteca jQuery e não das CSS. Com esse seletor podemos dizer quem queremos acessar.

$('li:eq(3)').css('background', 'red');

O item 4 da lista será selecionado (já que a contagem inicia em 0).

Seletor gt(índice)

Este é um seletor da biblioteca jQuery e não das CSS. Acessa todas os elementos acima do valor passado no índice. Com o seletor acima será selecionado o item 3 e 4 da lista.

$('li:gt(2)').css('background', 'red');

Seletor lt(índice)

Faz o mesmo que o seletor gt(índice), só que acessa os elementos menores quem o valor passado para índice.

$('li:lt(2)').css('background', 'red');

Essa foi a segunda parte dos seletores. Em breve seletores jQuery parte III. Abraço a todos.

Isso vai interessar você também

• Nenhum post relacionado

Para todos os exemplos será utilizado o mesmo código JavaScript, variando apenas o código para acessar o elemento. Código que se encontra na linha 5. Abaixo veja o código completo.
Para disparar a ação usamos um botão.

<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
    		$('button').click(function () {
			/*linha dos exemplos*/
			});
		});
</script>

Seletor simples:

Acessa um elemento através do valor passado para o atributo id, class ou o próprio elemento da (X)HTML.
Exemplo:

$("#div_dois").css('background', 'red');

HTML

	<button type="button">Alterar cor</button>
	<div id="div_um">Conteúdo da div um</div>
	<div id="div_dois">Conteúdo da div dois</div>

Ao clicar no botão mudará a cor de fundo de todas divs que estiverem com o valor igual a div_dois no atributo id.

Para seletores do tipo classe a idéia é a mesma. Ao invés de usar # (sustenido) usaríamos . (ponto).

$(".div_dois").css('background', 'red');

Para selecionarmos um elemento do HTML usamos:

$("div").css('background', 'red');

No exemplo acima todas as divs do documento serão afetadas, mesmo que tenham classes e ids atribuídas. O mesmo ocorre com outros elementos HTML.

Agrupando seletores

Se para vários seletores temos a mesma estilização, uma alternativa é fazer o agrupamento deles.
Exemplo:

$('p, #div_um, .div_dois').css('background', 'gold');

HTML

         	<button type="button">Altera cor</button>
		<div id="div_um">Conteúdo da div_um</div>
		<p>Texto de um parágrafo</p>
		<div class="div_dois">DIV com classe div_dois</div>
		<p class="diferente"> Parágrafo com classe igual a diferente</p>

Seletores compostos:

Temos um seletor composto quando usamos a combinação de dois um ou mais seletores simples. Para os seletores compostos temos três sinais de combinação. Veja um exemplo de cada:

Seletor ancestral descendente

$(div span').css('background', 'gold');

HTML

       <button type="button">Altera cor</button>
	<div>
	<p><span>jQuery</span> é uma <span>biblioteca</span> JavaScript</p>
	</div>
	<p>Seletores são <span>importantes</span></p>

Nesse caso apenas as palavras jQuery e biblioteca foram alvo, pois ambas estão marcadas com span e são descendentes da div. A palavra importantes, também marcada com span, não foi alvo porque é descendente de parágrafo e não de div.

Seletor pai filho

O elemento alvo é o filho do pai especificado no seletor.

$('div > span').css('background', 'red');

HTML

	<button type="button">Altera cor</button>
	<div>
	<p>A palavra <span>jQuery</span> e a palavra <span>css</span> foram alvos do seletor</p>
	</div>
	<p>A palavra <span>design</span> não será alvo do seletor</p>

Nesse exemplo nada acontecerá. Por quê? Simples, nenhum elemento span é filho de div e sim descendente.
Alteramos o código para:

       <button type="button">Altera cor</button>
	<div>
	A palavra <span>jQuery</span> e a palavra <span>css</span> foram alvos do seletor
	</div>
	<p>A palavra <span>design</span> não será alvo do seletor</p>

Veja que agora temos dois elementos span filho da div. Esses dois elementos serão alvo do seletor.

Seletor anterior próximo

Acessa apenas o próximo elemento que se segue do elemento declarado como anterior.

$('h2 + p').css('background', 'red');

HTML

	<button type="button">Vermelha</button>
        <div>
          <h2>Título</h2>
          <p>jQuery é uma excelente biblioteca</p>
          <p>Estou aprendendo muito com jQuery</p>
        </div>

Nesse exemplo apenas o primeiro parágrafo será alvo. Quando declaramos h2 + p estamos dizendo: Ache todos parágrafos que vier imediatamente após h2.
Nesse artigo tive a intenção de mostrar algumas formas de seletores, que se bem explorados nos livrão de fazer marcações adicionais em nosso (X)HTML, deixando o código mais claro e limpo. Em breve seletores jQuery parte II.
Abraço a todos.

Isso vai interessar você também

• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• O que é Jquery?

A biblioteca jQuery é disponibilizada como software livre( pode ser usada, copiada, estudada, modificada e redistribuída sem restrição), ou seja, você pode usar a biblioteca gratuitamente tanto para desenvolver seus projetos pessoais e comerciais.

O seu criador John Resig, resume o que é jQuery assim:

“O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar efeitos simples.”

Só pela sua frase, que foi escrita no prefácio de seu livro jQuery in Action, podemos imaginar que é uma maneira simples e fácil de escrever códigos JavaScript. E realmente é. Até mesmo designers e desenvolvedores com pouco conhecimento de programação são capazes de criar rapidamente seus scripts. E o mais impressionante, você não precisa ser um profundo conhecedor de JavaScript para usar essa biblioteca.

Outra grande vantagem, (a primeira é de ser grátis) é de não ter problemas de incompatibilidade entre browsers. Quem usa css sabe do que estou falando.

jQuery foi criada em conformidade com os padrões web, ou seja, compatível com qualquer sistema operacional e navegador.

Como instalar jQuery

A biblioteca jQuery é um arquivo texto, salvo com a extensão .js (Arquivo JavaScript). Esse arquivo deve ser linkado na página onde serão aplicados os efeitos. E pronto! A biblioteca já pode ser usada.

Existem diferentes tipos de apresentação da biblioteca para download. Para ver acesse o site http://jquery.com e vá até a área de download. A mais completa delas, que inclui muitos comentários no arquivo você encontra nesse link http://jqueryjs.googlecode.com/files/jquery-1.2.6.js (baixe aqui para testar os exemplos)

Como linkar a biblioteca jQuery

Na primeira linha do código observe como chamar a biblioteca jQuery para dentro de suas páginas.

 <script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
Aqui vai as funções jQuery...
</sccript> 

Você também pode utilizar o arquivo disponível no servidor do Google APIS em vez de usar o arquivo que está hospedado em seu servidor.

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

O Método ready()

Em jQuery equivale ao window.onload. Usamos window.onload para disparar nosso script depois que a página foi completamente carregada.

$(document).ready(function(){
     Faça isso...
})

Temos uma sintaxe abreviada de escrever.

$(function(){
    Faça isso...
})

jQyery na prática

<body>
<head>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
		$('#geral').css('background','gold');  // troca cor de fundo da div
		$('p').css('color','red');  //troca cor dos parágrafos
	});

</script>

</head>

<body>
<div id="geral">
	<p>Parágrafo dentro da div #geral</p>
</div>

</body>

Nesse segundo exemplo vamos fazer a mesma coisa, mas quem irá disparar a função será um botão.

O código

	$(function(){
		$('button').click(function(){
			$('#geral').css('background','gold');
			$('p').css('color','red');
		});
	});

HTML

<button type="button">OK</button>
<div id="geral">
	<p>Parágrafo dentro da div #geral</p>
</div>

Nesse primeiro artigo apenas fomos apresentados a biblioteca jQuery e vimos sua sintaxe básica. Até a próxima.

Isso vai interessar você também

• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I