jQuery / Revisitamos a selector

Bienvenidos sean a este post, hoy repasaremos como usar una de las caracteristicas mas importantes de selector.

Una de las caracteristicas mas importantes que nos brindaba selector es la capacidad de poder agregar mas elementos HTML de forma dinamica y simple, lo cual nos permite trabajar de forma mas directa con los valores que manipulemos en nuestros codigos,, pero para poder entenderlo mejor no vamos a trabajar con los codigos anteriores sino con uno nuevo pero que sera una variante de los vistos anteriormente, para ello primero descarguen el siguiente archivo:

Extraigan el contenido en un nuevo directorio, este contendra una serie de imagenes, una pagina HTML y un archivo con el CSS, si abren la pagina se debe ver de la siguiente manera

Ahora tenemos una pagina con dos tablas y distintos datos pero esto es solo anecdotico, nuestro primer paso sera crear un nuevo archivo con el nombre de codigo.js y le agregaremos este codigo:

codigo.js

$(document).ready(function() {
	$('table').each(function(indice) {
		var $tabla = $(this);
		$('<h3></h3>', {
			id: 'tabla-titulo-' + indice,
			'class': 'tabla-titulo',
			text: 'Tabla ' + (indice + 1),
			data: {'indice': indice},
			click: function(e) {
				e.preventDefault();
				$tabla.fadeToggle();
			},
			css: {colorBrillante: '#00ff00'}
		}).insertBefore($tabla);
	});
});

En este caso primero seleccionaremos a todos los elementos de tipo table y por medio de each pasaremos por todos los seleccionados, lo primero que haremos sera definir un objeto con la tabla actual, despues con selector estableceremos un elemento h3, y despues le agregaremos la siguientes propiedades:

• id, sera el identificador que le asignaremos
• class, sera para asignarle una clase, en este caso inexistente
• text, sera el texto que estara dentro del elemento en el selector
• data, sera un dato para almacenar el indice a este elemento
• click, este sera para mostrar o esconder el contenido de cada tabla
• css, sera para aplicar un estilo pero que usaremos mas adelante

Y por ultimo lo insertaremos delante de cada tabla, si lo probamos funcionara de la siguiente forrma

Ya tenemos una pagina que nos permite ocultar las tablas mediante un elemento que agregamos por el selector, ahora vamos a darle un poco de estilo y para ello agregaremos el siguiente segmento de codigo en codigo.js:

(function($) {
	var div=document.createElement('div');
	$.support.textShadow = div.style.textShadow === '';
	$.support.filter = div.style.filter === '';
	div = null;
	if ($.support.textShadow) {
		$.cssHooks.colorBrillante = {
			set: function(elem, valor) {
				if (valor == 'none') {
					elem.style.textShadow = '';
				} else {
					elem.style.textShadow='0 0 2px' + valor;
				}	
			}
		};
	} else {
		$.cssHooks.colorBrillante = {
			set: function(elem, valor) {
				if (value == 'none') {
					elem.style.filter='';
				} else {
					elem.style.zoom = 1;
					elem.style.filter =
					'progid:DXImageTransform.Microsoft' +
					'.Glow(Strength=2, Color='+ valor + ');';
				}
			}
		};
	}
})(jQuery);

Primero definiremos un objeto donde contendra un div, el cual creamos por medio de createElement, despues definiremos dos objetos de tipo support, el primero sera para la sombra de texto y el segundo para filtro, en ambos verificaremos que en el div creado anteriormente ambos esten vacios pero para ello usamos un operador de igualdad pero mas completo porque este tambien verifica que el tipo de dato sea el mismo, despues de creados y definidos le pasamos el valor null al div creado, lo siguiente es un condicional donde verificamos si la propiedad textShadow existe, en caso de ser verdadero utiliza al metodo cssHooks para manejar la opacidad del elemento, en este caso usamos al css que definimos en el codigo anterior, en este estableceremos la propiedad set para asignarle un condicional donde chequearemos si valor es igual none, en caso de ser verdadero establece a textShadow con ninguno valor de lo contrario le establecera un valor para los parametros y el color que se encuentra en valor, en caso de que el navegador no soporte a text-shadow pasamos a usar a filter, este es propiedad de Microsoft pero es soportado por navegadores viejos o especificos, en este caso la estructura es muy similar pero utiliza esta propiedad y a la hora de aplicarlo utiliza los elementos que se ven para aplicar un efecto similar, con esto comentado veamos como quedo nuestra pagina

Como pueden ver aplicamos un efecto mediante un hook de css a uno que existia en nuestro codigo, pero que es esto? bueno, es un tema que tocaremos a continuacion.

Muchos metodos de jQuery encargados de establecer y obtener (get y set) propiedades se pueden extender para casos especiales mediante la definicion apropiadas de ganchos (hooks), dichos «hooks» son arrays en el namespace de jQuery, por ejemplo en el codigo anterior aplicamos uno:

$.cssHooks.colorBrillante = ...

Por lo general los hooks son objetos que contienen un get para recuperar el valor soliticado y un metodo set para establecer un nuevo valor, hablemos sobre los tipos de hook incluidos:

Tipo de Hook	Metodo afectado	Ejemplo de uso
$.attrHooks	.attr()	Evita que el atributo type de un elemento sea cambiado
$.cssHooks	.css()	Provee un manejo especial de la opacidad en navegadores
$.propHooks	.prop()	Corrige la conducta de la propiedad selected en Safari
$.valHooks	.val()	Permite a los radio, botones y checkboxes pasar valores entre navegadores..

Habitualmente el trabajo realizado por estos hooks esta completamente ocultas para nosotros, y podemos recibir muchos beneficios sin saber que esta sucediendo, pero algunas veces puede que necesitemos extenderlo para nuestro beneficio como vimos en el codigo anterior, antes de finalizar les dejo un archivo con los codigos finales de este post:

En resumen, hoy hemos visto como seguir manipulando los atributos mediante selector, primero para agregar nuevos elementos a los existentes y luego hablamos de los hooks para extender una propiedad sobre los elementos de la pagina, espero les haya resultado 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.