Seletores Jquery

Por Cid Andrade do Blog Tecnologia e Educação

Quase toda programação com JQuery é baseada na seleção de elementos para posterior manipulação.

Muitas são as formas de seleção de elementos com JQuery. Todas retornam um vetor de elementos (Array<elemento>).

Vamos a uma lista delas.

Seleção básica

• #id. Elemento com determinado id. Apenas um elemento deve ter determinada id em um documento. Exemplo:
  $("#primDiv").css("background-color","black");
• elemento. Seleção pelo elemento HTML. Exemplo:
  $("div").css("border","9px double red");
• .classe. Elementos de determinada classe. Exemplo:
  $(".destaque").css("fontWeight","bolder");
• .classe.classe. Elementos que pertençam a ambas classes. Exemplo:
  $(".destaque.especial").css("color","red");
• *. Todos elementos. Exemplo:
  $("*").css("color","black");
• Combinação dos anteriores. Os seletores podem ser combinados de diversas maneiras, separados por vírgulas. Exemplo:
  $("div,span,p.olho").css("margin","3px 0 0 0");

Hierarquia

A seleção pode ser mais detalhada com indicação de hierarquia. Veja as opções

• Ascendente Descendente. Seleção de descendentes de determinado elemento. Exemplo:
  $("form label").css("color","gray");
• Pai > Filho. Seleção de elementos-filho de um determinado elemento. Exemplo:
  $("#conteudo > *") .css("border","2px solid green");
• Anterior + Seguinte. Seleção de elemento que segue-se a um determinado elemento. Exemplo:
  $("label + input").css("border","1px dotted blue");
• Anterior ~ Irmãos. Seleção de elementos-irmãos após determinado elemento. Exemplo:
  $("#inicio ~ div").css("color","aquamarine");

Filtros

Outra forma de refinar a seleção é utilizar filtros. Vejamos uma lista de filtros:

• :first. Primeiro elemento da seleção. Exemplo:
  $("tr:first").css("font-style","italic");
• :last. Inverso de :first
• :not(seletor). Filtra elementos que não se encaixam em determinado seletor. Exemplo:
  $("input:not(:checked) + span") .css("border","1px dotted darkSalmon");
• :even. Elementos com índice par, considerado que o índice inicia em zero. Exemplo:
  $("tr:even").css("background-color","lavender");
• :odd. Inverso de :even
• :eq(índice). Determinado elemento pelo seu índice. Exemplo:
  $("td:eq(2)").css("background-color","MintCream");
• :gt(índice). Todos elementos com índice superior a determinado valor. Exemplo:
  $("p:gt(1)").hide();
• :lt(índice). Inverso de :gt(índice)
• :header. Todos elementos header. Exemplo:
  $(":header").css("color","navy");
• :animated. Todos elementos que estão sendo animados no momento da seleção.

Filtros de conteúdo

Além de filtrar os elementos em si, podemos criar filtros pelo conteúdo.

• :contains(texto). Seleciona elementos que contenha determinado texto. Exemplo:
  $("p:contains('JQuery')").css("text-decoration","underline");
• :empty. Seleciona elementos sem filhos. Exemplo:
  $("td:empty").css("background-color","MediumOrchid");
• :has(seletor). Seleciona elementos que contenham ao menos um determinado elemento que combine com o seletor informado. Exemplo:
  $("div:has(p)").addClass("grade");
• :parent. Seleciona elementos que tenham elementos filhos. Exemplo:
  $("td:parent").hide();

Filtros de visibilidade

Podemos alterar a propriedade de visibilidade dos elementos. Os filtros de visibilidade servem para selecionar elementos pela sua condição de visibilidade.

• :hidden: Seleciona elementos ocultados. Exemplo:
  $("div:hidden").show(2000);
• :visible. Inverso de :hidden

Filtros de atributos

Outra forma de filtrar uma seleção de elementos é pela presença, ausência ou valores de atributos dos elementos. Vejamos os métodos:

• [atributo]. Elementos que contenham determinado atributo. Exemplo:
  $("div[id]“).css(”color”,”lime”);
• [atributo=valor]. Elementos com atributo que tenham determinado valor. Exemplo:
  $("p[class='ocultar']“).hide(3000);
• [atributo!=valor]. Elementos com atributo que não tenham determinado valor.
• [atributo^=valor]. Elementos com atributo que inicie com determinado valor. Exemplo:
  $("input[name^='req']“).val(”Requerido”);
• [atributo$=valor]. Elementos com atributo que termine com determinado valor.
• [atributo*=valor]. Elementos com atributo que contenha determinado valor.
• Estes filtros podem ser combinados como neste exemplo:
  $("input[type='text'][id]“).css(”color”,”Darkred”);

Filtros por afiliação

Outra forma de filtrar é pela avaliação de relação de afiliação entre os elementos. Vejamos:

• :nth-child(índice/par/ímpar/equação). Seleciona o n-ésimo elemento da seleção por afiliação ou os elementos pares, ímpares ou ainda de acordo com uma equação. Exemplo:
  $("ol li:nth-child(2)").css("background-color","Bisque");
• :first-child. Primeiro filho de uma seleção.
• :last-child. Inverso de :first-child
• :only-child. Seleciona todos elementos que são únicos filhos de seus elementos-pai.

Elementos de formulário

Também podem ser selecionados os elementos de formulários como

• :input
• :text
• :password
• :radio
• :checkbox
• :submit
• :image
• :reset
• :button
• :file

Veja este exemplo:

$("form :checkbox").css("border","2px solid LightSlateGray");

Estado de elementos de formulários

Os elementos de formulários podem ter sua seleção refinada pelo estado destes elementos. São exemplos

• :enabled
• :disabled
• :checked
• :selected

Um exemplo de uso seria

alert($("input:checked").length + " selecionados");