¿Qué es?

jQuery es una librería JavaScript rápida, pequeña, y rica en funcionalidades.

Librería != Framework

Librería

• Abstrae diversas capas: características del navegador, manipulación del DOM, etc.

• Conjunto de herramientas

• Simplificar el desarrollo​

Ej.: Underscore, YUI, MooTools

Framework

• Ayuda a separar en módulos

• Impone una estructura

• Mantiene organizado tu código​
• Encapsula y simplifica operaciones comunes complejas

Ej.: Backbone, Knockout, Angular, Ember

jQuery ha cambiado la forma en que millones de personas escriben JavaScript.

jQuery

Simplifica mucho operaciones como recorrer y manipular el DOM, el manejo de eventos, animaciones, o Ajax con una sencilla API que funciona en multitud de navegadores. 

• John Resig
• 28 de agosto de 2006
• Última versión 1.12.1 / 2.2.2

El autor

$(document).ready

Una página no puede ser manipulada hasta que el documento esté "listo" (ready).

El código JavaScript que se ejecute antes de que el documento esté listo podría generar errores (excepciones) y/o no funcionar, si depende de que el DOM esté totalmente cargado.

$(document).ready

El código incluido dentro de un bloque 

$( document ).ready() 

sólo se ejecutará una vez, y sólo cuando el DOM esté totalmente cargado.

Selectores

• Basados en los selectores de CSS

• Permite obtener un elemento o conjunto de elementos del DOM para manipularlos

• Mediante una cadena de caracteres que representa un patrón

Selectores

• Selector de elemento

<label id="mike">¡Hola!</label>

<input type="text" id="sully" />

$('label'); // obtengo la label

$('input'); // obtengo el input

Selectores

• Selector de #identificador

<label id="mike">¡Hola!</label>

<input type="text" id="sully" />

$('#mike'); // obtengo la label

$('#sully'); // obtengo el input

Selectores

• Selector de .clase

<label id="mike" class="green">¡Hola!</label>

<input type="text" id="sully" class="blue" />

$('.green'); // obtengo la label

$('.blue'); // obtengo el input

Selectores

• Selector de [atributo]

$('[name="rayo_mcqueen"]'); // donde atributo name es igual a...

$('[name*="_mc"]'); // donde atributo name contiene...

$('[name^="rayo"]'); // donde atributo name empieza por...

$('[name$="mcqueen"]'); // donde atributo name acaba por...

$('[name!="rayo_mcqueen"]'); // donde atributo name es diferente de...

<input type="text" name="rayo_mcqueen" />

<input type="text" name="sally_carrera" />

Selectores

• Selector de descendientes

$('div input'); // input que se encuentra dentro de un div

$('ul li'); // items dentro de una lista

<div>
    <input type="text" name="rayo_mcqueen" />
</div>
<input type="text" name="sally_carrera" />

<ul>
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
</ul>

Selectores

• :checkbox
• :checked
• :enabled
• :eq()
• :even
• :first
• :has
• :hidden
• :input
• :odd
• :visible
• ...

a cholón

Selectores

¿Tocado o hundido?

<div id="axiom">
    <input type="text" id="eva"  />
    <input type="text" id="wallE" />
</div>

$('#axiom').length; // 1

$('#wallE').length; // 1

$('input').length; // 2

$('.wallE').length; // 0

Eventos

• .click()
• .dblclick()
• .change()
• .blur()
• .hover() == .mouseenter() + .mouseleave()
• .keydown() /.keyup() / .keypress()
• .mouseup() / .mousedown()
• .focus()
• ...

Eventos

.on()

uno para gobernalos a todos...

• .on("click", ...)
• .on("change", ...)
• .on("blur", ...)
• .on("hover", ...)
• ...

Manipulación

• .after() / .insertAfter()
• .append() / .appendTo()
• .before() / .insertBefore()
• .prepend() / .prependTo()
• .wrap()
• .html()
• .text()
• ...

Inserción en el DOM

Manipulación

• .detach()
• .empty()
• .remove()
• .unwrap()

Eliminación del DOM

Manipulación

• .css()
• .height()
• .width()
• .position()
• ...

Propiedades de estilo

$('div').css('background-color', 'red')
        .css('font-size', '20px')
        .css('font-weight', 'bold')
        .css('color', 'white');

Manipulación

• .attr()
• .prop()
• .removeAttr()
• .removeProp()
• .val()

Atributos generales

$('div').attr('id', 'dory');
$('a').attr('href', '#inicio');
$('input').prop('disabled', true);
$('input').val('sigue nadando ♫!');

<div id="dory"></div>
<a href="#inicio"></a>
<input type="text" disabled />
<input type="text" value="sigue nadando ♫!" />

Manipulación

• .find()
• .closest()
• .children()
• .next() / .nextAll() / .nextUntil()
• .prev() / .prevAll() / .prevUntil()
• .parent() / .parents()
• .siblings()
• ...

Recorrer el árbol

Manipulación

• .eq()
• .filter()
• .first()
• .has()
• .is()
• .last()
• .map()
• ...

Filtrar

Manipulación

• .add()
• .addBack()
• .contents()
• .each()
• .not()
• ...

Miscelánea