Hola pessoal este é o segundo artigo da serie seletores, neste artigo o falaremos de seletores XPath e seletores de atributo.

Este artigo sera bem mais “enxuto”, para melhor entendimento recomendo a leitura do primeiro artigo , bom mãos a obra:

Descendentes: E//F

Obtém o elemento F que é descendente do elemento E no DOM

Exemplo:

$(“div//table”):obtém todas as tables que sejam descendentes de alguma div.

Filho: E/F

Obtém o elemento F que é filho do elemento E no DOM

Exemplo:

$(“ul/li”): obtém todos os elementos li que sejam filhos de algum ul.

Pai: E/..

Obtém todos os elementos pai de um elemento E no DOM

Exemplo:

$(“li/..”): obtém todos os elementos pai que possuam de algum li como filho.

Contem: [E]

Obtém todos os elementos que contenham um elemento E no DOM

Exemplo:

$(“div[.minhaClasse]“): obtém todas as divs que contem um elemento com a classe “minhaClasse

”

Seletores de Atributo:

Estes seletores permitem selecionar os elementos do DOM pelos seus atributos.

Possui atributo: [@foo]

Obtém todos os elementos que possuam o atributo foo.

Exemplo:

$(“[@name]“): obtém todos os elementos que possuam atributo “name”

Valor de atributo igual: [@foo=bar]

Obtém todos os elementos que possuam o atributo foo com o valor exatamente igual a bar.

Exemplo:

$(“[@value=ok]“): obtém todos os elementos que possuam o atributo “value” igual a “ok”

Valor de atributo diferente: [@foo!=bar]

Obtém todos os elementos que não possuam o atributo foo com o valor exatamente igual a bar.

Exemplo:

$(“[@value!=ok]“): obtém todos os elementos que possuam o atributo “value” não igual a “ok”

Valor de atributo inicial: [@foo^=bar]

Obtém todos os elementos que possuam o atributo foo cujo valor inicie com a string bar.

Exemplo:

$(“[@value^=nome"): obtém todos os elementos que possuam um atributo "value" que iniciem pela string "nome".

Valor de atributo final: [@foo$=bar]

Obtém todos os elementos que possuam o atributo foo cujo valor finalize com a string bar.

Exemplo:

$(“[@value$=nome"): obtém todos os elementos que possuam um atributo "value" que finalize pela string "nome".

Valor de Atributo contem: [@foo*=bar]

Obtém todos os elementos que possuam o atributo foo cujo valor possua a substring bar.

Exemplo:

$(“[@class*=vermelho”): obtém todos os elementos que possuam o atributo “class” que possua a substring “vermelho”.

Bom este é o final deste artigo, teremos o ultimo artigo da serie sobre seletores e finalmente entraremos com ajax e coisas mais interessantes como plugins para jQuery e dicas de performance.

OBS: Foi usado os termos foo e bar, porque em 90% dos tutoriais sobre CSS e XPath você achara algo assim, na realidade foi falta de um nome mais adequado

by Zuela