jQuery

jQuery

jQuery es una libreria Javascript para manejo rapido de HTML y DOM. Proporciona interfaces de acceso a las propiedades de elementos HTML y funciones de conveniencia para manejar grandes colecciones.

$

Una vez que se incluye jQuery en los scripts de una pagina HTML pueden usarse todos los metodos de jQuery. La libreria principal esta representada por $.

Objeto jQuery

Todos los valores pueden convertirse en un Objeto jQuery. Esto es, a partir del momento en que se usa $(variable/valor) esta llamada devolvera un objeto extendido (array), el cual tiene todas las extensiones de jQuery.

<h1>Titulo 1</h1>

<script>
$('h1').text();
//muestra: "Titulo 1"
</script>

Cuando se llama a un elemento HTML a traves de jQuery, este es convertido automaticamente en un objeto jQuery, y a partir de esa conversion se aplican los metodos.

Los metodos selectores de jQuery (aquellos que refieren a un elemento HTML) funcionan de 2 maneras: traer datos (get) o asignar datos (set).

<h1>Titulo 1</h1>
<script>
//get
$('h1').css('color');
//devuelve el color asignado al texto

$('h1').css('color','#F00');
//asigna color rojo al estilo del elemento

Si una conversion devolviera mas de un objeto, los metodos de jQuery en modo get devolveran el valor requerido del primer miembro del array. En modo set asignaran el valor especificado a todos los miembros del array:

<h1>Titulo 1</h1>
<h1>Titulo 3</h1>
<h1>Titulo 2</h1>
<script>
$('h1').text();
//devuelve "Titulo 1"

$('h1').text("Hola");
//todos los H1 tendran como texto "Hola"
</script>

Un objeto jQuery devuelve, salvo excepciones, el mismo objeto jQuery. Dado esto, las llamadas pueden encadenarse

<h1>Titulo 1</h1>
<script>
$('h1').text("Nuevo titulo");
$('h1').css('color','#F00');
$('h1').append(' rojo');
//es lo mismo que:
$('h1').text("Nuevo titulo")
  .css('color','#F00')
  .append(' rojo');
//y lo mismo que:
$('h1').text("Nuevo titulo").css('color','#F00').append(' rojo');
</script>

jQuery Core: $.each()

La funcion each funciona de varias maneras (como todo en jQuery) pero el resultado es siempre el mismo: iterar a traves de un objeto/array y sus miembros con una funcion dada.

Cuando se aplique a un array la funcion recibe el indice del array como primer parametro y el valor de ese indice como segundo:

var a = [2,4,6];
$.each(a, function(index, value) {
  console.log(index + " : " + value);
});
//muestra:
//0 : 2
//1 : 4
//2 : 6

Cuando se aplica a un objeto el concepto es el mismo, la funcion recibira el key y el valor de ese key

var a = {nombre: "Juan", apellido: "Gomez", edad: 20};
$.each(a, function(key, value) {
  console.log(index + " : " + value);
});
//muestra:
//nombre : Juan
//apellido : Gomez
//edad : 20

Each es una funcion de conveniencia, siempre se puede expresar como un bloque for:

var a = {nombre: "Juan", apellido: "Gomez", edad: 20};
for(key in a){
  console.log("a." + key + " : " + a[key]);
}
//muestra:
//a.nombre : Juan
//a.apellido : Gomez
//a.edad : 20

Como vimos que un selector de jQuery devuelve un objeto jQuery, el cual es un array con extensiones, podemos iterar directamente sobre un resultado de seleccion de esta manera, donde each ejecuta una funcion que recibe, ordenadamente, los elementos encontrados en la seleccion.

Es importante el contexto de la funcion. El contexto en una funcion es el valor que recibe this. En estos casos, el contexto de la funcion es el elemento HTML que se esta iterando.

<h1>Titulo</h1>
<h1>Titulo</h1>
<h1>Titulo</h1>
<script>
var titulos = $('h1');
//[<h1>Titulo</h1>, <h1>Titulo</h1>, <h1>Titulo</h1>]

titulos.each(function(i){
  //this sera, en cada iteracion, el elemento HTML
  //lo encerramos en $() para poder usar funcionalidad de jQuery
  $(this).append( " " + (i + 1) )
  //y adosamos un espacio y el valor de la iteracion + 1
  //(las iteraciones comienzan en 0)
});
//luego el HTML se vera:
<h1>Titulo 1</h1>
<h1>Titulo 2</h1>
<h1>Titulo 3</h1>

Conclusion

jQuery sirve para manipular HTML/DOM de maneras individuales o masivas. Aprendiendo sus metodos podran ver como asignar, reordenar, crear contenido nuevo o eliminar contenido de manera eficaz y rapida. Lo mismo se aplica a eventos. Un caso simple para cerrar:

$('a').on('click', function(evt) {
  //hacer que el evento no cumpla su funcion
  evt.preventDefault();

  //hacer que el evento no se propague a otros
  evt.stopPropagation();

  //informar
  alert('Los vinculos fueron desactivados');
});