PDF de programación - Librerías JavaScript: JQuery

Librerías JavaScript: JQuery

Desarrollo de Aplicaciones en Entornos Web
Curso 2016/2017

Contenido

!  Que es JQuery
!  Carácterísiticas JQuery
!  Funciones básicas y selectores
!  Funciones para eventos
!  Funciones para efectos visuales
!  Funciones para AJAX
!  Funciones para CSS
!  Funciones para nodos DOM

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

2

Que es JQuery

https://jquery.com/
!  Librería de JavaScript

autor: John Resig (14/01/2006 en el BarCamp NYC)

" 
"  múltiples contribuciones de desarrolladores
" 

bajo licencia GPL

!  Facilita la programación de JavaScript:

"  Código más reducido y compatible con casi todos los

navegadores.

!  Programada eficientemente: comprimida solo ocupa

unas decenas de KBs.

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

3

Características JQuery

!  Selección de elementos DOM.
! 

Interactividad y modificaciones del árbol DOM, incluyendo
soporte para CSS 1-3 y un plugin básico de XPath.

!  Eventos.
!  Manipulación de la hoja de estilos CSS.
!  Efectos y animaciones. Animaciones personalizadas.
!  AJAX.
!  Utilidades varias: obtener información del navegador,
operar con objetos y vectores, funciones para rutinas
comunes, etc.

!  Compatible con la mayoría de los navegadores

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

4

Características JQuery

!  Sencillo de escribir. El código es comprensible y fácil

de leer.

!  Fácil de escalar y mantener

" 

jQuery no es un framework, es solamente una librería para
facilitarnos el manejo del DOM, los eventos y las peticiones
AJAX

"  Framework MVC en JavaScript: Angular.js, Backbone.js,

React.js

!  Otros proyectos JQuery: jQuery User Interface, QUnit

JS Unit Testing, jQuery Mobile

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

5

Ejemplo JavaScript vs JQuery

!  JavaScript

function cambiaFondo(color) {


onload="cambiaFondo('#ccc');”

document.body.style.background = color;
}

!  JQuery

$('body').css('background', '#ccc');

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

6

Conceptos Básicos de JQuery
!  $(document).ready() : indicar si el

documento se encuentra preparado para su
manipulación.
$(document).ready(function() {


console.log('el documento está preparado'); });

function readyFn() {

$(document).ready(readyFn);

console.log('el documento está preparado'); }

$(function() {


console.log('el documento está preparado'); });

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

7

!  JQuery ofrece selectores basados en atributos

donde el valor de los atributos emplea
expresiones regulares.
// encontrar todos los <a> cuyo atributo rel
terminan en "thinger”
$("a[rel$='thinger']");

!  Usando .match()

$("#texto").attr("value").match("expresión

regular");

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

8

Funciones y métodos básicos

!  $(cadena)

"  document.getElementByXXX(cadena)
la cadena de texto: usa XPath o selector CSS
" 
"  usando el separador "," : seleccionar muchos

elementos.

$('a') // Todos los enlaces de la página
$('#primero’)// Elemento cuyo id sea "primero"
$('h1.titular') // Elementos h1 con class
$('a, #primero, h1.titular') // Selecciona

"titular”

todo lo anterior

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

9

!  Métodos que se llaman desde el objeto JQuery:

"  $(...)
"  métodos utilizados en selecciones

!  Métodos en el espacio de nombres $ son

generalmente métodos para diferentes utilidades
"  no trabajan con selecciones.

!  Ejemplo: $.each y $(‘a’).each

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

10

console.log('elemento ' + idx + 'es ' + val);} );

$.trim(' quitar espacios en blanco ');
$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {

var myArray = [ 1, 2, 3, 5 ];
if ($.inArray(4, myArray) !== -1) {


console.log('valor encontrado'); }



var myValue = [1, 2, 3];
// Utilizar el operador typeof de JavaScript para comprobar tipos primitivos
typeof myValue == 'string'; // falso (false)
// Utilizar los métodos jQuery para comprobar tipos no primitivos
jQuery.isFunction(myValue); // falso (false)
jQuery.isArray(myValue); // verdadero (true)

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

11

Selectores CSS3 y otros
api.jquery.com/category/selectors

!  Permite seleccionar algunos elementos y realizar

acciones con ellos.

!  La elección de buenos selectores es importante para

mejorar el rendimiento del código.

!  elementos en base a su id : $('#myId');
!  elementos en base al nombre de clase: $('div.myClass');
!  elementos por su atributo: $('input[name=first_name]');
!  elementos en forma de selector CSS:


$('#contents ul.people li');

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

12

formulario #myForm

!  Otros selectores:
// selecciona el primer elemento <a> con la clase 'external’
$('a.external:first');
// selecciona todos los elementos <tr> impares de una tabla
$('tr:odd');
// selecciona todos los elementos del tipo input dentro del
$('#myForm:input');
// selecciona todos los divs visibles
$('div:visible');
// selecciona los divs excepto los 3 primeros (greater tan)
$('div:gt(2)');
// selecciona todos los divs actualmente animados
$('div:animated');

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

13

!  Mas ejemplos:
// Selecciona todos los párrafos de la página con al menos un enlace
$('p[a]')
// Selecciona todos los radiobutton de los formularios de la página
$('input:radio')
// Selecciona todos los enlaces que contengan la palabra "Imprimir"
$('a:contains("Imprimir")');
// Selecciona todos los elementos pares de una lista
$("ul#menuPrincipal li:even")
// Selecciona todos los elementos impares de una lista
$("ul#menuPrincipal li:odd")
// Selecciona los 5 primeros párrafos de la página
$("p:lt(5)")
// Selecciona los 4 párrafo de la página
$("p:eq(4)")

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

14

!  Evaluar si una selección posee elementos
if ($('div.foo').length) { ... }
!  Guardar selecciones en una variable
var $divs = $('div');
!  JQuery ofrece pseudo-selectores que ayudan a
encontrar elementos dentro de los formularios

!  :button, :checkbox, :checked, :file, :disa
bled, :enabled, :image, :input, :password,
:radio, :reset, :selected, :submit, :text

// obtener todos los inputs dentro del formulario #myForm
$('#myForm :input');

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

15

Acceso a elementos HTML

!  $.fn.attr : Valor de un determinado atributo.
!  $.fn.html : Contenido HTML de un elemento.
!  $.fn.text : Contenido en texto del elemento.
!  $.fn.val : Valor (value) en elementos de formularios.

//Modificación atributos
$('a').attr('href', ’www.um.es');
$('a').attr({


//Consulta atributos
$('a').attr('href');

'title' : ’Universidad de Murcia',
'href' : 'www.um.es'});

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

16

Crear elementos HTML
!  A través del mismo método $() que se utiliza

para realizar selecciones.
var $myNewElement = $('<p>Nuevo elemento</p>');
$myNewElement.appendTo('#content');
$('<a/>', {

html : 'Un <strong>nuevo</strong> enlace',
'class' : 'new',
href : ’index.html'} );

!  Los nombres de propiedades no deben estar

entre comillas
"  Excepto que se utilice como propiedad una palabra

reservada

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

17

Funciones para eventos

!  Al cargar la página, el navegador construye el árbol

DOM

window.onload = function() { ...});

"  Problema: página cargada completamente (incluyendo todas

las imágenes y archivos externos )

!  JQuery propone:
$(document).ready(function() { ...});

"  no espera a que se carguen todos los elementos de la

página

"  árbol DOM disponible para ser manipulado al descargar el

contenido HTML

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

18

Funciones para eventos
!  Si se utiliza la función sin argumentos, se ejecuta el

evento

'menu’

$(document).ready(function() … );
$('p').click();
// Ejecuta el evento 'onclick' en todos los párrafos de
$('div#menu').mouseover();
// Ejecuta el evento 'mouseover' sobre un 'div' con id

la página

!  keypress(): evento de presión de tecla.
! 

toggle(): alterna la ejecución de dos funciones.

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

19

Funciones para eventos

!  Uso habitual de las funciones de eventos:

establecer la función manejador que ejecuta
cuando se produzca el evento

$('p').click(
function() {
alert($(this).text());
});

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

20

!  Vincular funciones a eventos con $().bind
$('p').bind('click', function() {


console.log('click');});

$('input').bind(

'click change',
// es posible vincular múltiples eventos al elemento

{ foo : 'bar' }, // se debe pasar la información asociada como argumento


function(eventObject) {


// registra el tipo de evento y la información asociada { foo : 'bar' }
} );
$('p').unbind('click');

console.log(eventObject.type, eventObject.data);

Curso 2016/2017

Desarrollo de Aplicaciones en Entornos Web

21

Funciones para efectos visuales

// Oculta todos los enlaces de la página
$('a').hide();
// Muestra todos los 'div' que estaban ocultos
$('div:hidden').show();
// Muestra los 'div' que estaba ocultos y oculta los 'div' que eran
$('div').toggle();
// Muestra, espera y oculta los 'h1' en tiempos determinados
$('h1').show(300).delay(1000).hide(300);

visibles

! 

! 

fadeIn(), fadeOut() : muestra/o