jQuery: seletores personalizados

Um seletor pode ser composto de uma ou mais classes, atributos ou expressões e sua chamada retorna um conjunto de objetos que atendem suas regras.

[cce lang=”javascript”]

// seleciona todos os elementos
$(‘a’)
// seleciona todas as células com a classe projeto
$(‘td.projeto’)
// seleciona todas as imagens com o source “default.jpg”
$(‘img[src=”default.jpg”]’)
// seleciona todas as linhas diretamente filhas de uma table/tbody
$(‘table > tbody > tr’)
// seleciona o primeiro parágrafo da página
$(‘p:first’)
// os elementos com id “projeto-1” e “projeto-2” e todos os elementos com a classe “projeto”
$(‘#projeto-1, #projeto-2, .projeto’)
[/cce]

No entanto, em momentos bem específicos, para evitar a repetição de código, pode ser necessário desenvolver o seu próprio seletor.

As propriedades de um seletor

O cabeçalho básico de um seletor personalizado segue o modelo abaixo:

[cce lang=”javascript”]
$.expr[‘:’].seletor = function(objNode, intStackIndex, arrProperties, arrNodeStack){
// código que deve retornar true para incluir o objeto ou false
};
[/cce]

Através da alta flexibilidade do jQuery estamos estendendo o funcionamento da expressão “:” adicionando uma função própria, desenvolvida sob medida para nosso site ou aplicação web.

Um seletor personalizado nada mais é do que uma função que retorna true para incluir o elemento na lista ou false para não incluí-lo. Essa função pode receber até quatro parâmetros: