UF1. NF2. JQUERY M2.UF1.NF1 CGA 1/22

(1)

UF1. NF2. JQUERY

Índex

1.Què és jQuery?...2

1.1.Historia... 2

1.2.Utilizar jQuery...3

1.3.jQuery al cargar la web...4

1.4.Funciones... 5

1.5.Eventos... 6

1.6.Selectores y principios de uso...7

2.Acceso a los elementos HTML...8

2.1.Modificar y leer contenido HTML...9

2.2.Modificar y leer contenido de tipo text...10

2.3.Modificar y leer los atributos...12

2.4.Mover elementos HTML...13

2.5.Añadir y eliminar elementos HTML...14

2.6.Copiar elementos HTML...15

2.7.Práctica...16

3.Acceso a los estilos CSS...17

3.1.Obtenir i establir propietats...17

3.2.Establecer y eliminar estilos...19

(2)

1. Què és jQuery?

jQuery es un framework de JavaScript, es decir, una librería compuesta por cientos de métodos JavaScript que realizan funciones útiles y muy potentes.

El uso de jQuery librera al programador de tener que implementar los métodos JavaScript que el framework contiene. Entre otras facilidades, jQuery tiene implementados todos métodos para detectar el navegador del usuario y adaptar las funciones a cada uno de ellos.

Con jQuery es posible realizar y simplificar la manipulación de objetos y eventos de la página Web debido a las funcionalidades que nos ofrece, entre las que se encuentran:

• Permite una interacción completa con el documento HTML utilizando el árbol DOM de objetos.

• Provee de un mecanismo para la captura de eventos.

• Ahorra muchas líneas de código.

• Permite manipular las hojas de estilo CSS.

• Aporta un conjunto de funciones para animar el contenido de la página de forma muy sencilla.

• Integra funcionalidades para trabajar con AJAX.

• Facilita la compatibilidad entre de las funciones entre los distintos navegadores, etc. Ejemplos jQuery: http://www.webdesignerwall.com/demo/jquery/

Entre los sitios Web que utilizando jQuery podemos destacar los siguientes gestores de contenidos (CMS o Content Management System)

• DoNetNuKe: es un gestor de contenidos Web Open Source basado en .NET.

• Wordpress: es un gestor de contenidos que se utiliza para crear blogs.

• Drupal: es otro gestor de contenido modular multipropósito que permite muchos tipos de archivos y utilizar servicios de valor añadido a foros, encuestas, blogs, etc.

• Wordpress: es un gestor de contenidos para sitios dinámicos que permite crear sitios Web y facilita su administración en línea.

1.1. Historia

La primera versión de jQuery estable apareció en el año 2006 y fue presentada en el BarCamp NYC, desde entonces se puede acceder al contenido de su código en la URL.

jQuery es software libre y de código abierto creado inicialmente por John Resig. El hecho de que sea código abierto permite a los desarrolladores acceder a su código original y participar en el desarrollo de la librería, además por ser software libre está disponible para su utilización gratuita en cualquier Web.

Existe la posibilidad de participar en numerosos foros relacionados con jQuery para iniciarse en el uso del framework, para conocer aplicaciones avanzadas, para participar en el desarrollo, etc.

(3)

sus aplicaciones se puede acceder a la web en español o en inglés.

jQuery está evolucionando muy rápidamente ya que muchos desarrolladores invierten su tiempo en ampliar y mejorar su código. Este intenso trabajo da lugar a la aparición de nuevas versiones de forma periódica.

Actualmente, jQuery es la librería más utilizada en la Web e importantes empresas como Microsoft han apostado por su uso. Microsoft incluye en los proyectos realizados con Visual Studio 2010 la librería jQuery de forma automática cuando se desarrollan proyectos Web.

jQuery está en constante crecimiento y su adaptación a las nuevas tecnologías es prácticamente inmediata, hoy en día gran parte del esfuerzo de los desarrolladores se está centrando en la Web móvil llamada jQuery Mobile Framework. La versión jQuery para móviles está adaptada a HTML5 y tiene como objetivo lograr que Internet proporcione abundante información adaptada a estos soportes. El rápido desarrollo y aceptación de jQuery Mobile Framework convierte a jQuery en un framework actual y con mucho futuro.

1.2. Utilizar jQuery

Para utilizar la librería es necesario hacer una descarga del fichero correspondiente del sitio oficial. Se puede descargar una versión comprimida o una descomprimida que ocupa 229 KB y se corresponde con el archivo jquery-<version>.min.js.

El archivo debe ser almacenado en el servidor Web con el objetivo de estar disponible para todas las webs que así lo requieran. En cada página Web donde ser utilice jQuery es necesario introducir una línea como la siguiente en el bloque <head> :

Se debe que tener en cuenta que es necesario complementar la referencia al fichero con la ruta relativa del framework respecto a nuestro documento Web. Por ejemplo, si la librería jQuery reside en la carpeta httpdocs/js y la página Web donde se utiliza (index.html) está en httpdocs la llamada al fichero jQuery quedaría como se muestra a continuación:

Cuando ya está referenciada la librería jQuery en una página Web, entonces es posible utilizar código jQuery. Existen dos formas de utilizar instrucciones jQuery en una Web:

• Introduciendo las instrucciones jQuery en un fichero con extensión js

• Introduciendo las instrucciones jQuery entre las etiquetas <script> y </script> del bloque

head de la página Web.

A continuación se muestra una plantilla de una página Web indicando el lugar donde se debe introducir la llamada a la librería jQuery, la referencia a un fichero con órdenes jQuery y las instrucciones jQuery que podemos añadir directamente en la página Web.

(4)

En la plantilla se ha considerado que tanto el framework jQuery como el fichero con instrucciones residen en la carpeta js, que está dentro de httpdocs, que es el lugar donde está la plantilla del documento Web.

1.3. jQuery al cargar la web

Cuando en JavaScritp se requiere de que una función se ejecute una vez que la página se haya cargado se utiliza la siguiente sintaxis:

window.onload = function() {…/*órdenes JavaScript*/…}

jQuery dispone de una función característica para referenciar los elementos de la página Web. Esta función es $(), que puede recibir como parámetro, entre otros, un elemento del DOM, un selector CSS o el nombre de una etiqueta HTML y devuelve todos los elementos que concuerdan con la expresión. Así, para implementar el código que permite ejecutar una función al cargar la página jQuery utiliza la siguiente sintaxis:

$(document).ready(function(){…/*órdenes jQuery/JavaScript*/…})

La gran ventaja de la función de jQuery, es que la página se puede manipular en cuanto se ha cargado su código HTML (y por tanto, se ha construido el árbol DOM de la página) mientras que la función de JavaScript espera a que se carguen todos los elementos de la página, incluyendo todas las imágenes. De esta forma, las aplicaciones realizadas con jQuery pueden responder de forma mucho más rápida que las aplicaciones JavaScript tradicionales.

Ejemplo

El ejemplo que se va a realizar tiene como objetivo mostrar una ventana de bienvenida al cargar la página Web.

Los códigos de los ficheros a utilizar se muestran a continuación

Practica1.html <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8"> <title>Practica1</title>

<!—Llamada a la librería jquery que se supone almacenada en la misma carpeta que este documento html-->

<!—Llamada al fichero donde está el código jQuery para este documento--> <script src="js/Funciones.js" ></script>

</head> <body> <h1> Comenzando...</h1> </body> </html> Funciones.js $(document).ready(function(){

(5)

alert("Bienvenid@ a mi página"); });

Se ha utilizado la orden JavaScript alert(“mensaje”) que muestra un cuadro de diálogo con el mensaje indicado.

Navegador

1.4. Funciones

En principio, la sintaxis que se utiliza para declarar y llamar a una función es la misma que en JavaScript.

El ejemplo visto en el apartado anterior va a ser útil para analizar el comportamiento de las funciones en jQuery.

$(document).ready(function(){

alert("Bienvenid@ a mi página"); });

Si analizamos exhaustivamente el código:

• $(document) se refiere al objeto document que es el nodo raíz del árbol DOM.

• .ready hace referencia al evento que se produce al cargar el DOM del documento Web. Las instrucciones que se deben ejecutar cuando se produce el evento las encierra entre paréntesis ().

• function() es la función que se ejecutará al producirse el evento ready de document. Las instrucciones que contiene están delimitadas por una llave abierta { y otra cerrada }.

• alert (“Bienvedid@ a mi página”); Esta instrucción está dentro de la función que se ejecuta al cargar el documento. Es una instrucción JavaScript.

El código analizado se podría haber escrito de la siguiente forma:

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

alert(“Bienvendid@ a mi página”); }

(6)

Donde:

• $(document).ready(fBienvenida); indica que se llamará a la función fBienvenida al producirse el evento ready sobre el objeto document.

• function jBienvenida() {alert(“….”);} es la declaración de la función fBienvenida. Como hemos visto la declaración y la llamada a la función siguen la misma sintaxis que JavaScript, pero se producen en un entorno jQuery.

1.5. Eventos

Un evento (event) es un suceso que ocurre debido a la intervención del usuario (hacer un click, mover el cursor, cerrar una ventana, etc.) o el entorno de ejecución de un programa (cargar la página web, etc.).

A continuación se muestra algunos ejemplos de eventos:

Evento Cuando se produce

click Cuando se pulsa con el botón derecho un objeto

focus Cuando el foco está sobre el objeto

blur Cuando el foco abandona el objeto

change Cuando se modifica el contenido del objeto

resize Cuando se modifica el tamaño de la ventana

Es posible enlazar un evento con la ejecución de una función, en este caso la función es denominada controlador de evento (event handler). Cuando un evento ocurre, su controlador de eventos se ejecuta.

La sintaxis a utilizar para enlazar un objeto con un evento y un controlador de evento es la siguiente:

selector.evento(controlador de evento)

Las instrucciones jQuery deben estar incluidas o ser llamadas desde el manejador de eventos $(document).ready.

$(document).ready(function() {

/*instrucciones o llamadas a funciones*/ }

Ejemplo:

Comprueba que al hacer clic sobre el texto se muestra el cuadro de diálogo correspondiente: $(“h1”).click (function(){alert(“Se ha hecho clic sobre un elemento h1”);})

Recuerda introducir la instrucción de este ejercicio dentro del controlador de eventos de

(7)

En jQuery, como en JavaScript, se puede utilizar indistintamente la comilla simple (‘) y la comilla doble (“). Se debe tener en cuenta que, en el caso de ser necesario poner comillas dentro de comillas, las comillas simples y la dobles se deben intercalar.

Correcto Incorrecto

alert(“$(‘#noticia’).addClass(‘parrafo1’)”) alert(“$(“#noticia”).addClass(“parrafo1”)”) alert(‘$(“#noticia”).addClass(“parrafo1”)’) alert(‘$(‘#noticia’).addClass(‘parrafo1’)’)

Ejercicio: Accede a la web http://www.creativosonline.org/blog/20-efectos-de-jquery-brillantes.html para conocer distintos efectos que se pueden lograr utilizando jQuery.

1.6. Selectores y principios de uso

La gran potencia de jQuery está determinada por su amplia capacidad de acceso a distintos elementos de la Web. La biblioteca soporta gran parte de los selectores de CSS3 y varios más no estandarizados.

Para ver una muestra de los selectores básicos se exponen algunos ejemplos en la siguiente tabla.

Función Elementos que devuelve

$("#cabecera") Devuelve el elemento HTML con id="cabecera"

$(".destacado") Devolverá un array de elementos HTML con class="destacado” $("div") Devuelve un array con todos los bloques div de HTML

$("p.viajes a") Devuelve un array con todos los enlaces (_{que pertenecen a la clase viajes} a) que hay dentro de los párrafos (p)

Una vez obtenidos los elementos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca, por ejemplo:

Código $(".destacado").removeClass("destacado").addClass("nodestacado");

Funcionamiento

Con la expresión $(".destacado") se seleccionan todos los elementos HTML que contengan el atributo class=”destacado”. En todos los elementos seleccionados se deja de aplicar la regla de estilo .destacado (removeClass()) y en su lugar se aplica la regla .nodestacado (addClass())

Aún sin comprender bien las instrucciones jQuery, podemos probar el ejemplo que se expone a continuación. Para analizar su funcionamiento es necesario crear un documento web y pulsar el botón que se muestra en el navegador. Entonces veremos como cambia el color del texto debido a la modificación de la regla de estilo que se aplica sobre el bloque <div class=”destacado”>

<!DOCTYPE HTML> <html>

<head>

<title>Documento sin título</title>

<!—Llamada a la librería jquery que se supone almacenada en la misma carpeta que este documento html-->

(8)

<!—Código query--> <script>

$(document).ready(function(){ //se ejecuta cuando se carga el documento $("#elBoton").click(function (event){

//se ejecuta al hacer click sobre el botón

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

})

</script>

<!—Hoja de estilos interna--> <style> .destacado {color:red;} .nodestacado {color:black;} </style> </head> <body> <div class="destacado">

Este es el verso del inicio… </div>

</html>

El efecto se puede ver en la siguiente imagen:

2. Acceso a los elementos HTML

jQuery ayuda a los desarrolladores a manipular cualquiera de los componentes de una página Web, para ello ofrece mecanismos sencillos y rápidos de acceso a todos los elementos HTML para consultar o modificar cualquiera de sus características.

Existen muchos motivos por los cuales se puede requerir la modificación o lectura de las características de un elemento HMTL, por ejemplo, para modificar o leer el contenido de sus atributos.

También existen funciones para mover, copiar y eliminar elementos HTML, esto permite modificar la estructura y el contenido de una página Web mientras se está mostrando en el navegador.

El dinamismo que puede aportar jQuery no se limita a modificar los elementos existentes, también posee funciones que permiten crear nuevos elementos, alcanzando con esta característica la potencia para crear contenidos y elementos on-line.

Existen nuevos eventos y nuevos selectores:

Evento Descripción

hover (funcion1, funcion2)

Detecta el evento que se produce cuando el ratón entra o sale de un objeto. Este evento admite dos funciones, la primera se activa cuando el evento mouseenter sucede y la segunda cuando lo hace le evento mouseleave.

(9)

Evento Descripción

de un elemento de la página.

Selector Descripción

elemento:nth-child(n)

Selecciona el elemento indicado que es el enésimo hijo de su padre

elemento:first-child Selecciona el elemento indicado que es el primer hijo _{de su padre} elemento:last-child Selecciona el elemento indicado que es el último hijo _{de su padre}

elemento:only-child

Selecciona el elemento indicado que es hijo único de su padre, si el elemento tiene algún hermano en el árbol DOM no se selecciona.

2.1. Modificar y leer contenido HTML

El método html() permite leer o modificar el contenido de un elemento HTML como se describe en la siguiente tabla.

Descripción Sintaxis Ejemplo

Leer el contenido html de un

elemento html()

Mostrar (leer) el contenido html del elemento con id=”noticia”

alert($(“#noticia”).html()

Modificar el contenido html de

un elemento html()

Modificar el contenido HTML del elemento con id=”noticia”

$(“#noticia”).html(“Esta es la nueva noticia”). El contenido html no puede tener saltos de línea

Una característica opcional de los navegadores es la ejecución de código JavaScript por lo que es posible que existan usuarios que no tengan acceso a dichas características. Debido a esta circunstancia se debe tener cuidado al incluir instrucciones que creen nuevos elementos HMTL de forma on-line ya que es posible que no puedan ejecutarse.

El siguiente ejemplo crea unos campos de formulario u otros en función del botón pulsado (Acceder o Subscripción). Por otro lado, el botón con el texto “Ver” muestra el contenido actual del formulario. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Practica html()</title>

<!—Llamada al fichero donde está el código jQuery para este documento-->

(10)

<body>

</form> </body> </html>

Código del fichero Ejemplo_html.js

//Definición de detectores y enlace con sus controladores de evento $("#acceder").click(ParaAcceder);

$("#subscribir").click(ParaSubscribirse); $("#ver").click(ParaVer);

})

//Controlador para el evento click del botón con id=”acceder” function ParaAcceder(){ //Añade campos al formulario

$("#formulario").html("Login<input type='text'><br>Contraseña<input type='password'><br><input type='submit' value='Enviar'>");

}

//Controlador para el evento click del botón con id=”subscribir” function ParaSubscribirse(){ //Añade campos al formulario

$("#formulario").html(

"Nombre<input type='text' id='nombre'><br> Apellidos<input type='text' id='apellidos'><br>

Login<input type='text'><br>Clave<input type='password'><br> Repita la clave <input type='password'><br>

<input type='submit' value='Enviar'>"); }

//Controlador para el evento click del botón con id=”ver”

function ParaVer(){ //Muestra el contenido actual del bloque form alert($("#formulario").html());

}

2.2. Modificar y leer contenido de tipo text

A diferencia del método html(), el método text() permite leer y modificar el contenido de tipo texto de un elemento, como se puede ver a continuación:

Leer el contenido de tipo

texto de un elemento text()

Mostrar (leer) el contenido del elemento con class="nombre"

alert($(".nombre").text()) Modificar el contenido de

tipo texto de un elemento text ("nuevo texto")

Modificar el contenido de tipo texto del elemento con id="apellidos"

$("#apellidos").text("Pereira Castaño")

Cuando se aplica una función jQuery sobre un comando $("selector") que ha devuelto un array de elementos, debemos tener en cuenta que la función sólo actúa sobre el primero de ellos.

Por ejemplo, la instrucción $("div").html() muestra el contenido HTML de la primera etiqueta div del bloque body.

(11)

sobre cualquiera de ellas. Cabe destacar el uso del evento hover(funcion1 y funcion2) que ejecuta una función cuando el ratón entra en la zona del elemento seleccionado (funcion1) y cuando el ratón sale de la misma zona (funcion2).

<head>

<title>Practica text()</title>

//Definición de detectores de eventos y enlace con sus correspondientes //controladores de evento

$("ul").hover(CambiarLista , CambiarLista2); })

//Controlador para el evento hover de la lista que se ejecuta cuando se //produce el evento mouseenter sobre los elementos ul.

function CambiarLista(){

//Modifica los elementos de la lista

//Modifica el primer elemento li de las dos listas $("li:first-child").text("Opción 1");

//Modifica el segundo elemento li de la primera lista $("li:nth-child(2)").text("Opción 2");

//Modifica el último elemento li de la primera lista $("li:last-child").text("Opción 3");

//Modifica solo el elemento de la última lista $("li:only-child").text("Cambio dual");

}

//Controlador para el evento hover de la lista que se ejecuta cuando se //produce el evento mouseleave sobre los elementos ul.

function CambiarLista2(){

//Modifica los elementos de la lista a su situación original $("li:first-child").text("Primer elemento");

$("li:nth-child(2)").text("Segundo elemento"); $("li:last-child").text("Tercer elemento"); $("li:only-child").text("Elemento solitario"); }

(12)

2.3. Modificar y leer los atributos

El método attr() permite acceder a cualquier atributo de un elemento para leer y modificar su contenido. Su funcionamiento se describe a continuación:

Leer un atributo attr("atributo") Mostrar del destino (atributo href) de un enlace. alert($("a").attr("href"))

Modificar un atributo attr("atributo", "nuevoValor")Modificar el destino (atributo href) de un enlace $("a").attr("href", "http;//google.com)

El método attr() devuelve undefined para los atributos que no existen, además este método no se debe utilizar en arrays, en la ventana o en el documento de una página Web.

El siguiente ejemplo muestra un botón y un enlace. Al pulsar doble clic sobre el enlace el atributo value del botón se modifica.

<head>

<body>

<img class="link" src="imagenes/link.png" width="16" height="16" alt="Enlace" /><a href="#" id="cambiar">Cambiar</a>

</body> </html>

Fitxer attr.js

//Definición de detectores de eventos y enlace con sus correspondientes controladores de evento

$("#cambiar").dblclick(CambiarValue); })

//Controlador para el evento dblclick del elemento con id="cambiar" //Modifica el atributo value de un botón alternativamente

function CambiarValue (){

var valor=$("input").attr("value");

if (valor=="Un valor") //Si tiene como atributo value="Un valor" lo cambia por "Otro valor"

$("input").attr("value","Otro valor"); else

//Si tiene como atributo value="Otro valor" lo cambia por "Un valor" $("input").attr("value","Un valor");

(13)

2.4. Mover elementos HTML

Existen numerosas funciones para alterar la estructura de un documento Web, a continuación veremos aquellos métodos que permiten mover un elemento de un lugar a otro del DOM.

Mueve el elemento amover antes del elemento destino

$

(amover).insertBefor e(destino)

Mueve el elemento a (enlace) antes del elemento p (párrafo)

$(a).insertBefore(p) Mueve el elemento amover

después del elemento destino.

$

(amover).insertAfter( destino)

Mueve el elemento a (enlace) después del elemento p (párrafo)

$(a).insertAfter(p)

El siguiente ejemplo muestra cuatro capas div. Al pasar el cursor sobre las capas hacer1 y hacer2 cambia la posición de las capas contenido1 y contenido2.

<head>

<body>

<div id="contenido1">Primera línea</div> <div id="contenido2">Segunda línea</div> <br>

<div id="hacer1">Poner segunda en primer lugar</div> <br>

<div id="hacer2">Poner primera en primer lugar</div> </body>

</html>

Fitxer insert.js

$("#hacer1").mousemove(InsertarAntes); $("#hacer2").mousemove(InsertarDespues); })

//Controladores para el evento mousemove de las capas con id="hacer1" e //id="hacer2"

//Cambia el orden de las capas con id="contenido1" e id="contenido2" function InsertarAntes(){ $("#contenido2").insertBefore("#contenido1") } function InsertarDespues(){ $("#contenido2").insertAfter("#contenido1") }

(14)

2.5. Añadir y eliminar elementos HTML

En ocasiones, puede ser necesario añadir nuevos elementos al DOM de una página Web o eliminarlos; para ello utilizaremos los métodos append y remove:

Añade el elemento nuevoElemento dentro de destino $ (nuevoElemento).appendTo(des tino)

Añade <h1>Titulo</h1> dentro del bloque header

$"<h1>Titulo</h1>")").appendTo("heade r")

Elimina el elemento

contenido. $(borrarElemento).remove()

Elimina el elemento con id="marca" $("#marca ").remove()

El siguiente ejemplo muestra dos textos (article) y dos enlaces que permiten añadir un párrafo (<p>..</p>) a cada elemento de la clase artículos y posteriormente eliminarlos.

<head>

<body>

<section class="contendor"> <h2> Titulo </h2>

<article class="articulos"> Hola </article> <article class="articulos"> Adiós </article> </section>

<img class="link" src="imagenes/link.png" width="16" height="16" alt="Enlace" /><a href="#" id="añadir">Añadir elemento</a><br> <img class="link" src="imagenes/link.png" width="16" height="16" alt="Enlace" /><a href="#" id="eliminar">Eliminar

elemento</a><br> </section>

</body> </html>

Fitxer append.js

$("#añadir").click(AñadirElemento); $("#eliminar").click(EliminarElemento); })

//Controladores para el evento click de los elementos con id="añadir" e //id="eliminar"

//Añade nuevos elementos y los borra function AñadirElemento(){

(15)

var paraAñadir="<p>Elemento añadido</p>" $(paraAñadir).appendTo(".articulos"); } function EliminarElemento(){ $("p").remove(); }

2.6. Copiar elementos HTML

En ocasiones, puede ser necesario replicar un elemento del DOM dentro de una página Web y, para ello, utilizaremos el método clone:

Copia el elemento "acopiar" al final del elemento destino

$

(acopiar).clone().a ppendTo(destino)

Copia el elemento <h1> al final del bloque header $("h1").clone().appendTo("header")

El siguiente ejemplo muestra dos textos (article) y un enlaces que permite clonar o copiar el título <h2> dentro de cada uno de los elementos de clase artículos.

<head>

<body>

<section class="contendor"> <h2> Titulo </h2>

<article class="articulos"> Hola </article> <article class="articulos"> Adiós </article> </section>

<img class="link" src="imagenes/link.png" width="16" height="16" alt="Enlace" /><a href="#" id="clonar">Clonar elemento</a><br> </section>

</body> </html>

Fitxer clone.js

$("#clonar").click(ClonarElemento); })

//Controladores para el evento click de los elementos con id="clonar" //Copia el elemento <h2> dentro de los elementos con class="artículos" function ClonarElemento(){

$("h2").clone().appendTo(".articulos"); }

(16)

2.7. Práctica

Dado el siguiente código HTML, crea el fichero Practica.js de tal forma que los enlaces realicen las funciones que describen.

<head>

<img class="link" src="imagenes/link.png" width="16" height="16" alt="Enlace" /><a href="#" id="modificarHtml">Modificar contenido html de la primera fila</a>

</p> <p>

<img class="link" src="imagenes/link.png" width="16" height="16"

alt="Enlace" /><a href="#" id="leerHtml">Mostrar el contenido html de la primera fila</a></p>

<p>

alt="Enlace" /><a href="#" id="modificarText">Modificar el contenido de texto de la segunda fila</a></p>

<p>

alt="Enlace" /><a href="#" id="leerText">Mostrar el contenido de texto de la segunda fila</a></p>

<p>

alt="Enlace" /><a href="#" id="modificarAtributo">Alternar el borde de la tabla</a></p>

<p>

alt="Enlace" /><a href="#" id="moverBElemento">Mover la tercera fila al primer lugar</a></p>

<p>

alt="Enlace" /><a href="#" id="moverAElemento">Mover la primera fila al tercer lugar</a></p>

<p>

<img class="link" src="imagenes/link.png" width="16" height="16" alt="Enlace" /><a href="#" id="añadirElemento">Añadir una fila al final de la tabla</a>

(17)

</p> <p>

alt="Enlace" /><a href="#" id="eliminarElemento">Elimina la última fila de la tabla</a></p>

<p>

alt="Enlace" /><a href="#" id="copiarElemento">Copia la primera fila al final de la tabla</a>

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

3. Acceso a los estilos CSS

Selector Descripción

tag.laClase Seleccionar los elementos tag (etiquetas HTML) que _{pertenezcan a la clase denominada}_laClase_. :radio Selecciona todos los elementos radio de formulario :radio[name=’nameGrupo’]

Selecciona todos los elementos radio de formulario cuyo atributo name=”nameGrupo”

:checked

Selecciona todos los elementos de formulario cuya propiedad checked=true.

3.1. Obtenir i establir propietats

Permite obtener el valor de la propiedad CSS que se pasa por parámetro

css(‘pCss’)

Mostrar el tamaño de letra asignado a div. alert($(“div”).css(‘font-size’)); Permite asignar el valor a

la propiedad CSS que se pasa por parámetro.

css(‘pCss’, ‘valor’)

Modificar el tamaño de letra asignado a div

$("div").css('font-size','29px');

Permite asignar varios

valores a distintas propiedades CSS. css({‘pCss1’: ‘valor1’, pCss2’:’valor2’, ….})

Modificar el alto y el ancho de un bloque div. $

("div").css({'width':'9px',’height’:’8px’} );

Al utilizar las propiedades CSS en jQuery se debe utilizar el nombre de la propiedad en el formato CamelCase de tal forma que border-color se debe escribir borderColor. Tan sólo en la propiedad css(‘propiedad CSS’) se puede utilizar el nombre original de la propiedad, por ejemplo, $ (‘div’).css(‘border-color’).

(18)

Ejemplo

En este ejemplo se trabajará a partir de la posibilidad que aporta HTML5 de visualizar parte del texto contenido de una capa en una sola línea y finalizando en puntos suspensivos. Se utilizará jQuery para ver alternativamente el texto completo y el texto parcial cuando se hace clic sobre el texto.

Se recomienda el uso de Chrome para realizar este ejemplo.

HTML

<head>

El <em>Quijote</em> ha sufrido, como cualquier obra clásica, todo tipo de interpretaciones y críticas. Miguel de Cervantes proporcionó en 1615, por boca de Sancho, el primer informe sobre la impresión de los lectores, entre los que «<em>hay diferentes opiniones: unos dicen: 'loco,

pero gracioso'; otros, 'valiente, pero desgraciado'; otros,

'cortés, pero impertinente'</em>» (capítulo II de la segunda parte). Pareceres que ya contienen las dos tendencias interpretativas posteriores: la cómica y la seria.

(19)

</section><p></p>

<footer> Miguel de Cervantes </footer> </body>

</html>

CSS

$("section").toggle(VerTexto,OcultarTexto); })

//Controlador que se ejecuta al hacer clic alternativamente sobre el //bloque section

//Permite ver todo el contenido del bloque section function VerTexto(){

//Selecciona la etiqueta section que tiene como clase contenido

$("section.contenido").css({'width':'auto','height':'auto','white-space':'normal'}); }

//Controlador que se ejecuta las al hacer clic alternativamente sobre el //bloque section

//Oculta parte del texto contenido en section function OcultarTexto(){

$("section.contenido").css({'width':'150px','height':'25px','white-space':'nowrap'});

}

3.2. Establecer y eliminar estilos

Desde jQuery se pueden manipular el estilo que se aplica al elemento seleccionado para establecer o eliminar el estilo mediante los siguientes métodos:

Asigna un estilo al elemento seleccionado

addClass()

Aplicar la clase clase parrafo1 al elemento con

id=”noticia”. $(“#noticia”).addClass(‘parrafo1’); Suprime la asignación de un estilo al elemento seleccionado. removeClass()

Suprimir la asignación de la clase parrafo1 al elemento con id =”noticia”.

$(“#noticia”).removeClass(‘parrafo1’);

Ejemplo

En este ejemplo se va a utilizar jQuery para dar funcionalidad a dos botones con el objetivo de ver el texto en una columna, dos columnas o en tres columnas. Se recomienda el uso de uno de los siguientes navegadores: Opera (en este navegador se verá el fondo amarillo en el botón radio pulsado), Firefox, Chrome o Safari.

(20)

HTML

<head>

<title>Documento sin título</title>

<body>

<h1>Probando columnas</h1> <div>

HTML 5 no es solo un lenguaje de etiquetas orientado al contenido y el formato, como las otras versiones de HTML, sino que pretende ser una tecnología que permita crear aplicaciones de todo tipo. Para ello se están desarrollando unas APIs que permitan trabajar con todos los elementos de la página utilizando para ello atributos y métodos específicos de cada uno.

Para que estas APIs sean realmente útiles tendrán que ser desarrolladas por todos los navegadores del mercado.

</div><br> <form>

<input type="radio" name="columnas" value="1C" checked>1 Columna<br> <input type="radio" name="columnas" value="2C">2 Columnas<br>

<input type="radio" name="columnas" value="3C">3 Columnas </form>

(21)

</html> Ejemplo_addClass.css columnas2{ -moz-column-count: 2; -moz-column-gap: 2em;

-moz-column-rule: 1px solid black; -webkit-column-count: 2;

-webkit-column-gap: 2em;

-webkit-column-rule: 1px solid black; column-count: 2;

column-gap: 2em;

column-rule: 1px solid black; }

.columnas3{

-moz-column-count: 3; -moz-column-gap: 1em;

-moz-column-rule: 1px solid black; -webkit-column-count: 3;

-webkit-column-gap: 1em;

-webkit-column-rule: 1px solid black; column-count: 3;

column-gap: 1em;

column-rule: 1px solid black; } form{ color:#FFF; background-color: #666699; width:100px; margin-left:300px; } input[type="radio"]:checked{

background:#FF0; /*se ven en el navegador Opera*/ }

Ejemplo_addClass.js

/*Selecciona los elementos type="radio" cuyo atributo name="columnas"*/ $(":radio[name='columnas']").click(CambiarColumnas);

})

//Controlador que se ejecuta al hacer clic sobre algún elemento radio del //formulario

//Modifica las columnas en las que se distribuye el texto function CambiarColumnas(){

/*Si el atributo value del elemento radio chequeado es igual a "2C"*/ if ($(":radio[name='columnas']:checked").val()=="2C")

$("div").removeClass('columnas3').addClass('columnas2') else

/*Si el atributo value del elemento radio chequeado es igual a "3C"*/ if ($(":radio[name='columnas']:checked").val()=="3C")

(22)

$

("div").removeClass('columnas2').addClass('columnas3') else

/*En cualquier otro caso (value=”1C”)*/

$("div").removeClass('columnas2').removeClass('columnas3'); }

3.3. Cambiar la hoja de estilos

Como ya hemos visto, jQuery nos facilita la modificación de los estilos y las propiedades que se aplican sobre los distintos elementos de una página Web. Pero el soporte de jQuery va mucho más allá, dando la posibilidad de cambiar la hoja de estilos que actúa sobre un documento Web.

Descripción Modifica la hoja de estilos actual por la hoja llamada NuevaHojaEstilos.css Sintaxis $("link").attr('href', ‘NuevaHojaEstilos.css’)

El cambio de hoja de estilos con una simple instrucción jQuery permite el uso de plantillas de forma on-line dando al usuario-cliente la posibilidad de cambiar todo el aspecto de un sitio Web con un solo clic.

Ejemplo

En el siguiente ejemplo disponemos de dos hojas de estilo para aplicar a una página Web, un enlace será el elemento que permita intercambiar las hojas de estilo.

Se utilizará el evento toggle con dos funciones para que un mismo enlace permita intercambiar dos hojas de estilo en un mismo documento.