Thiago Rigo

Olá, hoje darei início a uma série de artigos explicando e exemplificando o seletor da jQuery.

Nesta primeira parte explicarei os seletores básicos, e mostrarei exemplo de todos.

No fim do post tem um .zip com todos os exemplos organizados para download.

Na jQuery é utilizado o seletor para selecionar os elementos que desejamos manipular, assim como no CSS.

Para demonstrar os seletores, irei utilizar a função css() da jQuery, que é utilizada para manipular o style dos elementos. Para todos os elementos que forem selecionados, irei aplicar uma borda de 5px sólida e vermelha.

Introdução

Existem duas sintaxes básicas do seletor da jQuery.

$(seletores)

jQuery(seletores)

O $ nada mais é do que um atalho para a função jQuery. Ele é o mais utilizado, o único problema, é quando se trabalha com diversas bibliotecas JavaScript, onde pode haver conflitos, por isso nesses casos é utilizada a função jQuery ao invés de $.

Outro ponto muito importante, é executar o JavaScript somente quando a árvore DOM estiver pronta (no caso de você querer manipular os elementos da página). Por isso utilizamos a função ready(), que quando passamos ao seletor o document, que representa a página, as operações nele contidas, só serão executadas quando a árvore DOM estiver pronta.

Podemos fazer isso de duas formas.

$(document).ready(function() {
// seu código vai aqui
});

$(function() {
// seu código vai aqui
});

A segunda opção é um atalho para a primeira.

Vamos lá.

Seletor – ID

Nesse exemplo, será selecionada a div#segundo, pois a cerquilia # é usada para indicar um ID.

JS

$(document).ready(function() {
$('#segundo').css('border', '5px solid red');
});

HTML

<div id="exemplo">
<h3>Seletor - ID</h3>

<div id="primeiro">DIV #primeiro</div>

<div>DIV</div>

<div id="segundo">DIV #segundo</div>
</div>

Seletor – Tag

Nesse exemplo, serão selecionados todos os p(parágrafo), pois estamos utilizando o seletor de TAGs.

JS

$(document).ready(function() {
$('p').css('border', '5px solid red');
});

HTML

<div id="exemplo">
<h3>Seletor - Tag</h3>

<div id="primeiro">DIV #primeiro</div>

<div>DIV</div>

<div id="segundo">DIV #segundo</div>

<p>Eu sou alterado!!!</p>
</div>

Seletor – Classe

Nesse exemplo, serão selecionados todos os elementos que possuírem a classe .branco, pois o ponto final . indica que é uma classe.

JS

$(document).ready(function() {
$('.branco').css('border', '5px solid red');
});

HTML

<div id="exemplo">
<h3>Seletor - Classe</h3>

<div id="primeiro" class="branco">DIV #primeiro .branco</div>

<div>DIV</div>

<div id="segundo">DIV #segundo</div>

<p class="branco">P .branco</p>
</div>

Seletor – Múltiplas classes

Nesse exemplo, serão selecionados todos os elementos que possuírem as duas classes .branco e .big, se o elemento possuir apenas uma das classes, esse não será selecionado.

Obs: Note que no seletor não há espaço entre uma classes e outra, se colocado o espaço, esse será considerado um seletor hierárquico, que veremos num próximo post.

JS

$(document).ready(function() {
$('.branco.big').css('border', '5px solid red');
});

HTML

<div id="exemplo">
<h3>Seletor - Múltiplas classes</h3>

<div id="primeiro" class="branco big">DIV #primeiro .branco .big</div>

<div>DIV</div>

<div id="segundo">DIV #segundo</div>

<p class="branco">P .branco</p>
</div>

Seletor – *

Nesse exemplo, serão selecionados todos os elementos que estão dentro da div#exemplo, pois o asterisco * indica para selecionar todos os elementos, e no caso utilizamos depois o seletor de ID para selecionarmos a div#exemplo isso indica que serão selecionados todos os elementos dentro dessa div.

Obs: Se você não colocar o segundo seletor, e deixar apenas o asterisco, serão selecionados todos os elementos da página.

JS

$(document).ready(function() {
$('*', '#exemplo').css('border', '5px solid red');
});

HTML

<div id="exemplo">
<h3>Seletor - *</h3>

<div id="primeiro" class="branco big">DIV #primeiro .branco .big</div>

<div>DIV</div>

<div id="segundo">DIV #segundo</div>

<p class="branco">P .branco</p>
</div>

Seletor – Múltiplos seletores

Nesse exemplo, serão selecionados diversos elementos, assim como no CSS que é permitido selecionar diversos elementos separando eles por "vírgula ,", a jQuery também nos proporciona esse tipo de seletor.

JS

$(document).ready(function() {
$('p.branco, #primeiro, #segundo').css('border', '5px solid red');
});

HTML

<div id="exemplo">
<h3>Seletor - Múltiplos seletores</h3>

<div id="primeiro" class="branco big">DIV #primeiro .branco .big</div>

<div>DIV</div>

<div id="segundo">DIV #segundo</div>

<p class="branco">P .branco</p>
</div>

Download

Espero que tenham gostado.