Hola pessoal estarei postando vários artigos sobre jQuery, como primeiro post iniciarei com uma serie de post sobre seletores e depois iremos para coisas mais interessantes

Inicialmente alguns conceitos serão necessários:

Descendente: É um elemento que é filho,neto ou  descendente mais distante de um elemento do documento.

Ancestral: É o elemento que é pai,avo ou ancestral mais distante do elemento de um elemento documento.

Filho: É um elemento que é descendente direto de um elemento do documento.

Pai: É um elemento que é ancestral direto de um elemento do documento.

Adjacente: É um elemento irmão, ou seja possui o mesmo pai no, de um elemento do documento.

Bom ao trabalho:

Universal: *

Obtém todos os elementos do DOM

Exemplo: $(“*”)

Elemento: E

Retorna todos os elementos com a tag  “E”

Exemplo:

$(“div”) :isto retorna todos os elementos que tenham a tag “div”;

Id: #meuId

Retorna o elemento cujo atributo   “id” igual a “meuId

Exemplo:

$(“#meuId”): retorna o elemento cujo atributo id igual a “meuId”

Sempre lembrando que no seu DOM nenhum id devera ser repetir.

Classe: .minhaClasse

retorna todos os elementos cujo atributo “class” é igual a “minhaClasse”

Exemplo:

$(“.minhaClasse”): retorna todos os elementos cujo atributo “class” é igual a “minhaClasse”

$(“div .minhaClasse”): retorna todos os elementos cuja tag seja “div” e cujo atributo “class” é igual a “minhaClasse”

Uma boa observação é que o segundo seletor terá um desempenho melhor que primeiro, pois usa o método nativo “getElementsByTagName()” para realizar uma filtragem no DOM e porque jQuery não usa o método nativo “getElementsByClassName()” fazendo assim o 1° seletor percorrer todo o DOM, bom depois aprofundaremos mais este assunto.

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

Exemplo:

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

Adjacente e Imediato: E+F

Obtém o elemento F que é imediatamente adjacente a E.

Exemplo:

$(“div#myDiv table”): obtém a tabela que seja imediatamente adjacente a div com atributo “id” igual a “myDiv”.

Adjacente: E~F

Obtém o elemento F que é adjacente a E.

$(“div#myDiv table”): obtém as tabelas que sejam adjacentes a div com atributo “id” igual a “myDiv”.

Múltiplos Elementos: A,B,C

Permite retornar vários elementos com seletores diferentes.

Exemplo:

$(“div,.myClass,table span”): retorna todas as divs do documento, todos os elementos que tenham atributo “class” igual a “myClass” e todos os elementos “span” descendentes de alguma “table”.

N-ésimo filho: “:nth-child(n)”

Todos os elementos que são os n-ésimos filhos de seus pais.

Exemplo:

$(“p:nth-child(1)”): Obtém todos os elementos cuja tag seja “p” e que sejam os primeiros filhos de seus pais.

Observação:

Como a implementação da jQuery de nth-child() é diretamente derivada da implementação CSS, o valor de n tem base 1 – a contagem inicia do 1 e não do. Para todos os outros seletores jQuery usa o padrão javascript ou seja tem por base 0, por exemplo o método “:nth()” é um método jQuery, ou seja, :nth(1) retornara o 2° elemento filho.

Outra boa observação é a diferença entre os métodos “:nth-child()” e o “:nth()”, ambos são usados para retornar elementos filhos de um outro elemento, porem podem retornar resultados completamente diferentes, pois:

nth-child(): este método barre todos os elementos filhos, ainda que sejam de tags diferentes, e retorna o elemento se na n-ésima posição tiver um elemento que case com o seletor.

nth(): este método só barre os elementos do tipo selecionado e retorna a n-ésima elemento deste conjunto.

Um exemplo:

<div>

<h2>….</h2>

<p>….</p>

<p>….</p>

<div>

$(“p:nth-child(1)”): não retorna nada, pois não existe elemento “p” que seja o primeiro filho de algum outro elemento.

$(“p:nth(1)”): retorna o segundo “p”, pois ele é o segundo elemento “p” que é filho de algum outro elemento.

Primeiro Filho: “:first-child”

Obtém todos os elementos que são os primeiros filhos de seus pais.

Exemplo:

$(“p:first-child”): obtém todos os elementos “p” que são o primeiro filho de seus pais.

Ultimo Filho: “:last-child”

Obtém todos os elementos que são os últimos filhos de seus pais.

Exemplo:

$(“p:first-child”): obtém todos os elementos “p” que são o ultimo filho de seus pais.

Filho Único: “:only-child”

Obtém todos os elementos que sejam os únicos filhos de seus pais.

Exemplo:

$(“div:only-child”): retorna todos os elementos “div” que são filhos únicos de seus respectivos pais.

Vazio: “:empty”

Obtém todos os elementos que não possuam filhos (incluindo nós de texto)

Exemplo:

$(“p:empty”): retorna todos os elementos “p” que não possuam filhos.

Negação: “:not(s)”

Obtém todos os elementos que não sejam selecionados pelo seletor “s”.

Exemplo:

$(“:not(.myClass)”): retorna todos os elementos que não possuem atributo “class” igual a “myClass”.

Bom esse é o final do nosso primeiro artigo, o seguinte sera “jQuery: Seletores XPath“

Abraços

by Zuela