JQuery

Librería
 Función

• La biblioteca jQuery facilita la manipulación de una página de HTML después de que el navegador la muestra. 
• Proporciona herramientas que ayudan a usuarios para interactuar con su página.

• Herramientas que ayudan a crear animaciones en su página.

• Herramientas que permiten comunicarse con un servidor sin tener que volver a cargar la página.

 Nota: Se asume que usted entiende los selectores de HTML y CSS . 

 $

La biblioteca jQuery proporciona la  función jQuery, que le permite seleccionar elementos utilizando los selectores de
CSS.
var listItems = jQuery( 'li' );

Pero es común ver algo como esto:

var listItems = $( 'li’ );

Los nombres válidos en JavaScript pueden ser casi cualquier cosa, siempre y cuando no comiencen con un número y
no incluyan un guión.  Por lo tanto, el código $ es solo un nombre más corto y conveniente para la  función jQuery; de
hecho, en el código fuente de jQuery, encontrarás esto cerca del final:

// Expose jQuery to the global object window.jQuery = window.$ = jQuery;

Nota: Tenga en cuenta que si su página contiene más de una biblioteca de JavaScript, $ puede ser utilizada por otra
biblioteca, lo que puede hacer que jQuery no funcione. Si experimenta esto, debe considerar el uso
de jQuery.noConflict antes de cargar las otras bibliotecas.
 $(document).ready()

Antes de poder usar jQuery para hacer algo en su página, debe asegurarse de que la página se encuentre en un estado
en el que esté lista para ser manipulada. Con jQuery, se logra poniendo nuestro código en una función y luego
pasándole esa función a $(document).ready(). Como puede ver aquí, la función que aprobamos puede ser simplemente
una función anónima.

$( document ).ready(function() { });

Esto es equivalente a:

$(function() { });
 Buscar en el árbol de nodos

Lo más simple que podemos hacer con jQuery es obtener algunos elementos y hacer algo con ellos. 

Si entiende los selectores de CSS , obtener algunos elementos es muy sencillo: simplemente pase el selector
apropiado a $().

$( '# encabezado ' ); // selecciona el elemento con un ID = ‘encabezado’

$( 'li’ ); // selecciona todos los ‘list ítems’ de la página
$( 'ul li' ); // selecciona todos los ‘list ítems’ que esan contenidos en un ‘unordered lists’
$( '.persona’ ); // selecciona todos los elementos con una CLASS = 'persona’

Nota: Es importante comprender que cualquier selección que realice solo lo hará sobre elementos que existan en la
página. Es decir, si escribe var anchors = $( 'a' );y luego agrega otro <a>elemento a su página más adelante, entonces
su variable anchors no contendrá ese nuevo elemento.
 Comprobar el resultado de la búsqueda

A veces, solo querrá hacer algo cuando su selección coincida con algunos elementos. Debido a que la 
función $()  siempre devuelve un objeto jQuery, y un objeto siempre es verdadero , deberá probar el
contenido de su selección para determinar si se encontró algo.
```<span class=“precaucion">Precaución</span> código roto
if ( $( '#noexistente' ) ) {
// Erróneo! Este código se ejecuta siempre!
}

if ( $( '#noexistente' ).length > 0 ) {

// Correcto! Este código se ejecuta solo si está un elemento en su página
// con un ID = 'noexistente’
}

De forma corta:
if ( $( '#noexistente' ).length ) {
// Este código se ejecuta solo si está un elemento en su página
}
 Obtención de elementos individuales de
una selección.

Si necesita trabajar con el elemento DOM en bruto de una selección, debe acceder a ese elemento desde el objeto
jQuery. Por ejemplo, si quisiera acceder directamente a  la  propiedad value de un elemento  <input>, querría trabajar
con el elemento DOM en bruto.

var listItems = $( 'li' );

var rawListItem = listItems[0]; // or listItems.get( 0 )
var html = rawListItem.innerHTML;

Tenga en cuenta que no puede llamar a los métodos jQuery en los elementos de DOM sin procesar. Por lo tanto, lo
siguiente no funcionará, si necesita trabajar con un solo elemento en una selección y desea poder usar los métodos
jQuery en ese elemento, entonces puede obtener un nuevo objeto jQuery que contiene un solo elemento
utilizando .eq() y pasando el índice del elemento en el que está después.

var listItems = $( 'li’ );

var secondListItem = listItems.eq( 1 );
secondListItem.remove();
 Creando nuevos elementos.

La  función $ tiene otro rol: crear nuevos elementos. 

Si pasa un fragmento de código HTML a $(), creará un nuevo elemento en la memoria, es decir, el elemento se
creará, pero no se colocará en la página hasta que lo coloque en la página.

$( '<p>' ); // crea un nuevo elemento <p>

$( '<p>Hola!</p>' ); // crea un nuevo elemento <p> con contenido
$( '<p class=“saludo">Hola!</p>' ); // crea un nuevo elemento <p> con contenido y un atributo class

De manera más ordenada, también puede crear un elemento pasando un objeto con información sobre cómo crear
el elemento:

$( '<p>', { html: ‘Hola!', 'class': ‘saludo' });

$( '<p>', { text: ‘Hola!', 'class': ‘saludo' });

Nota: text y html se refieren a innerHTML sólo que text es tál cual y html interpreta código HTML
 Trabajando con arreglos (selecciones).

Probando una selección

Podemos determinar si una selección cumple con ciertos criterios utilizando el  método .is() . La forma más común de
usar este método es proporcionar un selector como único argumento. 

Devuelve true o false dependiendo de si la selección coincide con el selector:

$( 'li' ).eq( 0 ).is( '.special' ); // false

$( 'li' ).eq( 1 ).is( '.special' ); // true

También puede pasar al método  .is() un objeto jQuery, un elemento DOM en bruto o incluso una función si necesita
realizar una prueba más compleja. 

Consulte la página oficial de JQuery para más detalles.

 Trabajando con arreglos (selecciones).

Recolectores, configuradores e iteración implícita.

 
Los recolectores recuperan una parte de la información de la selección, y los
configuradores modifican la selección de alguna manera. En casi todos los casos, los
captadores operan solo en el primer elemento de una selección ( .text() es una excepción
notable); 

Los configuradores operan en todos los elementos de una selección, utilizando lo que se

conoce como iteración implícita .
 Trabajando con arreglos (selecciones).

La iteración implícita significa que jQuery itera automáticamente sobre todos los elementos de una selección cuando
llama a un método de establecimiento en esa selección.

Digamos que desea cambiar el HTML de todos los elementos de la lista en su página. Para hacer esto, usaríamos el
método  .html(), que cambiará el HTML de todos los elementos de la lista seleccionados.

$( 'li' ).html( ‘Nuevo HTML' );

También puede pasar una función a los métodos de establecimiento de jQuery. El valor de retorno de esta función se
utiliza como el nuevo valor y recibe dos argumentos: el índice del elemento en la selección y el valor antiguo de la
cosa que está intentando cambiar. Esto es útil cuando necesita información sobre el estado actual de un elemento para
establecer correctamente el nuevo estado.

$( 'li' ).html(function( index, anteriorHtml ) {

return anteriorHtml + '!!!’
});
 Trabajando con arreglos (selecciones).

Iteración explícita
A veces, la tarea que está intentando realizar no se ajusta perfectamente a uno de los métodos existentes de jQuery, y
tendrá que repetir explícitamente una selección. El método .each() permite hacer esto. En el siguiente código, lo
usamos para agregar una etiqueta <b> al principio del elemento de la lista, que contiene el índice del elemento de la
lista.

$( 'li' ).each(function( index, elem ) {

$( elem ).prepend( '<b>' + index + ': </b>' );
});

Nota: Dentro de la función a la que pasamos .each(), tenemos acceso al elemento DOM en bruto actual de dos
maneras: como this y como elem.; this es una palabra clave especial en JavaScript, que se refiere al objeto que es el
contexto actual de la función. En jQuery, this casi siempre se refiere al elemento DOM en bruto en el que la función
está operando actualmente. Entonces, en el caso de .each(), se refiere al elemento actual en el conjunto de elementos
sobre los que estamos iterando.
 Trabajando con arreglos (selecciones).

Encadenamiento
Una de las partes más lucrativas de jQuery es la capacidad de "encadenar" métodos. Esto significa que podemos llamar a
una serie de métodos en una selección sin tener que repetir la selección o almacenar la selección en una variable. Incluso
podemos hacer nuevas selecciones basadas en selecciones anteriores, todas sin romper la cadena.

$( 'li' ) .click(function() {
$( this ).addClass( 'clicked' );
}) .find( 'span' ) .attr( 'title', 'Hover over me' );
 Trabajando con arreglos (selecciones).

Encadenamiento (cont.)
El encadenamiento es posible porque cada método de establecimiento en jQuery devuelve la selección en la que fue
llamado. Es extraordinariamente potente y es una característica que muchas bibliotecas han adoptado. Sin embargo, debe
ser utilizado con cuidado. 

Un extenso encadenamiento puede hacer que el código sea extremadamente difícil de leer, modificar y depurar. No hay
una regla estricta sobre la duración de una cadena, pero incluso la simple cadena de arriba vale la pena refactorizar para
facilitar la lectura.

var listItems = $( 'li' );

var spans = listItems.find( 'span' );
listItems .click(function() { $( this ).addClass( 'clicked' ); });
spans.attr( 'title', 'Hover over me' );
 Asynchronous JavaScript y XML
AJAX

AJAX, "JavaScript asíncrono y XML", es un medio para cargar datos desde un servidor sin necesidad de volver a cargar la
página. Utiliza la funcionalidad XMLHttpRequest (XHR) de un navegador para realizar una solicitud al servidor y luego
manejar los datos que el servidor devuelve.
jQuery proporciona el método $.ajax, y varios métodos convenientes, para facilitar el trabajo con XHR en todos los
navegadores.
$ .ajax
Podemos usar el método $.ajax() de  jQuery de varias maneras: podemos pasarle un objeto de configuración como único argumento, o podemos pasarle una URL y un objeto de configuración opcional. 

var jqxhr = $.ajax({

method: "POST",
url: “recurso.php",
data: { name: "John", location: "Boston" },
datatype:”json”
})
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "complete" );