[Parte 7]jQuery

jQuery - Manipulacion del DOM

jQuery proporciona metodos para manipular el DOM de forma eficiente. No es necesario escribir gran codigo para modificar el valor del atributo de cualquier elemento o para extraer el codigo HTML de un parrafo o div.

jQuery proporciona metodos tales como .attr(), .html() y .val() que actuan como getters (captadores) recuperan informacion de los elementos DOM para su uso posterior. 

Manipulacion de contenido

El metodo html() obtiene el contenido html (innerHTML) del primer elemento que coincida. Esta es la sintaxis del metodo:

selector.html()

Ejemplo:

El siguiente es un ejemplo que hace uso de los metodos .html() y .text(val). Aqui html() recupera el contenido HTML del objeto y luego .text(val) fija el valor del objeto con el parametro pasado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            var content = $(this).html();
            $("#result").text( content );
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>

Reemplazando elementos del DOM

Usted puede reemplazar un elemento del DOM o varios elementos del DOM completamente con el HTML especificado. El metodo replaceWith(content) sirve para este proposito muy bien. Aqui esta la sintaxis del metodo:

selector.replaceWith(content)  

En lugar de content usted utilizara lo que realmente quiere reemplazar en los elementos originales. Esto podria ser HTML o texto simple. 

Ejemplo

A continuacion se presentara un ejemplo que reemplazara el elemento division con <h1>jQuery es genial!</h1>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).replaceWith("<h1>jQuery es genial!</h1>");
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>

Eliminando elementos del DOM

Puede haber una situacion en la que le gustaria eliminar uno o mas elementos del DOM desde el documento. jQuery proporciona dos metodos para manejar esta situacion. 
El metodo empty() elimina todos los nodos secundarios del conjunto de elementos coincidentes donde el metodo remove(expr) elimina todos los elementos coincidentes del DOM. Aqui esta la sintaxis de los metodos:

selector.remove([expr])

selector.empty()

Puede pasar un parametro opcional expr para filtrar el conjunto de elementos que desea eliminar.

Ejemplo

A continuacion se presenta un ejemplo donde se estaran eliminando los elementos tan pronto como se le hagan clic sobre ellos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).remove();
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>

Insertando elementos en el DOM

Puede haber una situacion en la que le gustaria insertar nuevos elementos ya sea uno o varios en su documento. jQuery proporciona varios metodos para insertar elementos en varios lugares. 
El metodo after(content) inserta contenido despues de cada uno de los elementos coincidentes, el metodo before(content) inserta contenido antes de cada uno de los elementos coincidentes. La siguiente es la sintaxis del metodo:

selector.after(content)

selector.before(content)

El contenido a insertar podria ser HTML o texto simple.

Ejemplo

A continuacion se presenta un ejemplo en el <div> los elementos se insertan justo antes del elemento que le des clic.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).before('<div class="div"></div>');
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>

Metodos de manipulacion del DOM

La siguiente tabla enumera una lista de metodos que se puede utilizar para manipular los elementos del DOM.

+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| Metodo                 | Descripcion                                                                                                                          |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| after(content)         | insertar contenido despues de cada uno de los elementos coincidentes.                                                                |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| append(content)        | Agrega contenido en el interior de cada elemento coincidente.                                                                        |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| appendTo(selector)     | Agrega todos los elementos coincidentes a otro, especificado, conjunto de elementos.                                                 |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| before(content)        | inserta el contenido antes de cada uno de los elementos coincidentes.                                                                |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone(bool)            | Clonar elementos DOM coincidentes, y todos sus controladores de eventos, y seleccionar los clones.                                   |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone()                | Clona los elementos DOM coincidentes y selecciona sus clones.                                                                        |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| empty()                | Quita todos los elementos secundarios del conjunto de elementos que coincidan.                                                       |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html(val)              | Establece el contenido html de cada elemento coincidente.                                                                            |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html()                 | Obtener el contenido html (innerHTML) del primer elemento coincidente.                                                               |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertAfter(selector)  | Inserta todos los elementos coincidentes despues de otros, especificados, conjunto de elementos.                                     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertBefore(selector) | Inserta todos los elementos coincidentes antes de otros, especificados, conjunto de elementos.                                       |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prepend(content)       | Antepone el contenido en el interior de cada elemento coincidente.                                                                   |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prependTo(content)     | Anteponer todos los elementos coincidentes a otro, conjunto de elementos.                                                            |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| remove(expr)           | Elimina todos los elementos coincidentes del DOM.                                                                                    |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceAll(selector)   | Reemplaza todos los elementos coincidentes por el selector especificado con los elementos coincidentes.                              |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceWith(content)   | Reemplaza todos los elementos coincidentes con el HTML especificado o elementos del DOM.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text(val)              | Establece el contenido de texto de todos los elementos coincidentes.                                                                 |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text()                 | Obtener el contenido de texto combinado de todos los elementos coincidentes.                                                         |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(elem)             | Envuelve cada elemento coincidente con el elemento especificado.                                                                     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(html)             | Envuelve cada elemento coincidente con el contenido HTML especificado.                                                               |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(elem)          | Envuelve todos los elementos en el conjunto combinado en un unico elemento de envoltura.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(html)          | Envuelve todos los elementos en el conjutno combinado en un unico elemento de envoltura.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(elem)        | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con un elemento DOM.     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(html)        | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con una estructura HTML. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+

Fuente: http://www.tutorialspoint.com

[Parte 5]jQuery

jQuery - desplazandose en el DOM

jQuery es una herramienta de muy gran alcance la cual proporciona una gran variedad de metodos para desplazarse en el DOM para ayudarnos a seleccionar elementos del documento al azar asi como en metodo secuencial. La mayor parte de los metodos de desplazamiento del DOM no modifican el objeto jQuery y ellos se utilizan para filtrar los elementos a partir de un documento basado en condiciones dadas.

Buscando elementos por indice

Considere la posibilidad de un simple documento con el siguiente contenido HTML:

<html>
<head>
   <title>Titulo</title>
</head>
<body>
    <div>
      <li>Elemento de la lista 1</li>
      <li>Elemento de la lista 2</li>
      <li>Elemento de la lista 3</li>
      <li>Elemento de la lista 4</li>
      <li>Elemento de la lista 5</li>
      <li>Elemento de la lista 6</li>
    </div>
</body>
</html>


* Cada lista tiene su propio indice y se puede localizar utilizando directamente el metodo eq(indice) del siguiente ejemplo. Cada elemento hijo comienza su indice desde 0, por lo tanto la lista del elemento 2 se accede mediante el uso de $("li").eq(1) y asi sucesivamente. Ejemplo: 
A continuacion se presenta un ejemplo sencillo que añade color al tercer elemento de la lista:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").eq(2).addClass("seleccionado");
         });
   </script>
   <style type="text/css">
      .seleccionado { color: red; }
   </style>
</head>
<body>
   <div>
      <li>Elemento de la lista 1</li>
      <li>Elemento de la lista 2</li>
      <li>Elemento de la lista 3</li>
      <li>Elemento de la lista 4</li>
      <li>Elemento de la lista 5</li>
      <li>Elemento de la lista 6</li>
   </div>
</body>
</html>

Filtrado de elementos

El metodo filter(selector) se puede utilizar para filtrar todos los elementos del conjunto que coincidan con el selector especificado. El selector puede ser escrito utilizando cualquier sintaxis del selector. Ejemplo:
A continuacion se presenta un ejemplo sencillo que aplica color a las listas con la clase .media:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").filter(".media").addClass("seleccionado");
         });
   </script>
   <style type="text/css">
      .seleccionado { color: red; }
   </style>
</head>
<body>
   <div>
      <li class="arriba">Elemento de la lista 1</li>
      <li class="arriba">Elemento de la lista 2</li>
      <li class="media">Elemento de la lista 3</li>
      <li class="media">Elemento de la lista 4</li>
      <li class="abajo">Elemento de la lista 5</li>
      <li class="abajo">Elemento de la lista 6</li>
   </div>
</body>
</html>

Localizacion de elementos descendientes

El metodo find(selector) se puede utilizar para localizar todos los elementos descendientes de un tipo en particular de elementos. El selector puede ser escrito utilizando cualquier sintaxis de selector. Ejemplo:
A continuacion se presenta un ejemplo que selecciona todos los elementos <span> disponibles dentro de los diferentes elementos <p>:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("p").find("span").addClass("seleccionado");
         });
   </script>
   <style type="text/css">
      .seleccionado { color: red; }
   </style>
</head>
<body>
   <div>
      <p>Este es el 1er parrafo y <span>ESTO ES ROJO</span></p>
      <p>Este es el 2do parrafo y <span>ESTO TAMBIEN ES ROJO</span></p>
   </div>
</body>
</html>

jQuery metodos de desplazamiento

La siguiente tabla enumera abajo metodos utiles que se pueden utilizar para filtrar los diversos elementos de una lista de elementos DOM:

+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Selector             | Descripcion                                                                                                                                                                                                                                                                         |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| add(Selector)        | Añade mas elementos, que coincidan con el selector dado, al conjunto de elementos que ya coinciden. Ejemplo: $(".top").add(".middle").addClass("selected");                                                                                                                         |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| andSelf()            | Añade la seleccion anterior a la seleccion actual. Ejemplo: $("div").find("p").andSelf().addClass("border");                                                                                                                                                                        |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| children([selector]) | Obtener un conjunto de elementos que contengan todos los hijos inmediatos de cada uno del conjunto de elementos que coincidan.  Ejemplo: $("div").children(".selected").addClass("blue");                                                                                           |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| closest(selector)    | Obtiene un conjunto de elementos que contengan todos los hijos inmediatos unicos de cada uno de los elementos que coincidan en el conjunto. Ejemplo: $( document ).on( "click", function( event ) {,$( event.target ).closest( "li" ).toggleClass( "hilight" );});                  |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| contents()           | Busca todos los nodos secundarios dentro de los elementos coincidentes (incluyendo los nodos de texto), o el documento contenido, si el elemento es un iframe.Ejemplo: $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );                               |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| end()                | Revertir la mas reciente 'destructiva' operacion, cambiando el conjunto de elementos coincidentes a su estado anterior.  Ejemplo: $("p").find("span").css("border", "2px red solid");                                                                                               |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| find(selector)       | Busca los elementos descendientes que coinciden con los selectores especificados.  Ejemplo: $("p").find("span").addClass("selected");                                                                                                                                               |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| next([selector])     | Obtener un conjunto de elementos que contienen los unicos proximos hermanos de cada uno del conjunto de los elementos dados. Ejemplo: $("p").next(".selected").addClass("hilight");                                                                                                 |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| nextAll([selector])  | Encuentra todos los elementos hermanos despues del elemento actual. Ejemplo: $("div:first").nextAll().addClass("hilight");                                                                                                                                                          |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| offsetParent()       | Devuelve una coleccion jQuery con el padre posicionado de primer elemento coincidente. Ejemplo: $("p").offsetParent().addClass('hilight');                                                                                                                                          |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| parent([selector])   | Obtiene el padre directo de un elemento. Si se llama a un conjunto de elementos, el padre retorna un conjunto de elementos unicos directo al elemento padre.  Ejemplo: $("p").parent().addClass('hilight');                                                                         |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| parents([selector])  | Obtiene un conjunto de elementos que contiene los antepasados unicos del conjunto combinado de elementos (excepto por el elemento raiz). Ejemplo: var parentEls = $("p").parents(),.map(function () {,return this.tagName;,}).get().join(", ");,$("b").append("" + parentEls + ""); |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| prev([selector])     | Obtiene un conjunto de elementos que contiene los hermanos anteriores unicos de cada conjunto de elementos que coinciden.Ejemplo:,$("p").prev(".selected").addClass("hilight");                                                                                                     |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| prevAll([selector])  | Encuentra todos los elementos hermanos delante del elemento actual.,Ejemplo: $("div:last").prevAll().addClass("hilight");                                                                                                                                                           |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| siblings([selector]) | Obtener un conjunto de elementos que contengan todos los hermanos unicos de cada uno de un conjunto de elementos que coinciden.                                                                                                                                                     |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ 

Hasta aqui esta parte. Si quieren entender mas de los ejemplos de la tabla anterior les recomiendo pasarse por la documentacion oficial de jQuery.

Esta parte ha sido traducida de TutorialsPoint.
 
 
 
 

[Parte 2]jQuery

jQuery - Conceptos basicos

jQuery es un framework construido utilizando las capacidades de javascript. Asi que usted puede utilizar todas las funciones y otras capacidades disponibles en javascript. 

Cadena

Una cadena en javascript es un objeto inmutable que contiene ninguno, o varios caracteres. Los siguientes son ejemplos validos de una cadena de javascript:

"Esto es una cadena Javascript"
'Esto es una cadena Javascript'
'Esto es "realmente" una cadena Javascript'
"Esto es 'realmente' una cadena Javascript"

Numeros

Los numeros en javascript son de formato IEEE 754 de doble precision de 64 bits. Ellos son inmutables al igual que las cadenas. Los siguientes son ejemplos validos de numeros en javascript:

5350
120.27
0.26

Booleanos

Un booleano en javascript puede ser falso o verdadero. Si un numero es cero, el valor predeterminado es falso. Los siguientes son ejemplos validos en booleano de javascript:

true // verdadero
false //  falso
0 // falso
1 // verdadero
"" // falso
"hola"  // verdadero
 
Objetos

Javascript soporta el concepto de objetos muy bien. Puede crear un objeto usando literalmente object de la siguiente manera:

var emp = {
    nombre : "Sara",
    edad : 10
}

Usted puede escribir y leer las propiedades de un objeto utilizando la notacion de puntos de la siguiente manera:

// Obtener las propiedades del objeto
emp.nombre // ==> Sara
emp.edad // ==> 10

// Estableciendo las propiedades del objeto
emp.nombre = "Deisi" // <== Daisi
emp.edad = 20 // <== 20

Arrays

Puede definir arrays utilizando literalmente array de la siguiente manera:

var x = [];
var y = [1, 2, 3, 4, 5];

Un array tiene la propiedad length que es util para la iteracion:

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++){
    // Hacemos algo con x[i]
}

Funciones

Una funcion en javascript puede ser o bien nombrada o anonima. Una funcion nombrada se puede definir mediante la palabra clave function de la siguiente manera:

function nombrada(){
   
}

Una funcion anonima puede ser definida en forma similar que una funcion normal, pero no tendrá ningun nombre. Una funcion anonima se puede asignar a una variable o se pasa a un metodo como se muestra a continuacion:

var manejador = function(){
    // hacer algo aqui
}

jQuery hace uso de funciones anonimas con mucha frecuencia como sigue:

$(document).ready(function(){
    // Hacer algo aqui
});


Argumentos

La variable javascript arguments es una especie de array que tiene la propiedad de length. El siguiente ejemplo lo muestra muy bien:

function func(x){
    console.log(typeof x, arguments.length);
}

func(); // ==> "undefined", 0
func(1); // ==> "number", 1
func("1","2","3"); // ==> "string", 3

Los argumentos de los objetos tambien tienen una propiedad callee, que se refiere a la funcion que esta dentro de el. Por ejemplo:

function func(){
    return arguments.callee;
}

func(); // ==> func


Contexto

Javascript tiene la famosa palabra clave this que se refiere al contexto actual. Dentro de una funcion este contexto puede cambiar, dependiendo de como se llama la funcion:

$(document).ready(function(){
    // Esto hace referencia a window.document
});
$("div").click(function{
    // Esto se refiere al elemento div en el DOM
});

Puede especificar el contexto de una llamada utilizando los metodos incorporados call() y apply(). La diferencia entre ellos es la forma en que se pasan los argumentos. Call pasa todos los argumentos a traves de los arguments de la funcion, mientras apply acepta un array como arguments.


function scope(){
    console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar",[1,2]); // ==> "foobar", 1
scope.apply("foobar",[1,2]); // ==> "foobar", 2


Ambito

El ambito de una variable es la region de su programa en el que se define. Las variables en javascript tendran solo dos ambitos.

Variables globales: una variable global tiene un alcance global que significa que se define por todas partes en su codigo javascript. 

Variables locales: una variable local sera visible solo dentro de la funcion donde se define. Los parametros de la funcion son siempre locales a esa funcion.

Dentro del cuerpo de una funcion, una variable local tiene prioridad sobre una variable global con el mismo nombre:

var miVar = "global"; // ==> declaramos una variable global

function (){
    var miVar = "local"; // ==> declaramos una variable local
    document.write(miVar); // ==> local
}

Llamadas

Una callback (llamada) es una funcion de javascript plana pasado a algun metodo como argumento o una opcion. Algunas llamadas son solo eventos, llamados a dar al usuario la oportunidad de reaccionar cuando se activa un determinado estado. El sistema de eventos de jQuery utiliza estas llamadas en todas partes, por ejemplo:

$("body").click(function(event){
    console.log("click en: " + event.target);
});

La mayoria de las llamadas proporcionan argumentos y un contexto. En el ejemplo del controlador de eventos, la devolucion de la llamada se llama como argumento. Se necesitan algunas llamadas para devolver algo, otros hacen el valor de retorno opcional. Para evitar un envio de formularios, en el controlador de eventos submit colocamos return false de la siguiente manera:

$("#miformulario").submit(function(){
    return false;
});

Cierres

Los cierres se crean cada vez que se accede a una variable que se define fuera del ambito dentro de algun ambito interno. El ejemplo siguiente muestra como la variable contador es visible dentro de crear, de incrementar, y las funciones de impresion, pero no fuera de ellos:

function crear(){
    var contador = 0;
    return {
        incrementar : function(){
            contador++;
        },
        impresion : function(){
            console.log(contador);
        }
    }
}

var c = crear();
c.incrementar();
c.impresion(); // ==> 1


Este patron permite crear objetos con metodos que operan sobre los datos que no son visibles para el mundo exterior. Cabe señalar que la ocultacion de datos es la base misma de la programacion orientada a objetos.

El patron Proxy

Un proxy es un objeto que se puede utilizar para controlar el acceso a otro objeto. Se implementa la misma interfaz que este otro objeto y pasa cualquier metodo invocandolo a él. Este otro objeto a menudo se llama real subject (sujeto real). Un proxy puede ser instanciado en lugar de real subject y permite ser accedido de forma remota. Podemos ahorrar usando el metodo setArray de jQuery en un cierre y sobreescribiendolo de la siguiente manera:

(function(){
    // registramos todas las llamadas a setArray
    var proxied = jQuery.fn.setArray;

    jQuery.fn.setArray = function(){
        console.log(this, arguments);
        return proxied.apply(this, arguments);
    }
})();

Lo anterior envuelve su codigo en una funcion para ocultar la variable proxied. El proxy entonces registra todas las llamadas al metodo y los delegados de la llamada al metodo original. Utilizando apply(this, arguments) garantiza que la persona que llama no sera capaz de notar la diferencia entre el original y el metodo proxied.


Funciones incorporadas

Javascript viene junto con un util conjunto de funciones incorporadas. Estos metodos se pueden utilizar para manipular cadenas, numeros y fechas. A continuacion se describen las funciones de javascript importantes:

+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| Metodo        | Descripcion                                                                                                                     |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| charAt()      | Devuelve el caracter en el indice especificado.                                                                                 |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| concat()      | Combina el texto de dos cadenas y devuelve una nueva cadena.                                                                    |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| forEach()     | Llama una funcion para cada elemento de la matriz                                                                               |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| indexOf()     | Devuelve el indice dentro del objeto llamado String de la primera aparicion del valor especificado, o -1 si no es encontrado.   |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| length()      | Devuelve la longitud de una cadena.                                                                                             |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| pop()         | Elimina el ultimo elemento de una matriz y devuelve dicho elemento.                                                             |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| push()        | añade uno o mas elementos al final de una matriz y devuelve la nueva longitud de la matriz.                                     |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| reverse()     | Invierte el orden de los elementos de una matriz, el primero se convierte en el ultimo, y el ultimo se convierte en el primero. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| sort()        | Ordena los elementos de una matriz                                                                                              |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| substr()      | Devuelve los caracteres de una cadena que comienza en el lugar especificado, por el numero de caracteres especificados.         |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toLowerCase() | Devuelve el valor de la cadena llamada convertido en minusculas.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toString()    | Devuelve la representacion de una cadena del valor de un numero.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toUpperCase() | Devuelve el valor de la cadena llamada convertido en mayusculas.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+

El modelo de objetos del documento

El modelo de objetos del documento (Document object model) es una estructura de arbol de diversos elementos de HTML de la siguiente manera:

<html>
<head>
    <title>Es el titulo</title>
</head>
<body>
    <div>
        <p>Este es un parrafo</p>
        <p>Este es el segundo parrafo</p>
        <p>Este es el tercer parrafo</p>
    </div>
</body>
</html>

Los siguientes son los puntos importantes sobre la estructura de arbol de arriba:

* El <html> es el ancestro de todos los demas elementos, en otras palabras, todos los demas elementos son descendientes de <html>

* El <head> y <body> no son solo elementos descendientes, son hijos de <html> tambien.

* Del mismo modo ademas de ser antepasado de <head> y <body>, <html> tambien es su padre.

* Los elementos <p> son los hijos (y descendientes) de <div>, descendientes de <body> y <html> y hermanos unos de otros elementos <p>.

Fuente: http://www.tutorialspoint.com/jquery/index.htm

Ataques XSS - DomKingKong Edition

Hola lectores del blog hoy les traigo un video que publico DragonJar donde nuestro amigo Dedalo de SeguridadBlanca.In nos muestra acerca de lo que son los XSS.