Site Overlay

Seletores JQuery

Seletores são utilizados a fim de capturar um determinado elemento do HTML e com isso manipulá-lo de acordo com a necessidade do desenvolvedor. A identificação do seletor se dá através da sintaxe $(), porém para utilizá-lo de forma eficaz é preciso entender os diversos tipos de seletores disponíveis na biblioteca JQuery.

Tipos de seletores JQuery

O seletor de id: acessa o elemento cujo valor do atributo id for especificado no parâmetro. A sintaxe de id segue as mesmas regras do CSS, onde o id do elemento é precedido com #.

<script type=”text/javascript”>

function mostraParagrafo()

{

$(“#paragrafo”).fadeIn(“slow”);

}

</script>

<input type=”button” onclick=”mostraParagrafo()” value=”exibe paragrafo” />

<p id=”paragrafo” style=”display: none;”>

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.

</p>

No exemplo acima foi utilizado um botão para disparar o evento de exibição do parágrafo.

O seletor $(classe) acessa o elemento, ou os elementos que tiverem o atributo class com o valor listado no parâmetro. A sintaxe do nome da classe segue as mesmas regras do CSS onde o nome da classe é precedido de ponto.

<style type=”text/css”>

.escondido{

display: none;

}

</style>

<script type=”text/javascript”>

function mostraParagrafo()

{

$(“.escondido”).slideDown(“slow”);

}

</script>

<input type=”button” onclick=”mostraParagrafo()” value=”exibe paragrafo” />

<p class=”escondido”>

Paragrafo 1.

</p>

<p class=”escondido”>

Paragrafo 2.

</p>

<p class=”escondido”>

Paragrafo 3.

</p>

O seletor $(elemento) é utilizado para referenciar uma tag ou conjunto de tags de nome ‘elemento’. Repetimos no exemplo abaixo o efeito do seletor anterior, mas dessa vez referenciamos os elementos da página a partir da tag.

<style type=”text/css”>

.escondido{

display: none;

}

</style>

<script type=”text/javascript”>

function mostraParagrafo()

{

$(“p”).slideDown(“slow”);

}

</script>

<input type=”button” onclick=”mostraParagrafo()” value=”exibe paragrafo” />

<p class=”escondido”>

Paragrafo 1.

</p>

<p class=”escondido”>

Paragrafo 2.

</p>

<p class=”escondido”>

Paragrafo 3.

</p>

Podemos acessar também um grupo de elementos da página utilizando um agrupamento de seletores. O agrupamento é referenciado por uma lista de seletores separados por vírgula. Exemplo: $( ‘p, .escondido, #menu’ ).

<script type=”text/javascript”>

$(document).ready(function() {

$(“a, #menu, h1”).css(“font-family”, “Verdana”);

});

</script>

<h1>Meu site</h1>

<hr />

<div id=”menu”>

<a href=””>Home</a> ::

<a href=””>Quem somos</a> ::

<a href=””>Contato</a>

</div>

No exemplo acima, ao ser carregada a página, a fonte dos elementos referenciados é alterada para “Verdana”.

É possível também acessar o elemento descendente do ancestral especificada no parâmetro:

<style type=”text/css”>

div {

width: 200px;

height: 100px;

border: 1px solid #000;

margin: 20px;

}

</style>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#botao’).click(function()

{

$(‘div span’).css(‘background-color’, ‘red’);

});

});

</script>

<input type=”button” id=”botao” value=”adiciona cor vermelha” />

<div>

<p>Paragrafo filho de div com <span>texto</span> marcado com span.</p>

</div>

No exemplo acima é adicionado um evento click ao botão que adiciona a cor vermelha ao fundo do elemento span contido dentro do elemento div, indicado como ‘div span’ dentro da lista parâmetros.

O acesso ao elemento-filho do pai no parâmetro também é possível:

<style type=”text/css”>

div {

width: 200px;

height: 100px;

border: 1px solid #000;

margin: 20px;

}

</style>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#botao’).click(function()

{

$(‘div > span’).css(‘background-color’, ‘red’);

});

});

</script>

<input type=”button” id=”botao” value=”adiciona cor vermelha” />

<div>

<p>Paragrafo filho de div com <span>texto</span> marcado com span.</p>

</div>

Foi utilizado o mesmo exemplo do seletor anterior, mas como não há elemento span filho da div (o span é filho do parágrafo), nada acontece quando se clica no botão. Caso tivesse usado o seletor $(‘p>span’), o elemento span teria sido alvo do seletor.

O exemplo seguinte acessa o elemento próximo que se segue imediatamente ao elemento anterior:

<style type=”text/css”>

div {

width: 200px;

height: 100px;

border: 1px solid #000;

margin: 20px;

}

</style>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#botao’).click(function()

{

$(‘div+p’).css(‘background-color’, ‘red’);

});

});

</script>

<input type=”button” id=”botao” value=”adiciona cor vermelha” />

<div>

<p>Paragrafo filho de div com <span>texto</span> marcado com

span.</p>

</div>

<p>Paragrafo irmão da div.</p>

No exemplo acima foi utilizado um evento que marca com o fundo vermelho o próximo parágrafo depois da div.

O próximo é um seletor previsto no CSS3 que acessa todos os elementos irmãos e que se seguem ao elemento ‘anterior’:

<style type=”text/css”>

div {

width: 200px;

height: 100px;

border: 1px solid #000;

margin: 20px;

}

</style>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#botao’).click(function()

{

$(‘h2 ~ p’).css(‘background-color’, ‘red’);

});

});

</script>

<input type=”button” id=”botao” value=”adiciona cor vermelha” />

<h2>Titulo</h2>

<p>Paragrafo 1 irmão da div.</p>

<p>Paragrafo 2 irmão da div.</p>

<p>Paragrafo 3 irmão da div.</p>

 

O exemplo acima marca todos os parágrafos que ocorrem após o elemento h2 com o fundo vermelho.

Uma das utilizações mais comuns é o acesso ao primeiro elemento, acessando a primeira ocorrência do conjunto de elementos selecionados pelo seletor:

<style type=”text/css”>

div {

width: 200px;

height: 100px;

border: 1px solid #000;

margin: 20px;

}

</style>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#botao’).click(function()

{

$(‘p:first’).css(‘background-color’, ‘red’);

});

});

</script>

<input type=”button” id=”botao” value=”adiciona cor vermelha” />

<p>Paragrafo 1 irmão da div.</p>

<p>Paragrafo 2 irmão da div.</p>

<p>Paragrafo 3 irmão da div.</p>

O exemplo acima marca o primeiro dos parágrafos com o fundo vermelho.

Na sequência, o seletor que acessa a última ocorrência do conjunto de elementos selecionados pelo seletor:

<style type=”text/css”>

div {

width: 200px;

height: 100px;

border: 1px solid #000;

margin: 20px;

}

</style>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#botao’).click(function()

{

$(‘p:last’).css(‘background-color’, ‘red’);

});

});

</script>

<input type=”button” id=”botao” value=”adiciona cor vermelha” />

<p>Paragrafo 1 irmão da div.</p>

<p>Paragrafo 2 irmão da div.</p>

<p>Paragrafo 3 irmão da div.</p>

O exemplo acima marca o último dos parágrafos com o fundo vermelho.

Por fim, o seletor que busca todos os elementos da página aquele especificado no comando:

<style type=”text/css”>

div {

width: 200px;

height: 100px;

border: 1px solid #000;

margin: 20px;

}

</style>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#botao’).click(function()

{

$(‘p:not(p:first)’).css(‘background-color’, ‘red’);

});

});

</script>

<input type=”button” id=”botao” value=”adiciona cor vermelha” />

<p>Paragrafo 1 irmão da div.</p>

<p>Paragrafo 2 irmão da div.</p>

<p>Paragrafo 3 irmão da div.</p>

No exemplo acima o código marca todos os parágrafos menos o primeiro.

5

Source: scriptcase / Seletores JQuery

Comments

comments

Leave a Reply

Your email address will not be published.