Ver el código de «Seleccionando elementos para a súa manipulación»

Nos apartados anteriores vimos moitos xeitos de utilizar a función '''$()''' de jQuery.


As suas capacidades van dende a selección dos elementos DOM á definición de funcións que se executará cando o DOM está cargado.


Agora imos a ver en detalle a forma en que os elementos DOM están asociados e de que xeito poderemos acceder a eles a través da función '''$()''': mediante a '''selección a través dos selectores''' e a '''creación de novos obxectos''' no DOM.


O primeiro que necesitamos facer cando utilizando prácticamente calquera método jQuery (tamén chamado comando jQuery) é o de seleccionar elementos da páxina para poder operar con eles.


Ás veces, o conxunto de elementos que desexamos seleccionar é fácil de describir, como ''"todos os elementos párrafo na páxina"''.


Noutros casos, requírese unha descrición máis complexa como ''"todos os elementos da lista que teñen a clase listElement e conteñen un vínculo"''.


Afortunadamente, jQuery proporciona unha sólida selección da sintaxis; poderemos fácilmente especificar prácticamente calquera conxunto de elementos de xeito elegante e conciso.


'''jQuery utiliza a sintaxis CSS''' que xa coñeces para seleccionar obxectos no DOM, e ademáis ten algúns métodos personalizados que lle axudan a realizar tarefas comúns e moi complexas sobre ditos obxectos.


{Ver Laboratorio de Selectores}



== Selectores Basicos ==

Para a aplicación de estilos aos elementos da páxina Web, os desarrolladores estan familiarizados cun pequeno pero potente grupos de métodos de selección que funcionan en tódolos navegadores.

Eses métodos inclúen a selección dun elemento polo ID, nome da clase CSS, marca html, etc.

Aqui temos unha pequena lista de exemplos:

----

'''a''' — Este selector seleccionará todos os hiperenlaces (<a>).

'''#identificador''' - Este selector selecciona elementos que teñan como ID o identificador especificado.

'''.unhaClase''' - Este selector incluirá todos os elementos que empreguen a clase "unhaClase".

'''a#identificador.unhaClase''' - Este selector incluirá todos os hiperenlaces que teñan como ID identificador e como clase "unhaClase".

'''p a.unhaClase''' - Este selector incluirá a todos os hiperenlaces que empreguen a clase "unhaclase" e que estén dentro dun párrafo.

----


Podemos mesturar e combinar o selector de base para seleccionar obxectos chegando a un nivel moi detallado dentro da páxina.


Polo tanto podemos empregar en jQuery o mesmo sistema que usamos en CSS. 

{{Alerta|Lembrar|Para seleccionar elementos utilizando jQuery, o que facemos é encapsular entre '''$(" ")''' o selector CSS.}}

Por exemplo: 
<source lang="javascript">
$("p a.unhaClase")
</source>

Cunhas poucas excepcións, jQuery é plenamente compatible con CSS3, polo que empregaremos os mesmos métodos que usamos en CSS. Teña en conta que jQuery non depende da CSS da aplicación ou do navegador que está executando a páxina. jQuery correxirá as incompatibilidades que haxa entre navegadores para que nos deixe facer a selección de xeito correcto sempre cumprindo o estándar W3C.

== Selectores fillo, contenedores e atributos ==

Para o uso de selectores avanzados, jQuery tamén da soporte á próxima xeración de CSS empregada en navegadores Firefox, IE Explorer 7, Safari ou outros navegadores máis modernos.

Estes selectores avanzados inclúen a selección de fillos directos dalgúns elementos, elementos que están a continuación doutros no DOM, ou elementos que teñen atributos cunhas certas condicións.

Ás veces queremos soamente seleccionar os fillos directos dun elemento. Por exemplo poderíanos interesar seleccionar os elementos directos dunha lista, pero que non estén contidos dentro doutra (os que perteñecen á sublista).

Vexamos o código HTML seguinte:
<source lang="html4strict">
<ul class="Lista">
  <li><a href="http://jquery.com">jQuery soporta</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
    </ul>
  </li>
  <li>jQuery tamen soporta
    <ul>Seleccionando elementos para manipulacion
      <li>Selectores detallados</li>
      <li>Selectores de formulario</li>
    </ul>
  </li>
</ul>
</source>

Si por exemplo queremos seleccionar o hiperenlace á páxina jQuery, pero non o resto dos links, empregando CSS poderíamos facer algo semellante a: 

<source lang="html4strict">
 ul.Lista li a
</source>

Desafortunadamente este selector seleccionará todos os hiperenlaces que están dentro dos elementos da lista que usa a clase Lista.

Unha aproximación máis avanzada consiste en usar os selectores fillo. Para elo empregaremos o símbolo > para separar o pai do fillo

<source lang="html4strict">
  p > a
</source>

Este selector seleccionará soamente os enlaces que son fillos directos (é dicir que non teñan entre eles outras marcas intermedias) dunha marca p. 


Regresando ó noso exemplo, se pomos como selector: <source lang="html4strict"> ul.Lista > li > a </source> Este selector selecciona soamente enlaces que son fillos directos dun elemento li, que a súa vez é fillo directo dunha lista desordenada que emprega a clase Lista.

Os enlaces contidos na sublista son excluídos xa que esta sublista non emprega a clase Lista.


Os selectores de atributos son tamén extremadamente potentes. Por exemplo poderíamos asignar un comportamento especial soamente ós hiperenlaces que apunten a direccións externas ó noso sitio web.

Vexamos o seguinte exemplo:

<source lang="html4strict">
<li><a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
</li>
</source>

O que fai que o hiperenlace sexa externo á nosa web según o exemplo é a presencia da cadea '''http://''' no atributo href.


'''Selectores de atributo:'''

<source lang="javascript">
$("[atributo]")
</source>

Isto é un selector básico por atributo. Seleccionará todos aqueles elementos que teñan como atributo o indicado. Por exemplo '''$('[href]')''' seleccionaría todos aqueles elementos que conteñan como atributo href.
<source lang="javascript">
$("[atributo=valor]")
</source>
Fará o mismo que o exemplo anterior, pero ademais que o atributo conteña o valor indicado como valor.

Poderíamos seleccionar enlaces que no seu atributo href comencen por: http:// co seguinte selector:

<source lang="css">
a[href^='http://']
</source>

Isto seleccionará tódolos enlaces cun href que comence exactamente por http://

O carácter ^ emprégase para indicar que a coincidencia ocurra ó comenzo. Éste carácter é empregado por moitas expresións regulares para especifica-la coincidencia ó principio da cadea candidata.


Temos outras formas de empregar selectores de atributos. 

Por exemplo para seleccionar nun formulario un elemento que teña un atributo específico podemos empregar:

<source lang="css">
form[method]
</source>


Para indicar un valor específico nun atributo poderíamos usar algo como:
<source lang="css">
input[type=text]
</source>
Este selector seleccionará todos os elementos input que teñan como atributo type=text.


Ata agora vimos como seleccionar un atributo con valores ó comezo:
<source lang="css">
 div[title^='gali']
</source>
Isto selecciona todos os div que teñan un atributo title que comence por "gali".


¿E que pasa se queremos seleccionar un "atributo que finalice" por algo en concreto?
<source lang="css">
a[href$='.pdf']
</source>
Isto seleccionará todos aqueles hiperenlaces que fagan referencia a un fichero PDF.

E aquí temos un selector que permite localizar elementos que teñan en calquera parte dos seus atributos un valor:
<source lang="css">
a[href*=jquery.com]
</source>
Este selector seleccionará todos os hiperenlaces que teñan no atributo href o texto "jquery.com".

Por riba dos atributos, a veces queremos seleccionar un elemento soamente si contén outro elemento. Por exemplo, na lista anterior, si queremos aplicar algún comportamento ós elementos da lista que conteñan enlaces; jQuery soporta esta clase de seleccion con selector container:
<source lang="css">
li:has(a)
</source>
Este selector selecciona todos os elementos dunha lista que conteñan un hiperenlace.

Hai que diferenciar que isto non é igual que li a ,que selecciona todos os enlaces que estan contidos dentro de elementos li
<source lang="css">
li a
</source>


'''Táboa de selectores básicos CSS soportados en jQuery:'''

<table border="1">
  <tr>
    <td width="96" align="center" bgcolor="#79ADEC"><strong>Selector</strong></td>
    <td width="971" align="center" bgcolor="#79ADEC"><strong>Descripción</strong></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>*</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa calqueira elemento.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa elementos coa etiqueta E.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E F</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa elementos coa etiqueta F que son fillos descendentes de E.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E &gt; F</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos F que son fillos directos de E.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E+F</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa calqueira elemento F que é inmediatamente precedido  polo seu irmán E.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E~F</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa calqueira elemento F precedido por calqueira irmán E.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E:has(F)</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos con marca E que teñen polo menos un descendente con marca F.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E.C</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos E que están empregando a clase C. Si se omite E poderíase escribir *.C</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E#I</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa o elemento E con id I. Omitindo E poderíase escribir *#I ou ben #I supoñendo claro está que non pode haber elementos con id's repetidas no documento.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E[A]</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos E que conteñen un atributo A e calqueira valor nese atributo.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E[A=V]</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos E con atributo A de valor igual a V.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E[A^=V]</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos E con atributo A de xeito que o valor comence por V.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E[A$=V]</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos E con atributo A de xeito que o  valor remate por  V.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>E[A*=V]</strong></div></td>
    <td align="center" valign="top"><div align="left">Atopa todos os elementos E con atributo A de xeito que o  valor conteña  V.</div></td>
  </tr>
</table>

== Selectores por posición ==

As veces necesitamos seleccionar elementos pola súa posición na páxina ou en relación a outros elementos. Por exemplo poderíamos necesitar seleccionar o primeiro enlace na páxina, ou calqueira outro párrafo, ou os derradeiros elemento de tódalas listas. jQuery soporta mecanismos para conseguir todas estas seleccións específicas. 

Por exemplo:
<source lang="css">
a:first
</source>
Seleccionará o primeiro hiperenlace da páxina.

E si queremos seleccionar calquer outro?
<source lang="css">
p:odd
</source>
Este selector selecciona todos os párrafos impares do documento.

Si queremos seleccionar todos os párrafos pares:
<source lang="css">
p:even
</source> 

Outra forma:
<source lang="css">
li:last-child
</source>
Escollerá o último fillo li referente a un elemento pai. No noso exemplo das listas escollerá o derradeiro elemento li das lista ul.


'''Ver a seguinte táboa de selectores posicionais avanzados:'''

<table border="1">
  <tr>
    <td width="148" align="center" bgcolor="#79ADEC"><strong>Selector</strong></td>
    <td width="835" align="center" bgcolor="#79ADEC"><strong>Descripcion</strong></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:first</strong></div></td>
    <td align="center" valign="top"><div align="left">O primeiro elemento atopado no documento. <em>li a:first</em> devolve o primeiro enlace que está contido nun elemento li.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:last</strong></div></td>
    <td align="center" valign="top"><div align="left">O derradeiro elemento atopado no documento.<em> li a:last</em> devolve o derradeiro enlace atopado dentro dun elemento li.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:first-child</strong></div></td>
    <td align="center" valign="top"><div align="left">O primeiro elemento fillo. Cando falamos de fillos estamos falando de grupos de irmáns (comparten o mesmo pai). Por exemplo <em>li:first-child</em> devolve o primeiro elemento de cada lista.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:last-child</strong></div></td>
    <td align="center" valign="top"><div align="left">O derradeiro elemento fillo. <em>li:last-child</em> devolverán o derradeiro elemento da lista.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:only-child</strong></div></td>
    <td align="center" valign="top"><div align="left">Devolve todos os elementos que non teñen irmáns, é dicir que son fillos únicos.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:nth-child(n)</strong></div></td>
    <td align="center" valign="top"><div align="left">O fillo número nth. Por exemplo <em>li:nth-child(2)</em> devolverá o segundo elemento de cada lista.  Con nth-child(n) todos os fillos son contados independientemente do que sexan, e o elemento específico é seleccionado sempre e cando coincida có selector enlazado coa pseudo-clase.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:nth-child(even |odd)</strong></div></td>
    <td align="center" valign="top"><div align="left">Fillos pares ou impares. <em>li:nth-child(even)</em> devolve os elementos pares de cada lista.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:nth-child(Xn+Y)</strong></div></td>
    <td align="center" valign="top"><div align="left">O fillo número nth calculado a partir da  fórmula proporcionada.Si Y é igual a 0, pode omitirse. <em>li:nth-child(3n)</em> devolve os elementos múltiplos de 3, mentras que <em>li:nth-child(5n+1)</em> devolve o elemento que ven cada grupos de 5 elementos.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:even e :odd</strong></div></td>
    <td align="center" valign="top"><div align="left">Elementos pares ou impares no documento. <em>li:even</em> devolverá cada elemento par das listas.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:eq(n)</strong></div></td>
    <td align="center" valign="top"><div align="left">Devolve o elemento con posición n. n ten como inicio de posición o 0. (Equivale a &quot;igual a&quot;). Con :eq(n) soamente o selector enlazado á pseudo-clase será tido en conta á hora de contar os elementos.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:gt(n)</strong></div></td>
    <td align="center" valign="top"><div align="left">Devolve os elementos con posición maior que n. (n ten como inicio de posición o 0, equivale a &quot;maior que&quot;)</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:lt(n)</strong></div></td>
    <td align="center" valign="top"><div align="left">Devolve os elementos con posición inferior a n. (Equivale a &quot;menor que&quot;)</div></td>
  </tr>
</table>


Vexamos o seguinte exemplo:

<source lang="html4strict">
<table id="languages">
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Invented</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Java</td>
      <td>Static</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>Ruby</td>
      <td>Dynamic</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>Smalltalk</td>
      <td>Dynamic</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>Static</td>
      <td>1983</td>
    </tr>
  </tbody>
</table>
</source>

Si queremos obter todo o que conteñan as celdas que teñen os nomes de linguaxes de programación, e como vemos que son as primeiras celdas nas filas podemos por como selector:
<source lang="html4strict">
table#languages tbody td:first-child  (é mais elegante esta sintaxe)

ou tamén poderíamos por:

table#languages tbody td:nth-child(1)
// Escollerá as primeiras celdas fillas (dun mesmo pai, neste caso o pai de cada grupo de fillas
// será o TR correspondente) contidas na marca tbody na táboa languages.
</source>

<source lang="html4strict">
Para obter as celdas que conteñen o tipo de linguaxe, cambiaremos o selector para:

:nth-child(2)

e para o ano no que se inventou, usaremos:

:nth-child(3) ou :last-child

Para obter a derradeira celda da táboa (a que conten o texto 1983), empregaremos: 

td:last

Ainda que td:eq(2) devolve a celda que contén o texto 1995, 
td:nth-child(2) devolverá tódalas celdas que teñen o tipo de linguaxe de programación.
</source>


''
'''<font color=green>Pensade que cando falamos de fillos xxx-child estamos facendo subconxuntos (elementos que teñen un pai común). É dicir que si por exemplo escribimos o selector "li:first-child", o que jQuery fai é buscar todos os li que teñamos no documento; fará subconxuntos entre eles tomando como referencia que teñan o mesmo pai,  e deses subconxuntos escollerá o primeiro fillo, que será o primeiro elemento de cada un dos subconxuntos.</font>'''''

{{Alerta|Nota|Recordar tamén que ''':eq''' ten como orixe '''0''', mentras que ''':nth-child''' ten como orixe '''1'''.}}

== Selectores avanzados en jQuery ==

Os selectores CSS dannos unha gran flexibilidade e potencia para buscar os elementos desexados no documento, pero ás veces queremos seleccionar elementos en base a características que a especificación CSS non soporta.

Por exemplo si quixéramos seleccionar todos os checkbox que foron clicados polo usuario. Si queremos face-la selección por atributo non nos servirá xa que ten en conta o atributo que ten na definición do documento, non ten en conta a acción do usuario. Polo tanto jQuery ofrécenos un selector específico, ''':checked''' que filtra os elementos ós que se lles fixo click.

Por exemplo:
<source lang="css">
input:checked
</source>
Seleccionará de tódolos elementos input soamente aqueles que foron chequeados polo usuario.

Isto poderíase combinar co resto, por exemplo:
<source lang="css">
   :radio:checked
e
   :checkbox:checked
</source>



'''A continuación unha táboa cos selectores avanzados ou selectores de filtro en jQuery:'''

<table border="1">
  <tr>
    <td width="164" align="center" bgcolor="#79ADEC"><strong>Selector</strong></td>
    <td width="819" align="center" bgcolor="#79ADEC"><strong>Descripcion</strong></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:animated</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos que están baixo o control dunha animación.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:button</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona calqueira botón. Equivaldría ó selector: &quot;input[type=submit],input[type=reset],input[type=button]&quot;.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:checkbox</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo checkbox (input[type=checkbox]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:checked</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo checkbox ou radio que estén chequeados (soportado por CSS).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:contains(texto)</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos que conteñan o texto pasado como parámetro. Non sirve para buscar contido HTML, soamente buscará texto que sexa visible no documento.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:disabled</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos que estén deshabilitados (soportado por CSS).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:enabled</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos que estén habilitados (soportado por CSS).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:file</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona todos os elementos de tipo file (input[type=file]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:header</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona soamente elementos que son cabeceiras; por exemplo &lt;h1&gt; ... &lt;h6&gt;</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:hidden</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona os elementos que están ocultos.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:image</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos input de tipo imaxen. (input[type=image])</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:input</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos do formulario (input, select, textarea, button).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:not(filtro)</strong></div></td>
    <td align="center" valign="top"><div align="left">Nega o filtro especificado.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:parent</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona soamente elementos que teñen fillos (incluindo texto), pero non elementos vacíos.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:password</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo password (input[type=password]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:radio</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo radio (input[type=radio]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:reset</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona botóns de tipo reset (input[type=reset] ou button[type=reset]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:selected</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos do desplegable que estén seleccionados.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:submit</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona botóns de tipo submit (button[type=submit] ou input[type=submit]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:text</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo texto (input[type=text]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:visible</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona os elementos que están visibles.</div></td>
  </tr>
</table>


Moitos dos selectores específicos en jQuery están relacionados cos formularios, permitíndonos especificar dun xeito moito máis elegante un tipo de elemento ou estado. Podemos combinar filtros de selección tamén. Por exemplo, si queremos seleccionar soamente os checkbox habilitados que nos que se fixo click para marcalos poderíamos usar:
<source lang="css">
   :checkbox:checked:enabled
</source>


'''Uso do filtro :not'''

Si queremos negar un filtro, por exemplo para seleccionar os elementos input que non sexan checkbox:
<source lang="css">
input:not(:checkbox)
</source>

É importante recoñecer a diferencia entre '''selectores de filtro''', os cais nos permiten detallar un conxunto de elementos aplicando criterios de selección (como os amosados anteriormente) e os selectores de búsqueda. Os '''selectores de búsqueda''' como o selector descendente ( espacio en blanco ), selector fillo ( > ), irmán ( + ) permítenos buscar elementos que teñen relación cós que xa están seleccionados.

Podemos aplicar o filtro :not ós selectores de filtro pero non ós de búsqueda. Por exemplo:
<source lang="html4strict">
div p:not(:hidden)  é un selector válido, pero
div:not(p:hidden)  non o é.
</source>

No primeiro caso, todos os elementos p descendentes dun div e que non estén ocultos, serán seleccionados.

O segundo selector está incorrecto xa que intenta aplicar un :not a un selector que non é un filtro (o p en p:hidden non é un filtro).

{{Alerta|Sobre os Selectores de Filtro|Para face-las cousas máis sinxelas, os selectores de filtro son identificados fácilmente por que todos comezan co caracter  ''':'''  ou un corchete '''[''' . Calquera outro selector non poderá ser usado con :not}}

[http://www.iessanclemente.net/recurso/labs/chapter2/lab.selectors.html Laboratorio de Proba de Selectores]

[http://docs.jquery.com/Selectors Máis información sobre selectores en jQuery.]


--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 13:50 26 ene 2015 (CET)