A continuación se muestran determinadas técnicas comunes para la selección de fundamentos
Selección de fundamentos en fundamento a su ID
$('#myId') // notar que los IDs deben ser únicos por página
Selección de fundamentos en fundamento al nombre de clase
$('div.myClass') // si se especifica el tipo de fundamento
// se mejora el rendimiento de la selección
Selección de fundamentos por su atributo
$('input[name=first_name]') // tenga cuidado que puede ser muy lento
Selección de fundamentos en manera de selector CSS
$('#contents ul.people li')
Pseudo-selectores
$('a.externalfirst') // selecciona el primer fundamento a
// con la clase 'external'
$('trodd') // selecciona todos los fundamentos tr
// impares de una tabla
$('#myForm input') // selecciona todos los fundamentos del tipo input
// dentro del formulario #myForm
$('divvisible') // selecciona todos los divs visibles
$('divgt(2)') // selecciona todos los divs excepto los tres primeros
$('divanimated') // selecciona todos los divs actualmente animados
Nota
Cuando se emplean los pseudo-selectores visible y hidden jQuery comprueba la visibilidad actual del fundamento pero no si éste posee asignados los estilos CSS visibility o display — en otras palabras verifica si el alto y ancho físico del fundamento es mayor a cero. Sin embargo esta comprobación no funciona con los fundamentos tr en este caso jQuery comprueba si se está aplicando el estilo display y va a analizar al fundamento como oculto si posee asignado el valor none. Además los fundamentos que aún no fueron añadidos al DOM serán tratados como ocultos inclusive si tienen aplicados estilos indicando que deben ser visibles (En la sección Manipulación de este manual se explica como crear y agregar fundamentos al DOM).
Como referencia este es el pedazo de código que emplea jQuery para decidir cuando un fundamento es visible o no. Se incorporaron los comentarios para que quede más diáfano su entendimiento
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth height = elem.offsetHeight
skip = elem.nodeName.toLowerCase() === tr
// ¿el fundamento posee alto 0 ancho 0 y no es un tr?
return width === 0 && height === 0 && !skip ?
// entonces debe estar oculto (hidden)
true
// pero si posee ancho y alto
// y no es un tr
width 0 && height 0 && !skip ?
// entonces debe estar visible
false
// si nos encontramos aquí es porque el fundamento posee ancho
// y alto pero además es un tr
// entonces se verifica el valor del estilo display
// aplicado a través de CSS
// para determinar si está oculto o no
jQuery.curCSS(elem display) === none
}
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem )
}
Elección de Selectores
La elección de buenos selectores es un punto significativo cuando se quiere mejorar el rendimiento del código. Una pequeña especificidad — por ejemplo incluir el tipo de fundamento (como div) cuando se realiza una selección por el nombre de clase — puede ayudar bastante. Por eso es recomendable darle determinadas "pistas" a jQuery sobre en que espacio del documento puede descubrir lo que quiere seleccionar. Por otro lado demasiada especificidad puede ser perjudicial. Un selector como #miTabla thead tr th.especial es un sobrante lo mejor sería utilizar #miTabla th.especial.
jQuery proporciona muchos selectores basados en atributos que facultan hacer selecciones basadas en el contenido de los atributos utilizando simplificaciones de expresiones regulares.
// descubrir todos los a cuyo atributo rel terminan en thinger
$(a[rel$='thinger'])
Estos tipos de selectores pueden resultar útiles pero también ser muy lentos. Cuando sea probable es recomendable hacer la selección utilizando IDs nombres de clases y nombres de etiquetas.
Si quiere conocer más sobre este tema Paul Irish realizó una gran presentación sobre mejoras de rendimiento en JavaScript (en ingles) la cual posee algúnas diapositivas centradas en selectores.
