jQuery / Propiedades del objeto jQuery

Bienvenidos sean a este post, hoy hablaremos mas sobre las propiedades del objeto jQuery.

Cuando pasamos una expresion a la funcion selector $() esta generalmente crea una instancia del objeto jQuery y dentro de este en general tenemos una estructura array la cual contiene todas las referencias a los elementos DOM que encontro el selector, pero hoy nos centraremos en las otras propiedades ocultas del objeto, algunas de estas propiedades incluyen a:

• context, una referencia al nodo DOM desde donde comienza la busqueda, usualmente es document
• selector, este es un registro de la expresion selectora que creo el objeto

Si bien existen muchas mas, estas dos son utilizadas por la funcion on para aplicar la delegacion de eventos, de los cuales hemos visto en los posts sobre eventos, a su vez podemos agregar que cuando un metodo transversal DOM es llamado este a su vez utilice uno tercero llamado prevObject el cual mantiene una referencia al objeto jQuery que el metodo transversal invoco, para entender este concepto vamos a necesitar el ejemplo que creamos en el post anterior, en caso de no disponerlo les dejo un link para descargarlo:

Simplemente extraigan todos los archivos en un directorio, con esto realizado vamos a pasar en el ejemplo, para ello lo primero que haremos es ir al archivo lista.html, aqui modificaremos el siguiente segmento de codigo:

<tr>
	<td>Berenjena</td>
	<td>25</td>
	<td>2</td>
	<td>Verduleria</td>
</tr>

De la siguiente manera:

<tr>
	<td id="producto">Berenjena</td>
	<td>25</td>
	<td>2</td>
	<td>Verduleria</td>
</tr>

Nuestro siguiente paso sera ir al archivo codigo.js y le agregaremos el siguiente bloque de codigo:

$(document).ready(function() {
	var $celda=$('#producto');
	$celda.addClass('resaltar');
	console.log($celda.context);
	console.log($celda.selector);
	console.log($celda.prevObject);
});

Aqui seleccionaremos la celda que identificamos anteriormente, lo siguiente sera aplicar una clase llamada resaltar que ya agregamos al momento de crear el archivo css, despues mostraremos en el log de la consola tres propiedades, veamos como quedo nuestra pagina

En la consola veremos los siguientes valores:

Propiedad	Valor
context	doccument
selector	#producto
prevObject	undefined

Pero tengan en cuenta que las dos primeras propiedades fueron deshechadas a partir de la version 3.0, si lo ejecutan todos los valores devueltos seran uudefined, pero igualmente vamos a tomar el codigo anterior y modificarlo de la siguiente manera:

$(document).ready(function() {
	var $celda=$('#producto').nextAll();
	$celda.addClass('resaltar');
	console.log($celda.context);
	console.log($celda.selector);
	console.log($celda.prevObject);
});

En este caso solo aplicamos una pequeña modificacion al objeto que contiene nuestra celda identificada, le aplicamos el metodo nextAll, este procedera a moverse a los siguientes elementos, en este caso celdas, despues aplicaremos la clase y volveremos a trabajar en el log, la pagina se vera de la siguiente manera

Observen ccomo ahora se aplico la clase a los elementos posteriores al seleccionado, y si observamos el log tendremos la siguiente informacion:

Los dos primeros siguen como undefined porque ya no existen pero el ultimo ahora tiene otro dato porque existio un objeto previo generado por el llamado a nextAll, volvamos a modificar el codigo anterior de la siguiente manera:

$(document).ready(function() {
	var $celda = $('#producto').nextAll().addBack();
	$celda.addClass('resaltar');
	
	console.log($celda.context);
	console.log($celda.selector);
	console.log($celda.prevObject);
});

En este caso solo agregamos el metodo addBack para que se desplace al elemento anterior al seleccionado y apliqque la clase a los elementos siguientes al seleccionado pero tambien al original porque volvio gracias al addBack, si lo probamos se vera de la siguiente forma

Y si vamos al log se vera de la siguiente forma:

Observen como vario ahora nuestra propiedad prevObject dado que al utilizar a addBack hicimos otras modificaciones, pero porque nos aplico la clase en todo y no quedo solamente con el ultimo llamado? bueno esto se debe al uso de los encadenamientos en un objeto, este procedimiento crea un stack donde almacena una estructura con todos los metodos que encadenemos, como hicimos en este caso donde pudimos pintar todos los elementos, pero este tipo de stack es util para cuando necesitamos aplicar metodos transversales en un objeto pero de esto ahondaremos mas adelante, antes de finalizar les dejo los archivos para el proyecto y los codigos finales en este post:

En resumen, hoy hemos visto propiedades del objeto jQuery, si bien las mencionadas en este post ya no se encuentran en la libreria, selector y content, la otra como es prevObject si y vimos los posibles valores que puede devolver dependiendo lo que efectuemos en la pagina, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.