John Resig el creador de jQuery y su equipo desarrollaron un motor de selector CSS como una extensión del proyecto original, en la versión 1.3 Sizzle quedo disponible para descarga.
Es un proyecto independiente de jQuery que permite que los desarrolladores de otras bibliotecas puedan unirse para tomar las ventajas de sus opciones avanzadas, su facilidad de uso e implementación, soporta selectores CSS3 con Unicode y expresiones regulares.
Características.
- Independiente.
- Rendimiento competitivo para los selectores de uso más frecuente.
- Peso de 4kb.
- Extensible y fácil uso de la API.
- Diseñado para un rendimiento óptimo con la delegación de eventos.
Instalación y Fundamentos de Sizzle
Tenemos que visitar la página http://sizzlejs.com/ donde encontraremos documentación oficial, código fuente en github, discusión y demostración de esta librería. Debemos de hacer referencia de este archivo en nuestro documento HTML dentro de nuestras etiqueta dentro de una etiqueta , con esto ya podemos comenzar a utilizarlo sin problemas.
Podemos comenzar a utilizar Sizzle sin necesidad de comprender el tema de expresiones regulares o como funciona la API. Solo será necesario si queremos realizar nuestros propios plugins, esta librería es importante si quieres trabajar solamente con selectores de CSS, puede ser una excelente opción para facilitar nuestras funciones.
Sintaxis y Ejemplos
La sintaxis en jQuery es algo como esto:
|
1 |
Query (String selector, DOMElement|DOMDocument context) |
Si se estuviera utilizando Sizzle la sentencia sería algo así
|
1 |
Sizzle (String selector, DOMElement|DOMDocument context, Array results) |
Alternativamente se puede llamar a Sizzle pasando por un array y el resultado anexarse a una matriz.
|
1 |
Sizzle.matches (String selector, Array set) |
A continuación algunos ejemplos con funciones comunes en Sizzle.
Selecciona los elementos li que son terceros hijos sujetos a su lista
|
1 |
Sizzle (‘li:nth-child(3)’) |
Selecciona todo elemento impar dentro de una lista (incluso funciona de la misma manera)
|
1 |
Sizzle (‘li:nth-child(odd)’) |
Selecciona cada tercer elemento li
|
1 |
Sizzle (‘li:nth-child(3n)’) |
Selecciona el elemento después del tercer elemento li
|
1 |
Sizzle(‘li:nth-child(3n+1?) |
Selecciona todos los elementos de opción no seleccionados
|
1 |
Sizzle (‘:option:not(:selected)’) |
Conclusión
Sizzle es una herramienta de selección de CSS que nos ayuda a llegar a pseudo clases en nuestra hoja de estilos que es difícil solo con jQuery, esta opción hace que nuestras funciones sean mucho más fáciles. Te recomendamos utilizarla de acuerdo a las necesidades de tu proyecto, así podrás hacer que tu website sea dinámico de manera simple. Si quieren dominar este y otros temas Los invitamos a conocer acerca de nuestros cursos de jQuery y JavaScript.