Noticias Programación

Solo jQuery La interfaz de usuario principal – Filtros

Página 1 de 4

Los filtros a menudo se confunden con los selectores, pero son bastante diferentes y cumplen el importante propósito de descubrir las cosas que un simple selector no puede.


Este es un extracto de mi libro. Solo jQuery La interfaz de usuario principal.


comprar en amazon

Comprender los selectores jQuery CSS básicos de jQuery
Extracto: Los múltiples selectores DOM
Extraer: los selectores básicos Los filtros de objetos jQuery *** NUEVO !!! Filtros cruzados Editar objetos DOM
Extraer: Edición del DOM Creación de objetos y edición de la jerarquía del DOM Trabajo con formularios de datos Función de código Animación de interfaz de usuario Interfaz de usuario de jQuery Complemento de control personalizado de jQuery Prueba de jQuery con QUnit Epilog Una función adicional

También disponible:

jquery2cover

comprar en amazon

Dominar el núcleo de jQuery es, en primer lugar, descubrir cómo encontrar elementos particulares y luego cambiarlos de alguna manera. La forma principal de encontrar artículos específicos es usar selectores, lo que a veces es difícil. Puede refinar un conjunto de resultados utilizando un filtro que conserva o elimina elementos de los resultados iniciales. Los filtros a menudo se confunden con los selectores, pero son bastante diferentes y cumplen el importante propósito de descubrir las cosas que un simple selector no puede.

filtros

Una vez que haya seleccionado una cantidad de elementos, a menudo es necesario procesarlos todos de alguna manera. En capítulos anteriores, la matriz de objetos DOM producidos por una selección se procesaba mediante la indexación y el reajuste de la matriz.

Por ejemplo, puede usar un bucle for para iterar a través de cada elemento de un conjunto de elementos seleccionado:

var resultado = $ (‘p’); para (var i = 0; i
$ (resultado[i].text (i.toString ());
}

En este caso, se añade un número diferente a cada uno de los párrafos.

Hay una forma un poco más elegante de manipular la matriz de resultados de jQuery. Puede aplicar filtros para restringir los elementos a los que se aplican las operaciones. Puede pensar en esto como un proceso de dos pasos para obtener la lista de elementos con los que realmente desea trabajar:



Aplique un selector para crear una matriz de resultados que consta de todos los elementos DOM coincidentes



Aplique un filtro a la matriz de resultados que seleccione el elemento para procesar



En general, hay dos formas de escribir un filtro, como parte del selector o como una operación separada.

Por ejemplo, puede seleccionar un elemento particular en la matriz usando:

.eq (yo)

o:

: ecuación (i)

La primera es una llamada de función estándar y la segunda es una cadena especial que se puede incluir en el selector. En ambos casos, i es el índice del elemento de matriz deseado y los índices negativos se consideran relativos al final de la matriz. Esto significa que eq (0) es el primer elemento y eq (-1) es el último.

Esto es:


Así por ejemplo:

$ («p»).eq (0) .append («

Hola

«);

primero selecciona todos los elementos del párrafo y devuelve una matriz de resultados, el método eq luego reduce esta matriz al primer elemento y crea una nueva matriz que contiene solo eso. Luego, el método de agregar agrega un nuevo párrafo solo a este elemento.

El comando:

$ («p: eq (0)»).append («

hola2

«);

hace exactamente lo mismo, pero en este caso en la primera llamada a jQuery, el selector en $ («p: eq (0)»), devuelve el arreglo ya reducido a un solo elemento.

Tenga en cuenta que ambos módulos son más fáciles de usar que usar un índice de matriz porque:

$ («p»)[0];

es un objeto DOM en lugar de una matriz de resultados de jQuery, pero:

$ («p»).eq (0);

Y

$ («p: ecuación (0)»);

son objetos de resultado de jQuery y no es necesario envolverlos nuevamente.

Método v Filtros de selección

La diferencia entre las dos formas de filtro depende completamente de dónde se apliquen. Puede usar .eq () para filtrar repetidamente una matriz de resultados, para obtener diferentes elementos cada vez, pero: eq devuelve un único resultado filtrado.

Es decir, para agregar una cadena a cada uno de los elementos de resultado, podría hacer algo como:

var resultado = $ (‘p’); para (var i = 0; i
resultado.eq (i) .texto (i.toString());
}

Aunque puede usar el formulario de selección, significaría tener que crear una cadena adecuada y realizar la consulta varias veces.

La regla es:



Use .eq (i), la forma de método de un filtro, si necesita procesar una matriz existente o procesar una matriz varias veces



Use: eq (i), el formulario de selección de filtro, si solo necesita aplicar el filtro una vez y nunca necesita el resultado completo sin filtrar.



Hay otra sutil diferencia entre las dos formas de filtro. Los filtros de selección se aplican antes de que la matriz esté completamente construida, es decir, en el momento en que se busca el DOM y, por lo tanto, pueden generar diferencias de rendimiento. Es decir, modifican los selectores de CSS estándar en lugar de filtrar la matriz.

Esto también significa que algunos filtros de selección pueden hacer cosas que los filtros de método no pueden, como veremos.

Ahora podría argumentarse que el módulo selector de un filtro no es en realidad un filtro como se definió anteriormente porque en realidad no filtra una matriz existente, sino que limita la matriz que se crea.

Si quiere pensar en los filtros selectores como cosas separadas, está bien porque en el nivel de implementación lo son, pero conceptualmente hacen el mismo tipo de trabajo. Es decir, puede imaginar: eq (i) trabajando construyendo la matriz de resultados y luego liberando todos los elementos excepto el i-ésimo elemento.

También puede gustarte...