Jquery – Seleção de Elementos




Em Jquery, é muito mais fácil buscar um elemento dentro de sua página web do que utilizando puro javascript.  Confira abaixo alguns exemplos de como fazer a seleção de um elemento.
  • $(‘p’)

Seleciona todos os elementos de tag p na página.

  • $(‘#texto’)

Seleciona todos os elementos dentro de tags com id=’texto’ dentro de sua página.

  • $(‘.texto’)

Seleciona todos os elementos dentro de tags com class=’texto’ dentro de sua página.

  • $(‘p, div’)

Seleciona, ao mesmo tempo, os elementos dentro de tags p e div em sua página.

  • $(‘p’, $( ‘#texto’))

Seleciona todos os elementos dentro da tag p, de sua página, que por sua vez, estão dentro de tags com ‘id=texto’. Ou seja, caso você tenha tags p dentro de uma div com id diferente de id=texto, por exemplo, estas tags não serão consideradas. O que acontece aqui é que estamos selecionando um elemento (p) dentro de um contexto ($(‘#texto’)).

  • $(‘p’, $( ‘.texto’))

Seleciona todos os elementos dentro da tag p, de sua página, que por sua vez, estão dentro de tags com ‘class =texto’. Ou seja, caso você tenha tags p dentro de uma div com class diferente de class =texto, por exemplo, estas tags não serão consideradas.

  • $(‘div p’)

Seleciona todos os elementos dentro da tag p, de sua página, que por sua vez, estão dentro de tags divs. Ou seja, seleciona todos os que são descendentes de div.

  • $(‘div > span’)

Seleciona todos os spans que são filhos de div. Lembre-se que um elemento é filho de outro se, e somente se, ele é o próximo na cadeia de níveis. Se um elemento x está a dois níveis abaixo de y, y não é seu filho, e sim seu descendente. Um filho é um descendente, mas um descendente não é, necessariamente, um filho.

  • $(‘div + p’)

Seleciona o primeiro elemento, no caso a  div  e o elemento imediatamente posterior, no caso o p. Ou seja, nesse caso teríamos selecionado todos os elementos dentro da div e o que estiver logo após a div.

  • $(‘div ~ p’)

Seleciona o primeiro elemento, no caso a  div  e todos os seus irmãos que são tags p. Ou seja, a div, tendo um elemento pai x qualquer, teria sido selecionada e todos os filhos de x, que são tags p , seriam selecionados também. Contudo, as tags p selecionadas, devem vir APÓS a tag div. Todos os “filhos mais novos” do pai x não serão considerados.

  • $(‘li:first’)

Seleciona o primeiro elemento li .

  • $(‘li:last’)

Seleciona o último elemento li .

  • $(‘li:not(li:last)’)

Seleciona todos os elementos li, exceto o último.

  • $(‘p:even’)

Seleciona as ocorrências pares do elemento p. Não se esqueça que a primeira ocorrência é considerada a ocorrência zero, ou seja, par.

  • $(‘p:odd’)

Seleciona as ocorrências ímpares do elemento p.

  • $(‘p:eq(3)’)

Seleciona a terceira ocorrência  do elemento p.

  • $(‘p:gt(3)’)

Seleciona as ocorrências, após a terceira,  do elemento p.

  • $(‘p:lt(3)’)

Seleciona as ocorrências, anteriores a terceira,  do elemento p.

  • $(‘:header’)

Seleciona todos os headers, independente do nível.

  • $(‘p:contains(‘programas’)’)

Seleciona as ocorrências do elemento p que contenham o termo ‘programas’.

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

5 Comentários

// Siga as boas práticas: Comente!