jquery_apuntes

5/9/2018 JQuery_Apuntes - slidepdf.com

http://slidepdf.com/reader/full/jqueryapuntes 1/33

El framework de JavaScript



jQUERY 1

JQUERY ....................................................................................................................................... 3

INTRODUCCIÓN ..................................................................................................................................... 3

DOM ...................................................................................................................................................... 3

UTILIZAR jQUERY ................................................................................................................................... 4

PRINCIPIOS DE USO ............................................................................................................................... 5

CARGAR LA WEB .................................................................................................................................... 5 Práctica ............................................................................................................................................... 5

ACCESO A LOS ELEMENTOS DE LA WEB .................................................................................................. 6 Con JavaScript .................................................................................. ................................................... 6 Con jQuery .......................................................................................................................................... 6

SELECTORES ........................................................................................................................................... 6 Selector de etiquetas. ...................................................... ................................................................. ....... 6 Selector por identificador ..................................................................... ................................................... 7 Selector por clase CSS ...................................................... ................................................................. ....... 7 Selectores de varios elementos ..................................................................................................... .......... 7 Selectores posicionales .......................................................................................................... .................. 7 Selectores parent>child ........................................................................ ................................................... 7 Selectores de formulario ......................................................................................................................... 8 Selectores de jerarquía ............................................................... ............................................................. 8 TABLAS DE SELECTORES .............................................................. ............................................................. 9 OPERADORES .............................................................................................................. ........................... 10

Ejemplo ............................................................................................. ................................................ 10

EVENTOS .............................................................................................................................................. 10 Práctica ............................................................................................................................................. 11

TIPOS DE EVENTOS ................................................................................................................................ 11 EVENTOS RELACIONADOS CON EL RATÓN ............................................................. ........................... 12 EVENTOS RELACIONADOS CON EL TECLADO ............................................................................ ........ 12 EVENTOS COMBINADOS TECLADO-RATÓN...................................... ................................................. 12 OTROS EVENTOS .............................................................................. ................................................. 13

DEFINIR/ELIMINAR EVENTOS: bind/unbind ................................................................ ........................... 14 BIND ............................................................................................................ ...................................... 14 Ejemplo 1. Asignación de un evento a los elementos de una etiqueta .................................... ........ 14 Ejemplo 2. Asignación de una función a varios eventos a la vez ...................................................... 15

UNBING ............................................................ ................................................................. ................ 15

OTRAS UTILIDADES .............................................................................................................................. 15

MÉTODOS ............................................................................................................................................ 16 text() ...................................................................................................................................................... 16

Ejemplo ............................................................................................. ................................................ 16 attr()/removeAttr .................................................................................................................................. 16

Ejemplo 1 .......................................................................................................................................... 16 Ejemplo 2 ........................................................ ................................................................. ................ 17

addClass/removeClass ................................................................................................ ........................... 18 Ejemplo ............................................................................................. ................................................ 18

html() ..................................................................................................................................................... 19 Ejemplo ............................................................................................. ................................................ 19

css() ............................................................ ................................................................. ........................... 20



jQUERY 2

Ejemplos ........................................................... ................................................................. ................ 20 append / prepend ............................................................ ................................................................. ..... 20

Ejemplos ........................................................... ................................................................. ................ 21

ITERADOR each .................................................................................................................................... 21 Ejemplo ............................................................................................. ................................................ 21

EFECTOS VISUALES ............................................................................................................................... 22 hide/show | slow/fast.................................................... ................................................................. ..... 22

Ejemplo ............................................................................................. ................................................ 22 fadeIn / fadeOut / fadeTo ........................................................... ........................................................... 23

Ejemplo ............................................................................................. ................................................ 24 Ejemplo ............................................................................................. ................................................ 24

Comprobar si un element es visible ...................................................................................................... 25 toggle() ....................................................... ................................................................. ........................... 25

Ejemplo ............................................................................................. ................................................ 25 animate ...................................................... ................................................................. ........................... 26

Ejemplo ............................................................................................. ................................................ 27

PRÁCTICA: MENÚ DESPLEGABLE .......................................................................................................... 27

ANEXO ...................................................................................................................................... 31

OPERACIONES HABITUALES ................................................................................................................. 31

FUENTES ................................................................................................................................. 32



jQUERY 3

jQUERY

INTRODUCCIÓN

jQuery es un framework 1 de JavaScript que permite simplificar el manejo de losdocumentos HTML, el árbol DOM, manejar eventos, desarrollar animaciones y agregarinteracción con Ajax a páginas Web.

JQuery es software libre y de código abierto creado por John Resig que además trabajapara Mozilla Corporation.

La primera versión de jQuery estable apareció en el año 2006 y la última, de febrero de2011, es la versión 1.5.1. Esta última versión se caracteriza por la utilización de Ajax.

El uso de jQuery librera al programador de tener que implementar los métodosJavaScript que el framework contiene. Entre otras facilidades, jQuery tiene

implementados todos sus métodos para detectar el browser del usuario y adaptar lasfunciones a cada uno de ellos.

La librería jQuery en resumen nos aporta las siguientes ventajas:

Ahorra muchas líneas de código.

Hace transparente el soporte de nuestra aplicación para los navegadoresprincipales.

Provee de un mecanismo para la captura de eventos.

Provee un conjunto de funciones para animar el contenido de la página enforma muy sencilla.

Integra funcionalidades para trabajar con AJAX.

DOM

Acorde al W3C el Document Object Model oDOM es una interfaz de programaciónde aplicaciones (API) para documentos validos HTML y bien construidos XML. Definela estructura lógica de los documentos y el modo en que se accede y manipula.

El DOM permite un acceso a la estructura de una página HTML o XHTML mediante el

mapeo de los elementos de esta página en un árbol de nodos. Cada elemento seconvierte en un nodo y cada porción de texto en un nodo de texto.

La siguiente página

<!DOCTYPE HTML><head>

<title>Esta es mi Web</title></head><body>

<p>Esta es mi primera <strong>Web</strong></p>

1 Un framework son librerías de código que contienen métodos ya listos para utilizar



jQUERY 4

</body></html>

Se corresponde con el siguiente árbol de nodos generado automáticamente por DOM

Otro ejemplo gráfico

UTILIZAR jQUERY

Para utilizar la librería debemos descargarla del sitio oficial (http://jquery.com/ ) eintroducir en cada página que lo requiera utilizar la siguiente línea en el bloque <head>:

<script src=" jquery-1.5.1.min.js"></script>

Del sitio oficial de jQuery descargaremos la versión descomprimida que ocupaalrededor de 84 Kb (es el archivo jquery-1.5.1.min.js).

DocumentoHTML

head

meta title

body

p

“Esta es mi Web” “Esta es mi

primera” strong

“Web”

http://jquery.com/

http://jquery.com/

http://jquery.com/

http://jquery.com/



jQUERY 5

PRINCIPIOS DE USO

La forma de interactuar con la página es mediante la función $(), un alias de jQuery querecibe como parámetro una expresión CSS o el nombre de una etiqueta HTML ydevuelve todos los elementos que concuerdan con la expresión.

// Devuelve el elemento con id="cabecera"$("#cabecera")// Devolverá una matriz de elementos con class="destacado"$(".destacado")

Una vez obtenidos los elementos, se les puede aplicar cualquiera de las funciones quefacilita la biblioteca.

// Se elimina el estilo (removeClass()) y se aplica uno nuevo (addClass()) a todos losnodos con class=" destacado "

$(". destacado ").removeClass("destacado ").addClass("nodestacado");

CARGAR LA WEB

Una de las funciones más utilizadas en las aplicaciones JavaScript es la siguiente

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

La orden anterior hace que function() se ejecute una vez que la página se haya cargadopor completo. jQuery dispone de una función equivalente

$(document).ready(function(){…}) La gran ventaja de la función de jQuery, es que la página se puede manipular en cuantose ha cargado su código HTML (y por tanto, se ha construido el árbol DOM de lapágina) mientras que la función de JavaScript espera a que se carguen todos loselementos de la página, incluyendo todas las imágenes. De esta forma, las aplicacionesrealizadas con jQuery pueden responder de forma mucho más rápida que lasaplicaciones JavaScript tradicionales.

Práctica

Se mostrará una ventana de bienvenida al cargar la página

Fichero HTML

<!DOCTYPE HTML><html><head>

<meta charset=utf-8"><title>Ejemplo 1</title><script src="js/jquery-1.5.1.min.js"></script><script src=" js/fichero.js" ></script>

</head><body>

<h1> Comenzando.....</h1></body></html>



jQUERY 6

Fichero JavaScript

$(document).ready(function(){alert("Bienvenid@ a mi página");

});

ACCESO A LOS ELEMENTOS DE LA WEB

Por otra parte, la función getElementById() es posiblemente la más utilizada aldesarrollar aplicaciones web, ya que permite seleccionar un elemento a partir de suatributo “id”. Además, existen otras dos funciones relacionadas:

getElementsByTagName() y getElementsByName(). jQuery incluye la función $() como una alternativa más rápida y completa para seleccionar cualquier elemento de lapágina:

Con JavaScript// Seleccionar un elementodocument.getElementById("miParrafo");// Seleccionar todos los enlacesdocument.getElementsByTagName("a");// Seleccionar todo lo anterior----// Seleccionar mediante la clase CSS----

Con jQuery

// Seleccionar un elemento$("#miParrafo");// Seleccionar todos los enlaces$("a");// Seleccionar todo lo anterior$("#miParrafo, a")// Seleccionar mediante la clase CSS$(".miClase")

SELECTORES

jQuery utiliza selectores para identificar aquellos elementos sobre los que se quiereactuar. Un selector es una cadena de caracteres que identifica a uno o varios elementosde una página Web.

Los selectores básicos utilizados en jQuery son:

Selector de etiquetas.

$(“h2”)

//selecciona todos los elementos que tienen etiqueta <h2>…..</h2> Selector por etiqueta/contenido.



jQUERY 7

$(“p:contains(„Hola‟)”) //selecciona los párrafos (<p>…</p>) que contengan la palabra “Hola”

Selector por etiqueta/propiedad.

$("div:visible")//selecciona los div que tengan la propiedad visible=true

Selector por etiqueta/clase.

$("li.nombreClase")//selecciona los li que tengan asignada la clase CSS nombreClase

Selector por identificador

$(“# misComentarios”) //selecciona todos los elementos que tienen el atributo id=misComentarios

Selector por clase CSS

$(.miClase)//selecciona todos los elementos que tienen como atributo class=”miClase”

Selectores de varios elementos

$(“p, a”) //Selecciona todos los <a> y todos los <p>

Selectores posicionales

Los selectores posicionales stán basados en las relaciones posicionales entre elementossegún la estructura DOM del documento.

Selecciona el primer elemento <p> de la página

$(“p:first”)

Selecciona el primer <img> de la página que tiene un atributo src acabadoen .png

$(“img[src$=.png]:first)

Selecciona todos los párrafos que implementen la clase CSS miClase:

$( “p[@miClase]” )

Selecciona todos los divs que contengan algún párrafo dentro:

$( “div[p]” )

Selecciona todos los párrafos que tengan al menos un enlace:

$("p[a]")

Selecciona todos los radio buttons que han sido chequeados

$("input[@type=radio][@checked]")

Selectores parent>child

Los selectores parent>child permite que se pueda puedan acceder a los elementos quesean hijos directos de otros.



jQUERY 8

//selecciona todas las etiquetas b que son hijas directas de los párrafos$("p > b")//selecciona todas las etiquetas que son hijas directas del elemento con id="capa"$("#capa > *")

Selectores de formulario

Los selectores de formulario permiten seleccionar elementos de formulario de formaespecífica.

Selecciona todos los elementos <input> con un tipo de atributo igual alnombre del selector.

$(“:text”) //selecciona todos los input que tengan tipo texto$(“:checkbox”) //selecciona todos los input que tengan tipo checkbox

Selecciona todos los elementos input

$(“:input” )

Selecciona todos los elementos button

$(“:button”)

Selecciona todos los elementos activados del formulario:

$(“:enabled”)

Selecciona todos los radio buttons y checkbox del formulario que estánpulsados

$(":checked")

Selecciona todos los radio button que estén chequeados

$(":radio :checked")

Selectores de jerarquía

Selector de descendientes: selecciona elementos que desciendan de otroelemento (CSS 1)

jquery("div.entrada h2")

Selector de hijos: selecciona elementos que sean hijos directos de otroelemento (CSS 2)

jquery("div.entrada > h2") Pseudo clase hijo: selecciona el enésimo hijo de un elemento (CSS 3)

jquery("tr:nth-child(1)")

Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)

jquery("tr:first-child")

Pseudo clase último hijo: selecciona el último hijo de un elemento (CSS 3)

jquery("tr:last-child")

Pseudo clase hijo único: selecciona los elementos que sean hijos únicos de

otros elementos (CSS 3)

jquery("div:only-child")



jQUERY 9

Pseudo clase primero: selecciona el primer elemento de un grupo deelementos. Equivale a eq(0) (jQuery)

jquery("td:first)")

Pseudo clase último: selecciona el último elemento de un grupo deelementos (jQuery)

jquery("td:last)")

Pseudo clase mayor que: selecciona todos los elementos con un índicemayor que el indicado en un grupo de elementos (jQuery)

jquery("td:gt(0)")

Pseudo clase menor que: selecciona todos los elementos con un índicemenor que el indicado en un grupo de elementos (jQuery)

jquery("td:lt(3)")

Pseudo clase par: selecciona los elementos pares de un grupo de elementos(jQuery)

jquery("td:even") Pseudo clase impar: selecciona los elementos impares de un grupo de

elementos (jQuery)

jquery("td:odd")

Selector de hermanos: selecciona todos los hermanos que se encuentrenprecedidos de otro elemento (CSS 3)

jquery("div.entrada ~ p")

Selector de próximo adyacente: similar al anterior, pero sólo selecciona eladyacente directo (CSS 2)

jquery("div.entrada + p") Pseudo clase padre: selecciona los padres de otros elementos (jQuery)

jquery("h2:parent")

Pseudo clase vacío: selecciona los elementos que no tengan ningún hijo,incluyendo texto plano (CSS 3)

jquery(":empty")

TABLAS DE SELECTORES

Cuando una función jQuery devuelve varios elementos, lo hace en formato de tabla,

donde cada elemento está identificado por una posición de la misma. Entoncesmediante: eq(indice) podemos obtener el elemento de la lista a la que se hace referenciade la posición índice+1, teniendo en cuenta que las lista en jQuery empiezan contardesde 0.

Por ejemplo, en la siguiente instrucción almacena una referencia al tercer enlace queimplementa la clase “enlaceAmigos”.

enlace = $('a.enlaceAmigos:eq(2)')

A continuación se muestra como acceder al párrafo número 3 (segunda posición)

miParrafo=$(“p:eq(2)”)



jQUERY 10

OPERADORES

Se pueden utilizar los operadores ^= , $= y *=.

^= para obtener los elementos de una página HTML que contengan un atributo

que empiece por un valor determinado. $= para obtener los elementos de una página HTML que acabe por un valor

determinado. *= para obtener los elementos de una página HTML que contenga un valor

determinado.

Ejemplo$(document).ready(function() {//hace referencia a los enlaces que empiezan por mailto:$('a[href^="mailto:"]').addClass('mailto');

//hace referencia a los enlaces que hagan referencia a un fichero pdf $('a[href$=".pdf"]').addClass('enlacePdf');//hace referencia a un enlace a sitio.com$('a[href*= "sitio.com"]').addClass('sitio'); });

Estas clases CSS deben estar previamente definidas en la página, por ejemplo:

.mailto { color: blue; }

.enlacePdf { color:green; }

.sitio { color: yellow; }

De esta forma, los enlaces de tipo malito aparecerán en azul, los enlaces a ficheros pdf verdes y los enlaces a “ sitio.com” aparecerán en amarillo.

http://parasitovirtual.wordpress.com/2010/12/06/curso-jquery-capitulo-6-selectores-basicos-de-filtro/ Curso jQuery. Capítulo 6: Selectores básicos de filtro. « Elrincón de un parásito virtual

http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/ Curso de jQuery:Selectores

http://www.desarrolloweb.com/articulos/ejemplo-selectores-jquery.html Ejemplo parapracticar con selectores en jQUERY

EVENTOS

Los eventos son los elementos fundamentales de la interacción del usuario con unaWeb. Es fundamental que el programador maneje con soltura la gestión de eventos yaque ello es lo que va a permitir dar funcionalidad a la Web.

Un evento se provoca cuando el usuario o el sistema realiza alguna acción sobre lapágina Web, esto puede ser: cargar la página, pulsar con el teclado sobre un elemento,pulsar una tecla, etc.

http://parasitovirtual.wordpress.com/2010/12/06/curso-jquery-capitulo-6-selectores-basicos-de-filtro/



http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/


http://www.desarrolloweb.com/articulos/ejemplo-selectores-jquery.html








jQUERY 11

Cuando se provoca un evento, este se puede manejar con un controlador de evento queejecute unas determinadas acciones. Los controladores de eventos serán funcionesJavaScript enlazadas al evento correspondiente.

Para determinar que un evento debe ser capturado se utiliza la siguiente sintaxis jQuery.

$(elemento).evento(function(event ){…}) //event es una variable que representa al evento que se ha producido.

Práctica

En el siguiente formulario HTML, al cargar la página se define un evento clic para el botón con id “elBoton” y el controlador de evento correspondiente que muestra una

ventana con el nombre introducido en el campo con id=”elCampo” o un mensaje de

aviso.

<!DOCTYPE html>

<html><head><meta charset=utf-8"><title>Ejemplo 2</title><script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero.js" ></script></head><body>

<h1>Ejemplo de Formulario Web</h1><form >

Nombre

<input name="nombre" id="elNombre"placeholder="Escribe tu nombre" autofocus></p>Fecha<input name="fecha" type="date"><input type="button" id="elBoton" value="Para pulsar">

</form></body>

</html>

Fichero fichero.js (JavaScript)

$(document).ready(function(){$("#elBoton").click(function(event){ //cuando se produce el evento click

var selectorEscrito = $("#elNombre").attr("value");if (selectorEscrito==""){alert("Escribe tu nombre")

}else{alert("tu nombre es " + selectorEscrito);

}});

});

TIPOS DE EVENTOS

jQuery dispone de tantas funciones como eventos estándar de JavaScript. El nombre decada función es el mismo que el del evento, sin el habitual prefijo“on”: focus(), blur(), keyup(),mouseover(), mouseup(), resize(), submit(), etc.



jQUERY 12

EVENTOS RELACIONADOS CON EL RATÓN click() Detecta el evento clic cuando se produce en un elemento de la

página.

dblclick() Detecta un evento cuando se produce un doble clic sobre un

elemento. hover() Esta función en realidad sirve para manejar dos eventos, cuando el

ratón entra y sale de encima de un elemento. Por tanto se debe enviar dosfuncioness en vez de una.

mousedown() Detecta un evento cuando el usuario hace clic en el momentoque presiona el botón e independientemente de si lo suelta o no. Sirve tantopara el botón derecho como el izquierdo del ratón.

mouseup() Detecta un evento cuando el usuario ha hecho clic y luego sueltaun botón del ratón. El evento mouseup se produce sólo en el momento desoltar el botón.

mouseenter() Detecta el evento se produce al situar el ratón encima de unelemento de la página.

mouseleave() Detecta un evento cuando el ratón sale de encima de unelemento de la página.

mousemove() Detecta el evento que se produce al mover el ratón sobre unelemento de la página.

mouseout() Detecta el evento que se desata cuando el usuario sale con elratón de la superficie de un elemento.

mouseover() Detecta el evento que se produce cuando el ratón está sobre unelemento, pero tiene como particularidad que puede producirse varias veces

mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido.

EVENTOS RELACIONADOS CON EL TECLADO keydown() Detecta el evento que se produce en el momento que se presiona

una tecla del teclado, independientemente de si se libera la presión o semantiene. Se produce una única vez en el momento exacto de la presión.

keypress() Detecta el evento que ocurre cuando se digita un carácter, o sepresiona otro tipo de tecla. Es como el evento keypress de Javascript, por loque se entiende que keypress() se ejecuta una vez, como respuesta a unapulsación e inmediata liberación de la tecla, o varias veces si se pulsa una

tecla y se mantiene pulsada. keyup()Detecta el evento que se produce en el momento de liberar una

tecla, es decir, al dejar de presionar una tecla que teníamos pulsada.

Nota: a través del objeto evento, que reciben las funciones que indiquemos comoparámetro de estos métodos, podemos saber qué tecla se está pulsando, aparte de otrasmuchas informaciones.

EVENTOS COMBINADOS TECLADO-RATÓN

blur() El evento blur se lanza sobre un elemento que acaba de perder el

foco. Normalmente este evento es aplicable a inputs de formularios.



jQUERY 13

focusin() Evento que se produce cuando el elemento gana el foco de laaplicación, que puede producirse al hacer clic sobre un elemento o alpresionar el tabulador y situar el foco en ese elemento.

focusout() Ocurre cuando el elemento pierde el foco de la aplicación, quepuede ocurrir cuando el foco está en ese elemento y pulsamos el tabulador,

o nos movemos a otro elemento con el ratón.

focus() Sirve para definir acciones cuando se produce el evento focus deJavascript, cuando el elemento gana el foco de la aplicación

OTROS EVENTOS resize() Este evento es lanza cuando se cambia el tamaño de la ventana.

Este evento sólo se envía al objeto window.

scroll() Este evento se envía a los elementos que cambian su scroll ante unaacción del usuario. Se aplica a los objetos window, frames y elementos conla propiedad overflow CSS puesta en estado “scroll”.

select() El evento select se lanza cuando el usuario selecciona un texto delelemento sobre el que se gestiona el evento. Este evento sólo se aplica a lostextarea y a los input de tipo texto.

submit() Este evento se lanza cuando un usuario está tratando de enviar unformulario. Este evento sólo es válido para formularios. Dependiendo delnavegador es posible enviar el formulario sin necesidad de pinchar en unbotón, simplemente pulsando la tecla ENTER. Cuando esto sucede elevento no se lanza, por lo que tenemos que prestar especial atención a estecomportamiento para gestionarlo en su correspondiente evento“keypressed ”.

toggle() El evento toggle se utiliza para generar comportamientos decambio de estado generados al pinchar sobre un elemento. Por ejemplo,puede interesarnos que al pinchar sobre un elemento se visualice y que alvolver a pinchar se oculte. Toggle nos permite hacer esto asociando dos omás funciones al mismo evento que se van ejecutando de forma secuencial.

La primera vez que se pincha sobre el elemento (y todas las veces impares), seejecuta la primera función y la segunda vez que se pincha el elemento (y todaslas veces pares) se ejecuta la segunda función:

$(document).ready(function(){$("p").toggle(function(){

alert("Me acabas de activar");},function(){

alert("Me acabas de desactivar");});

});

unload() El evento unload se lanza cuando un usuario navega fuera de lapágina web o se dirige hacia otra parte de la web. Se ejecuta siempre,incluso si el usuario cierra el navegador



jQUERY 14

DEFINIR/ELIMINAR EVENTOS: bind/unbind

BIND

El método bind () permite definir cualquier tipo de eventos y los enlaza con elcontrolador de evento que el programador desee.

Su sintaxis es la siguiente:

bind (tipo_evento, controlador_evento)tipo_evento: es el evento que se quiere enlazar con el objetocontrolador_evento: se corresponde con la función que hará de controlador para elevento definido.

A la hora de aplicar bind se deben seguir los siguientes pasos en el fichero jQUERY:

1. Definir los controladores de eventos como funciones y asignar cada controladora una variable que posteriormente va a ser referenciada.

2.

Aplicar el método bind y utilizar la variable creada en 1.Al final el código jQUERY quedaría como sigue:

//1. Definir el controlador de eventovar functionControlador=function(event){

if ($(this).css("color")=="#0000ff")$(this).css("color", "#ffff00");

else$(this).css("color", "blue");

};

$(document).ready(function(){//2. Utilizar bind para asignar eventos/controladores al element p$("p").bind("click mouseenter mouseleave", functionControlador);});

Ejemplo 1. Asignación de un evento a los elementos de una etiqueta

Página Web que muestra una ventana de alerta cuando se pulsa sobre alguno de lospárrafos de la misma (< p>)

Fichero HTML

<!DOCTYPE HTML>

<html><head>

<meta charset=utf-8"><script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero3.js" ></script><title>Ejercicio3_Eventos1</title>

</head>

<body><h1>PRIMER TÍTULO</h1>

<p>Este es el primer párrafo</p>

<h2>SEGUNDO TÍTULO</h2><p>Este es el segundo párrafo </p>



jQUERY 15

</body></html>

Fichero jQUERY: enlaza los párrafos <p> con el evento click y un controlador deevento que muestra un mensaje de alerta cuando se produce el evento.

$(document).ready(function(){$("p").bind("click", function(){alert("Has hecho clic");

});});

Ejemplo 2. Asignación de una función a varios eventos a la vez

Fichero jQUERY: enlaza los párrafos <p> con varios eventos (click, mouseenter,mouseleave) y un controlador único para todos ellos que hace que el contenido de lospárrafos cambie de color al producirse el evento correspondiente.

var functionControlador=function(event){if ($(this).css("color")=="#0000ff")$(this).css("color", "#ffff00");

else$(this).css("color", "blue");

};

$(document).ready(function(){$("p").bind("click mouseenter mouseleave", functionControlador);});

UNBINGSe puede utilizar unbind para eliminar un evento previamente asignado a uno o varioselementos.

Para eliminar todos los eventos asociados a un elemento

$(“elemento”).unbind();

Para eliminar un evento asociado a un elemento

$(“elemento”).unbind(“evento”);

OTRAS UTILIDADES

jQuery incluye muchas otras funciones para facilitar el desarrollo de las aplicacionesweb, entre otras:

Oculta todos los elementos de un formulario

$(miFormulario.elements).hide();

Devuelve "true" si el navegador es alguna versión de Internet Explorer

$.browser.msie

Devuelve "true" si el navegador es alguna versión de Safari

$.browser.safari



jQUERY 16

Añade la clase CSS a todos los elementos o la quita si ya la teníanestablecida

$("p").toggleClass("seleccionado");

MÉTODOStext()

Para saber el contenido de un elemento el objeto jQuery cuenta con un método llamado text(), que se puede utilizar para

Modificar el contenido de un elemento

$(“#miElemento”).text (“párrafo Nuevo”)

Obtener el contenido de un elemento

var contenido=$(“#miElemento”).text()

Ejemplo

La siguiente función jQUERY cambia el texto del párrafo que está en primera posicióncuando se pulsa dobleclick en cualquier párrafo de la Web, además muestra el contenidoanterior del párrafo en una ventana.

$(document).ready(function(){$("p").dblclick(function(){

var contenido=$("p:eq(1)").text()alert(contenido);$("p:eq(1)").text("nuevo texto");

})});

attr()/removeAttr

El método attr() permite agregar propiedades a un elemento HTML y recuperar el valorde su propiedad.

Recuperar el valor de la propiedad

$(elemento).attr(nombre_propiedad)

Dar valor a una propiedad

$(elemento).attr(nombre de propiedad,valor)

Eliminar una propiedad

$(elemento).removeAttr(nombre de propiedad)

Ejemplo 1

Esta página Web cambia el atributo del título del enlace al hacer clic sobre el primerpárrafo.

Fichero html




jQUERY 17

<meta charset="utf-8"><script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero4_color.js" ></script><title>Ejercicio3_Eventos1</title>

</head>

<body><h1>PRIMER TÍTULO</h1>

<p>Cambia el título</p><h2>SEGUNDO TÍTULO</h2>

<a href="http://www.google.com" title="Acceso a google"id="miEnlace">Google</a></p></body></html>

Fichero Jquery

$(document).ready(function(){$("p").click(function(){$("#miEnlace").attr("title","Pepe");

})});

Ejemplo 2

La página Web contiene botones que modifican los atributos de borde de la tabla

Fichero html

<!DOCTYPE HTML>

<html><head><meta charset="utf-8"><link rel="stylesheet" href="css/estilos3.css"><script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero4_attr.js" ></script><title>Ejercicio3_Eventos1</title>

</head>

<body><input type="button" id="boton1" value="Añadir propiedad

border"><br><input type="button" id="boton2" value="Recuperar valor de lapropiedad border"><br>

<input type="button" id="boton3" value="Eliminar la propiedadborder">

<table id="tabla1"><tr>

<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>

</tr><tr>

<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td></tr>



jQUERY 18

<tr><td>3333333333</td><td>3333333333</td><td>3333333333</td

><td>3333333333</td></tr>

</table>

</body></html>

Fichero Jquery

$(document).ready(inicializarEventos);

function inicializarEventos(){$("#boton1").click(agregarPropiedadBorder);$("#boton2").click(recuperarPropiedadBorder);$("#boton3").click(eliminarPropiedadBorder);}

function agregarPropiedadBorder(){$("#tabla1").attr("border","1");}

function recuperarPropiedadBorder(){var x=$("#tabla1");if (x.attr("border")!=undefined)alert(x.attr("border"));

elsealert("No está definida la propiedad border en la tabla");}

function eliminarPropiedadBorder(){$("#tabla1").removeAttr("border");}

addClass/removeClass

Los métodos addClass y removeClass nos permiten asociar y desasociar una clase a unelemento o conjunto de elementos HTML.

Añadir una clase CSS a un elemento.

$(elemento).addClass( “nombre _clase” )

Eliminar una clase CSS de un elemento

$(elemento).removeClass(“nombre_clase”)

Ejemplo

El siguiente ejemplo muestra dos botones que permiten enlazar y eliminar una claseCSS de un elemento respectivamente.

Fichero HTML


<meta charset="utf-8"><link rel="stylesheet" href="css/estilos1.css">

<script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero4_addClass.js" ></script>



jQUERY 19

<title>Ejercicio4_addClass</title></head><body>

<h1>Ejemplo de cambio de estilos</h1><input type="button" id="elBotonA" value="Añdir clase">

<input type="button" id="elBotonE" value="Eliminar clase"></body></html>

Fichero JavaScript


function inicializarEventos(){$("#elBotonE").click(desasociarClase);$("#elBotonA").click(asociarClase);}

function asociarClase(){var x=$("h1");x.addClass("azul");}

function desasociarClase(){var x=$("h1");x.removeClass("azul");}

Fichero de estilos

.azul{color: #0000cc;

html()

Es posible agregar bloques de código HTML a partir de un elemento de la página. estapropiedad es básicamente = innerHTML del DOM.

Para agregar un bloque HMTL

$(elemento).html(bloque_HTML)

Para obtener el bloque HTML contenido a partir del elemento que hacereferencia el objeto jQuery.

$(elemento).html()

Ejemplo

Hay un botón para modificar el contenido del formulario y otro para ver su contenido

Fichero HTML


<meta charset="utf-8"><link rel="stylesheet" href="css/estilos1.css"><script src="js/jquery-1.5.1.min.js" ></script>

<script src="js/fichero4_html.js" ></script><title>Ejercicio4_html</title>



jQUERY 20

</head><body>

<input type="button" id="boton1" value="Mostrar formulario"><input type="button" id="boton2" value="Mostrar elementoshtml del formulario"><br>

<div id="formulario"></div></body></html>

Fichero JavaScript


function inicializarEventos(){$("#boton1").click(presionBoton1);$("#boton2").click(presionBoton2);}

function presionBoton1(){var x;x=$("#formulario");x.html("<form>Ingrese nombre:<input type='text' id='nombre'>

<br>Introduzca clave:<input type='text' id='clave'> <br> <inputtype='submit' value='confirmar'></form>"); }

function presionBoton2(){$("#formulario"). alert (x.html());

}

css()

jQuery también permite añadir nuevas propiedades CSS a los elementos de una formasencilla utilizando el método siguiente:

$(elemento).css ( “propiedadCSS” , “valor” )

Ejemplos//Añade un ancho a todas las etiquetas p$(“p”).css(“width”,”400px”) //Asigna el color azul a los textos de id indicado$(“#miElemento”).css(“color”,”blue”) //Añade un borde a todas las listas$(“ul”).css(“border”, “solid 1px “) //Obtiene el valor de la propiedad "color" de CSS del los párrafos de la página$("p").css("color");//Establece varias propiedades CSS de un elemento$("# miElemento ").css({ color: "red", background: "blue", font-weight:"bold" });

append / prepend

jQuery nos permite añadir contenido HTML al final de otro ya existente



jQUERY 21

$(elemento).append(contenidoHTML)

También podemos añadir contenido al principio

$(elemento).prepend(contenidoHTML)

Ejemplos//Añadir un texto y unas etiquetas HTML al elemento con id=”miElemento”. $(“#miElemento”).append(“<p>Nuevo contenido de miElemento</p>”) //Para añadir un elemento al final de la lista$("ul").append("<li>otro item al final</li>");//Para añadir un elemento al principio de la lista$("ul").prepend("<li>otro item al principio</li>");

ITERADOR each

jQuery dispone de un método que nos permite asociar una función que se ejecutará porcada elemento que contenga la lista de elemento.

Dentro de esta función podemos manipular el elemento actual.

La sintaxis del each es:

$(elementos).each(nombre de función)

Ejemplo

Resaltar con fondo amarillo todos los párrafos que tienen menos de 50 caracteres.

Fichero HTML


<meta charset="utf-8"><link rel="stylesheet" href="css/estilos4.css"/><script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero5_each.js" ></script><title>Uso de each</title>

</head>

<body><div id="parrafos"><p>La memoria es como el mal amigo; cuando más falta te hace, te

falla.</p><p>Más rápido se coge al mentiroso que al cojo.</p><p>Cuando los que mandan pierden la vergüenza, los que

obedecen pierden el respeto.</p><p>En todas las tierras el sol sale al amanecer.</p>

</div></body></html>

Fichero JavaScript




jQUERY 22

function inicializarEventos(){$("#parrafos p").each(resaltarParrafos);}

function resaltarParrafos(){

var x=$(this);if (x.text().length<50)x.css("background-color","#ff0");}

EFECTOS VISUALES

Todas las aplicaciones web modernas incorporan pequeños efectos visualesy animaciones que, si se utilizan de forma adecuada, mejoran la interacción con laaplicación y su usabilidad. jQuery incluye de serie los efectos visuales más utilizadospor los diseñadores, pudiendo controlar mediante sus opciones la duración de cada

efecto.

hide/show | slow/fast

jQuery permite manejar los efectos visuales de un página Web utilizando, entre otros,los métodos hide (ocultar) y show (mostrar). Estos métodos ya los hemos visto, pero eneste apartado vamos a ver cómo lograr ocultar y mostrar información a distintasvelocidades.

Muestra un elemento de forma normal (normal), rápìda ( fast ) o lenta (slow), también sepuede indicar los milisegundos de la acción. También es posible indicar una funciónpara que se ejecute al finalizar el efecto visual.

$(elemento).show([“fast”/”slow”/“normal” /milisegundos],[function])

Para que se muestre de forma instantánea se omite cualquier parámetro

Los parámetros funcionan de forma equivalente con hide (ocultar)

$(elemento).hide([“fast”/”slow”/“normal” /milisegundos],,[function])

Ejemplo

Este efecto lo vamos a ver con un ejemplo que muestra un recuadro con texto ymediante el uso de dos botones podremos hacer que se oculte lentamente le cuadro o

que se muestra rápidamente.Fichero HTML


<meta charset="utf-8"><link rel="stylesheet" href="css/estilos4.css"/><script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero4_show_hide.js" ></script><title>Mostar/Ocultar rápidamente/suavemente</title>

</head><body>

http://www.maestrosdelweb.com/editorial/flash3d/

http://www.maestrosdelweb.com/editorial/tecnicas-ajax-mejorado-usabilidad-sitio-ejemplos-implementarlas/

http://www.maestrosdelweb.com/editorial/tecnicas-ajax-mejorado-usabilidad-sitio-ejemplos-implementarlas/

http://www.maestrosdelweb.com/editorial/flash3d/



jQUERY 23

<input type="button" id="boton1" value="Ocultar recuadro"><input type="button" id="boton2" value="Mostrar recuadro"><div id="descripcion" class="recuadro">

<p>HTML5 es una nueva e innovadora técnología para la craeciónde páginas Web

</p></div></body></html>

Fichero JavaScript


function inicializarEventos(){$("#boton1").click(ocultarRecuadro);$("#boton2").click(mostrarRecuadro);}

function ocultarRecuadro(){$("#descripcion").hide("slow");}

function mostrarRecuadro(){$("#descripcion").show("fast");}

Fichero CSS

.recuadro {background-color:#ffffcc;font-family:verdana;font-size:14px;

border-top-width:1px;border-right-width:3px;border-bottom-width:3px;border-left-width:1px;

border-top-style:dotted;border-right-style:solid;border-bottom-style:solid;border-left-style:dotted;

border-top-color:#ffaa00;border-right-color:#ff0000;border-bottom-color:#ff0000;border-left-color:#ffaa00;

}

fadeIn / fadeOut / fadeTo

Estos métodos provocan también que un elemento se muestre ( fadein) o se oculte( fadeout ) pero actúa sobre la transparencia de los objetos.

La sintaxis y los atributos son equivalentes a los métodos show/hide$(elemento).fadeIn([“fast”/”slow”/“normal”/milisegundos],[function])



jQUERY 24

$(elemento).fadeOut([“fast”/”slow”/“normal”/milisegundos],[function])

Ejemplo

Con el mismo código HTML del ejemplo anterior pero utilizando el siguiente ficheroJavaScript conseguimos el efecto de ocultar y mostrar el cuadro actuando sobre laopacidad del mismo.


function inicializarEventos(){$("#boton1").click(ocultarRecuadro);$("#boton2").click(mostrarRecuadro);}

function ocultarRecuadro(){$("#descripcion").fadeOut("slow");}

function mostrarRecuadro(){$("#descripcion").fadeIn("fast");}

El método fadeTo puede modificar la opacidad de un elemento hasta un valordeterminado que se pasa por parámetro.

Podemos inicializar este método de las siguientes formas:

fadeTo([velocidad],[valor de opacidad])

Indicamos la velocidad de transición del estado actual al nuevo estado(slow/normal/fast) o un valor indicado en milisegúndos.

El valor de la opacidad es un número real entre 0 (transparente) y 1(opaco)

También podemos llamar al método fadeTo con tres parámetros:

$(elemento).fadeTo([velocidad],[valor de opacidad],[función])

Esta segunda estructura de la función permite ejecutar una función cuando finaliza latransición.

Hay que tener en cuenta que fadeTo por más que indiquemos el valor 0 en opacidad elespacio que ocupa el elemento en la página seguirá ocupado por un recuadro vacío.

Ejemplo

Realizaremos un ejemplo que permitirá reducir y aumentar la opacidad de un cuadro pormedio de clic a dos botones-

Fichero HTML


<meta charset="utf-8"><link rel="stylesheet" href="css/estilos4.css"/><script src="js/jquery-1.5.1.min.js" ></script>

<script src="js/fichero4_fadeTo.js" ></script><title>Mostar/Ocultar utilizando la opacidad</title></head>



jQUERY 25

<body><input type="button" id="boton1" value="Reducir opacidad"><input type="button" id="boton2" value="Aumentar opacidado"><div id="descripcion" class="recuadro">

<p>HTML5 es una nueva e innovadora técnología para la craeciónde páginas Web</p>


Fichero JavaScript


function inicializarEventos(){

$("#boton1").click(reducirOpacidad);$("#boton2").click(aumentarOpacidad);}

function reducirOpacidad(){$("#descripcion").fadeTo("fast",0.5);}

function aumentarOpacidad(){$("#descripcion").fadeTo("slow",1);}

Comprobar si un element es visible

A veces puede ser necesario saber si un elemento está visible o no y para ello podemosutilizar el método is pasándole como parámetro la función hidden (oculto) o visible (visible)

//devuelve true si está oculto$(elemento).is(“:hidden”) //devuelve true si está visible$(elemento).is(“:visible”)

toggle()

Ya hemos visto el método toggle para alternar la ejecución de dos funciones, pero en

este apartado lo veremos para intercambiar la visibilidad de un elemento.

El método toggle permite ocultar un elemento si éste está visible y mostrarlo si estáoculto.

$(elemento).toggle([“fast”/”slow”/“normal”/milisegundos],[function])

Ejemplo

Veremos el funcionamiento de toogle en una página Web que presenta un botón quemuestra/oculta un cuadro, a la vez también cambia el texto del botón según el estado delcuadro.

Fichero HTML

<!DOCTYPE HTML>



jQUERY 26

<html><head>

<meta charset="utf-8"><link rel="stylesheet" href="css/estilos4.css"/><script src="js/jquery-1.5.1.min.js" ></script>

<script src="js/fichero4_toggle.js" ></script><title>Mostar/Ocultar utilizando la opacidad</title></head>

<body><input type="button" id="boton1" value="Ocultar"><div id="descripcion" class="recuadro">

<p>HTML5 es una nueva e innovadora técnología para la craeciónde páginas Web

</p></div>

</body></html>

Fichero JavaScript


function inicializarEventos(){$("#boton1").click(modificarVisibilidad);}

function modificarVisibilidad(){$("#descripcion").toggle("slow",cambiarBoton);}

function cambiarBoton(){if ($("#descripcion").is(":hidden") == true)

$("#boton1").attr("value","Mostrar");else

$("#boton1").attr("value","Ocultar");}

animate

El método animate permite realizar animaciones personalizadas. Su sintaxis es lasiguiente:

$(elemento).animate({propiedades},[duracin],[f_animación],[callback])Donde:

propiedades, es el único parámetro obligatorio y se utiliza para indicar queatributos CSS se quieren actualizar con nuevos valores. JQuery sólo permiteel cambio de propiedades CSS que tengan valores numéricos. Por ejemplopodríamos cambiar el tamaño de la letra pero no su fuente. La medida pordefecto es la de píxeles. Los nuevos valores se deben indicar de formaabsoluta o de forma relativa utilizando la notación “+=nº” p “+=nº”

duración, indica la duración de la animación en milisegundos o un valoridentificativo de la velocidad (normal, fast o slow).



jQUERY 27

función de animación, es una función que contiene las instrucciones queindican cómo se realizará la animación, tiene dos posibles valores swing (por defecto) y linear .

callback, este parámetro permite ejecutar una función cuando finaliza laanimación.

Ejemplo

Veremos el funcionamiento de animate en una página Web que presenta un botón querealiza la animación de un cuadro de texto.

Fichero HTML


<meta charset="utf-8">

<link rel="stylesheet" href="css/estilos4.css"/><script src="js/jquery-1.5.1.min.js" ></script><script src="js/fichero4_animate.js" ></script><title>Uso de animate</title>

</head>

<body><input type="button" id="boton1" value="Animar"><div id="descripcion" class="recuadro" >

<p>HTML5 es una nueva e innovadora técnología para la creaciónde páginas Web

</p></div></body></html>

Fichero JavaScript


function inicializarEventos(){$("#boton1").click(hacerAnimacion);}

function hacerAnimacion(){$("#descripcion").animate({'border-bottom-width': "20",'font-size': '25pt'});}

http://www.w3schools.com/jquery/jquery_effects.asp

PRÁCTICA: MENÚ DESPLEGABLE

Fichero HTML


<meta charset="utf-8">






jQUERY 28

<link rel="stylesheet" href="estilos_menuDesplegable.css"/><script src="../js/jquery-1.5.1.min.js" ></script><script src="jquery_menuDesplegable.js" ></script><title>Uso de animate</title>

</head>

<body><div id="menu">

<ul><li><a href="http://www.google.com.ar">Google</a></li><li><a class="imagen" href="#">Periódicos</a>

<ul><li><a href="http://www.lavozdegalicia.es">La Voz de

Galicia</A></li><li><a href="http://www.farodevigo.es">El Faro de

Vigo</A></li>

</ul></li><li><a class="imagen" href="#">Televisiones</a>

<ul><li><a href="http://www.rtve.es">Televisión

española</a></li><li><a href="http://www.cuatro.com">Cuatro</a></li>

</ul></li><li><a href="http://www.msn.com">MSN</a></li>

</ul>


Fichero CSS

#menu {font-family: Arial;margin:0px;padding:0px;}

#menu ul {margin:0px;padding:0px;list-style-type:none;}

#menu a {display: block;padding: 3px;width: 160px;background-color: #f7f8e8;border-bottom: 1px solid #eee;

text-align:center;}



jQUERY 29

.imagen {background-image:url(imagenes/triangulo.gif);background-position:top left;background-repeat:no-repeat;}

#menu a:link, #menu a:visited {color: #f00;text-decoration: none;}

#menu a:hover {background-color: #369;color: #fff;}

#menu li ul li a{display: block;

padding: 3px;width: 160px;background-color: #ffa;border-bottom: 1px solid #eee;text-align:center;}

ul li ul a:link, ul li ul a:visited {color: #000;text-decoration: none;}

ul li ul a:hover {

background-color: #369;color: #fff;}

Fichero JavaScript

$(document).ready(function() {$("#menu").children().children("li").each(function () {if ($(this).find("ul").size()!=0)

$(this).find("ul").hide();});

$("a").click(function(e) {if ($(this).parent().find("ul").size()!=0){if ($(this).parent().find("ul").css("display")=="none")$(this).parent().find("ul").show();

else$(this).parent().find("ul").hide();

}})

})



jQUERY 30



ANEXO 31

ANEXO

OPERACIONES HABITUALES

1. Agregar una clase CSS a un elemento específico.

$('#elemento').addClass('clase');

2. Quitar una clase CSS de un elemento específico.

$('#elemento'). removeClass('clase');

3. Comprobar si un elemento tiene una clase CSS asignada.

$(id).hasClass(clase)

4. Reemplazar una hoja de estilo (CSS) con jQuery.

$('link[media='screen']').attr('href', 'nueva_hoja.css');

5. Añadir HTML a un elemento específico.

$('#id-del-elementp').append('codigo HTML aquí');

6. Verificar si existe o no un elemento.

if ($('img').length) {log('Se encontraron elementos en la página usando "img"');

} else {log('No se encontraron elementos img');

}

7. Conocer el elemento padre de otro elemento.

var id = $("button").closest("div").attr("id");

8. Obtener los elementos primos de un elemento.

$("div").siblings()

9. Remover un elemento de una lista desplegable.

$("#selectList option[value='2']").remove();

10. Obtener el texto de un elemento seleccionado.

$('#selectList :selected').text();

http://tecnokun.org/manipulando-el-dom-con-jquery-10-ejemplos-practicos/










FUENTES 32

FUENTES

http://api.jquery.com/toggle/ jQuery API

http://www.maestrosdelweb.com/editorial/javascript-facil-y-rapido-con-jquery/

JavaScript fácil y rápido con jQueryhttp://tecnokun.org/manipulando-el-dom-con-jquery-10-ejemplos-practicos/ Manipulando DOM con jQuery: 10+ejemplos prácticos

http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/ Curso de jQuery:Selectores

http://parasitovirtual.wordpress.com/category/cursos-y-articulos/desarrollo-de-webs/javascript/jquery/ JQuery: El rincón de un parásito virtual

http://www.javascriptya.com.ar/jquery/index.php?inicio=18 jQuery ya!

http://api.jquery.com/toggle/








http://parasitovirtual.wordpress.com/category/cursos-y-articulos/desarrollo-de-webs/javascript/jquery/



http://www.javascriptya.com.ar/jquery/index.php?inicio=18









jquery_apuntes

Documents