emenia.es » Cursos http://www.emenia.es Creación y diseño web Mon, 31 May 2010 14:34:56 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Curso de jQuery (4): Selectores, Tercera Parte http://www.emenia.es/curso-de-jquery-4-selectores-tercera-parte/ http://www.emenia.es/curso-de-jquery-4-selectores-tercera-parte/#comments Fri, 13 Nov 2009 13:05:40 +0000 Juan Diaz-Bustamante http://emenia.es/?p=219

Selectores utilizados para encontrar un elemento

Estos selectores encuentran otros elementos que guardan relación con los elementos previamente seleccionados (como los que encuentran descendientes, antecesores o hermanos de una selección anterior, por ejemplo)

.next(), .nextAll(), .prev(), .prevAll()
Estos métodos son bastante sencillos. Por ejemplo, si quisiéramos seleccionar sólo el elemento único siguiente hermano de cada elemento previamente seleccionado, utilizaríamos .next().

Vamos a ver un ejemplo (tomado de la web oficial de jQuery):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  $(document).ready(function(){
    $("button[disabled]").next().text("Este botón está desactivado");
  });
  </script>
  <style>
  span { color:blue; font-weight:bold; }
  button { width:100px; }
  </style>
</head>
<body>
  <div><button disabled="disabled">Primero</button> - <span></span></div>
  <div><button>Segundo</button> - <span></span></div>
  <div><button disabled="disabled">Tercero</button> - <span></span></div>
</body>
</html>

Lo que hace es encontrar el hermano inmediatamente posterior de cada button con atributo disabled (el span) y cambiar su texto por “Este botón está desactivado”:

next

next

Si quisiéramos seleccionar todos los hermanos que siguen al elemento seleccionado utilizaríamos .nextAll(). Por ejemplo, localizar todos los divs que siguen al primero y aplicarles una clase que llamaremos “rojo” y que implica un borde rojo alrededor del DIV (fuente: web oficial de jQuery):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
  div { width: 80px; height: 80px; background: #abc; 
        border: 2px solid black; margin: 10px; float: left; }
  div.rojo { border-color: red; }
  </style> 
<script>
  $(document).ready(function(){
    $("div:first").nextAll().addClass("rojo");
  });
  </script>
</head>
<body>
  <div>Primer DIV</div>
  <div>DIV hermano<div>DIV hijo</div></div>
  <div>DIV hermano</div>
  <div>DIV hermano</div>
</body>
</html>

El resultado es:

selectores_nextall

Como vemos, en esta ocasión se ha cargado jQuery desde su web oficial. Esto nos permite (como vimos en la primera parte del curso) cargar siempre la última versión disponible. ¿Es esto recomendable? Depende, ya que hay veces que algún plugin o código que tengamos de jQuery en nuestra web no soporte la última versión de jQuery.

Sus contrarios son .prev() y .prevAll(), que nos sirven para seleccionar a los anteriores en vez de a los siguientes.

.parent(), .parents(), .children(), .siblings()
.parent() obtiene el padre directo de un elemento. Si la selección es de un grupo de elementos, obtiene un grupo de sus padres directos únicos.

Por ejemplo, supongamos el ejemplo anterior cuando veíamos los botones dentro de un Div. En este caso, seleccionaríamos el Div padre de cada botón y le aplicamos la clase rojo (que tendríamos definida en nuestra hoja de estilos como borde rojo) :

1

$("button").parent().addClass("rojo");

parent

.parents() obtiene un grupo de elementos que contienen los antecedentes únicos de el grupo de elementos previamente seleccionados (excepto el elemento raíz).

.children() Obtiene un grupo de elementos que contienen todos los hijos inmediatos únicos de cada grupo de elementos reviamente seleccionados. Mientras .parents() devuelve todos los antecesores, .children() sólo considera los elementos hijo inmediatos.

.siblings() obtiene un grupo de elementos que contienen todos los hermanos únicos del grupo de elementos seleccionados previamente.
Por ejemplo, supongamos que queremos aplicar un fondo blanco a todos los elementos hermanos de “p” que tengan la clase “nombredeclase”:

1

$("p").siblings(".nombredeclase").css("background", "white");

.contents()
Encuentra todos los nodos hijos de los elementos previamente seleccionados (incluyendo textos), o el contenido del documento si el elemento es un iframe.
Por ejemplo, si queremos seleccionar el texto que se encuentra en el interior de los elementos “p” (por ejemplo, para añadirle posteriormente más texto, etc..):

1

$("p").contents();

.add()
Añade más elementos -que cumplan con la selección que se encuentre dentro de los paréntesis de .add()- a la selección de elementos previamente seleccionados.

Por ejemplo, si habíamos seleccionado ya todos los elementos “p” de un documento y queremos añadir también los elementos “span”:

1

$("p").add("span")

.closest()
Este selector se ha introducido por primera vez con jQuery 1.3 Obtiene un grupo de elementos que contenga el elemento padre más cercano que cumpla con el selector especificado, incluyendo al elemento inicial. Comienza comprobando primero si el elemento actual cumple con la selección especificada. Si es así devuelve ese elemento. En caso contrario continúa buscando en el elemento, padre a padre, hasta que encuentra un elemento que cumpla la condición dada. Si no lo encuentra, no devuelve nada. Podéis ver un ejemplo muy interesante en la web oficial de jQuery.

.find()
Devuelve una nueva selección que contiene aquellos elementos descendientes de la selección previa que cumplen la condición dada dentro de los paréntesis de find(). Por ejemplo, si queremos seleccionar todos los span descendientes de elementos p haríamos:

1

$('p').find('span')

Encadenamientos

.not()
Es posible con jQuery seleccionar múltiples grupos de elementos y hacer múltiples cosas con ellos, todo en una única línea de código. Hemos visto que podemos partir de una selección inicial e ir reduciéndola o ampliándola. La nueva selección será la que estará activa para realizar sobre ella cualquier acción. Pero ¿qué pasa con la selección inicial? Podemos volver a ella en cualquier momento gracias al selector .end() Vamos a ver un ejemplo. Supongamos que tenemos:

1

$('div').add('a').css('background','black');

Hemos seleccionado todos los div del documento. Luego hemos creado un nuevo grupo que también contiene los elementos a. Cuando apliquemos el método css() lo haremos sobre el nuevo grupo creado. Pero ¿qué pasa si hacemos esto?:

1

$('div').add('a').css('background','black').end().css('color','red')

Después de aplicar el primer método .css() que crea un fondo negro hemos aplicado el método .end() devolviéndonos a la primera selección de los div sobre los que se aplicará el segundo método .css() que pone el color en rojo.

.andSelf()
Otro método útil para afectar las cadenas de jQuery es el método .andSelf(), que crea un nuevo grupo de elementos a partir de los dos últimos grupos de elementos seleccionados. Por ejemplo:

1

$('div').css('background,'black').children('img').css('border', '5px solid red').andSelf().css('padding','10px');

Hemos seleccionado todos los elementos div y les hemos dado un fondo negro. Después hemos seleccionado todos los elementos img hijos de los div anteriores y a estos les hemos aplicado un borde rojo de 5 píxeles. Y a continuación hemos unido las dos selecciones gracias a .andSelf() y les hemos aplicado a ambas un padding de 10px.

Accediendo directamente a los elementos del DOM: el método get()

Hay ocasiones en las que necesitamos acceder directamente a un elemento del DOM. Para estas ocasiones jQuery ofrece el método .get()

Por ejemplo, para seleccionar todos los elementos div:

1

$('div').get()

O para obtener el primer div( empezamos a contar desde cero):

1

$('div').get(0)

Hasta aquí hemos visto los selectores de jQuery. Ahora la pregunta es: Vale, ya tengo unos elementos de mi web seleccionados. Ahora ¿Qué puedo hacer con ellos? Hemos visto pequeños avances en métodos como .css() para aplicar estilos CSS de manera directa o .addClass() para añadir el nombre de una clase, pero queda mucho por ver.
¡Es en lo que entraremos en futuras entregas!

Mientras tanto, os recomiendo que utilicéis está página para practicar con selectores y ver los resultados que lo que escribimos en tiempo real.

Otros capítulos del curso

Curso de jQuery (1): Introducción
Curso de jQuery (2): Selectores, Primera Parte
Curso de jQuery (3): Selectores, Segunda Parte

Otras lecturas de interés

Web oficial de jQuery
designersmantra.com: jQuery for Absolute Beginners: The Complete Series
Woorkup: jQuery Lesson Series: Introduction to Selectors
Woorkup: jQuery Visual Cheat Sheet
Cherrysave.com: jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!
Mariuzzo.com: Capítulo 2, Selectores en jQuery
VTOnline Enseñanza libre (video en Castellano), 01.- Curso de jQuery
VTOnline Enseñanza libre (video en Castellano), 02-Curso-de-jQuery
VTOnline Enseñanza libre (video en Castellano), 03-Curso-de-jQuery

]]> http://www.emenia.es/curso-de-jquery-4-selectores-tercera-parte/feed/ 0 Curso de jQuery (3): Selectores, Segunda Parte http://www.emenia.es/curso-de-jquery-3-selectores-segunda-parte/ http://www.emenia.es/curso-de-jquery-3-selectores-segunda-parte/#comments Wed, 04 Nov 2009 11:43:37 +0000 Juan Diaz-Bustamante http://emenia.es/?p=191

Vamos a seguir viendo selectores de jQuery. La mayor parte de los selectores que hemos visto hasta ahora nos permitían ir a través y hacia abajo del DOM (Document Object Model) o árbol de nuestro HTML (por ser más gráficos). Hay ocasiones en las que necesitamos acceder de manera más directa a un elemento. En este caso tenemos a nuestra disposición los métodos transversales, que nos permiten ir hacia arriba, hacia abajo y por todo el DOM sin problemas. En este artículo vamos a ver uno de ellos, los filtros:

Filtros

Son aquellos que concretan una selección de elementos ya realizada aplicando una selección adicional que limita la selección anterior (por ejemplo, hemos seleccionado previamente todos los elementos div y ahora queremos sólo el cuarto div de esa selección). Los filtros se distinguen así de los selectores que encuentran otros elementos que guardan relación con los elementos ya seleccionados (como los que encuentran descendientes, antecesores o hermanos de una selección anterior, por ejemplo, y que veremos en el artículo siguiente). Vamos a ver los filtros más importantes:

El filtro .not()
.not() lo utilizaremos siempre que queramos seleccionar aquellos elementos que no cumplen con un determinado filtro situado dentro de los paréntesis del .not(). Por ejemplo, si queremos añadir un borde a aquellos divs que no tengan un fondo verde o azul (este ejemplo y los siguientes los he tomado de la web oficial de jQuery):

1

$("div").not(".verde, #azul").css("border-color", "red");

Primero selecciona todos los div del documento y luego selecciona aquellos que no tengan la clase ‘verde’ ni el div ‘azul’ y les aplica el estilo correspondiente de CSS.

not

El filtro .filter()
Otra manera de filtrar una selección de elementos es reducirla a aquellos que sí cumplen con un filtro adicional, y lo hacemos a través de .filter()

Por ejemplo, si queremos cambiar el color de fondo de todos los divs y después poner un borde alrededor de sólo los que tienen la clase ‘centro’

1
2
3

$("div").css("background", "#c8ebcc")
            .filter(".centro")
            .css("border-color", "red");

filter

Y viendo un ejemplo algo más complejo, vamos a aplicar la clase ‘imagen’ a todas las imágenes de un documento, luego vamos a filtrar sólo las que tienen un alt que contenga la palabra ‘importante’ y sólo a esas les vamos a aplicar la clase ‘borde’ (para poder luego aplicarlas un borde a través de CSS o de jQuery, por ejemplo):

1

$('img').addClass('imagen').filter('[alt*=importante]').addClass('borde');

Pero lo que hace a filter() realmente potente es que podemos incluir una función como parámetro del mismo, por ejemplo (obtenido de la web oficial de jQuery):

1
2
3
4
5

$("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "cuatro";
                })
            .css("border", "3px double red");

lo que hace es aplicar un color de fondo a todos los div del documento y luego filtra con una función (si ponemos como parámetro de la función index tendremos un índice que nos valdrá como contador y que empieza a contar desde cero) el segundo div (el que tiene índice 1) y el div con el id “cuatro” para aplicarles luego un borde rojo de 3px. A través de la función iremos div a div en un bucle devolviendo los que cumplen la condición:

filter

No os preocupéis si no entendéis mucho de lo que se hace, lo importante es ver cómo funciona el selector. Sí destacar que dentro de la función aparece un término nuevo, $(this). Veremos en próximos artículos del curso que $(this) se usa dentro de las funciones y hace referencia al elemento exacto al que afecta la función en ese momento, en este caso el div con id=”cuatro” (en vez de escribir $(div).atrr(‘id’)).

El filtro .slice(comienzo, final)
Hay ocasiones en las que queremos obtener una porción de una determinada selección de elementos basada en la posición de estos elementos dentro de la selección realizada. Entonces utilizamos .slice(), que creará una nueva selección. Admite dos parámetros, un número que indica el inicio (empezando por cero) donde vamos a realizar el corte y otro que indica el final no incluído. Este último valor es opcional. Vamos a ver un ejemplo:

Si seleccionamos todos los elementos p del documento y luego sólo queremos el tercer elemento haríamos:

1

$('p').slice(2,3);

El primer número (donde se empieza a cortar la selección inicial) es un dos porque se empieza a contar desde cero: 0, 1, 2 es decir, empezamos a contar por el tercer elemento. Para el final no incluído pone 3, es decir el cuarto elemento (0,1,2,3) por lo que de todos los p del documento solo se selecciona el tercero.

El filtro .eq()
Reduce el grupo de elementos seleccionados a un elemento único. Su argumento (lo que va entre los paréntesis) es la posición del elemento dentro del grupo de elementos previamente seleccionados (que puede ser un número entre 0 y la longitud completa del número de elementos menos uno, al haber empezado en cero).

Por ejemplo (tomado de la web oficial de jQuery), vamos a cambiar el color de fondo del div con índice 2 (es decir, el tercer div) añadiendo la clase apropiada:

1

 $("div").eq(2).addClass("azul");

eq

Y esto es todo. Tenéis algún filtro más en la web oficial de jQuery. El próximo artículo será el último con selectores antes de pasar a la acción con Eventos.

Otros capítulos del curso

Curso de jQuery (1): Introducción
Curso de jQuery (2): Selectores, Primera Parte
Curso de jQuery (4): Selectores, Tercera Parte

]]> http://www.emenia.es/curso-de-jquery-3-selectores-segunda-parte/feed/ 2 Curso de jQuery (2): Selectores, Primera Parte http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/ http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/#comments Wed, 28 Oct 2009 07:23:02 +0000 Juan Diaz-Bustamante http://emenia.es/?p=173

Por un selector entendemos en jQuery lo mismo que en CSS: una forma de permitirnos elegir un elemento (o varios) entre todos los que tenemos en nuestro documento HTML. ¿Para qué? Para luego poder aplicar sobre los elementos seleccionados diversas funciones.

Es decir, jQuery utiliza el poder de los selectores para acceder de una manera rápida y sencilla a un elemento o grupo de elementos del DOM (Document Object Model) y luego poder aplicar sobre los mismos cualquier tipo de instrucción, evento, animación, etc…. Por ejemplo, para aplicar la clase “enlace” a todos los elementos “a” que se encuentren dentro de un elemento “p”. Haríamos:

1

$('p a').addClass('enlace');

Pero vamos a empezar desde el principio. En este artículo vamos a ver cómo crear los selectores más importantes de jQuery.

Antes de nada es importante saber que el DOM (Document Object Model, el esqueleto de nuestra página web) utiliza una estructura de árbol para definir las relaciones entre sus elementos, en la que tenemos padres, hijos, etc… Por ejemplo:

dom

$(’selector’)

No importa qué tipo de selector usemos en jQuery: siempre comenzaremos con $(). Prácticamente todo lo que se pueda usar en CSS se puede también incluir entre esos paréntesis de esta forma $(’selectores’). De tal manera que por ejemplo podríamos hacer:

selectores

Selectores CSS

jQuery soporta prácticamente todos los selectores de CSS, con la ventaja de que podemos utilizar selectores de CSS3 que funcionen con Internet Explorer 6 gracias a jQuery. Lo vemos mejor con estos ejemplos:

selectores_css

Selectores propios de jQuery

A la amplia variedad de selectores propios de CSS jQuery añade sus propios selectores. Como característica que les distingue decir que siempre comienzan por dos puntos (:)

Vamos a distinguir entre ellos:

Selectores Posicionales
Estos selectores están basados en las relaciones posicionales entre elementos (como veíamos antes en ejemplo de la estructura del DOM). Como antes, los vamos a ver a través de ejemplos:

selectores_positional

Selectores de Formularios
Cuando trabajemos con formularios jQuery nos ofrece una serie de selectores propios que nos permiten seleccionar de manera sencilla el elemento preciso. Vamos a verlos con ejemplos:

selectores_formulario

En el próximo artículo veremos selectores más avanzados así como combinaciones en cadena de selectores.

Otros capítulos del curso

Curso de jQuery (1): Introducción
Curso de jQuery (3): Selectores, Segunda Parte
Curso de jQuery (4): Selectores, Tercera Parte

Lecturas Recomendadas:

Blog de Andrés Nieto, Selectores CSS que deberías conocer.
Nosolocodigo: Tutorial de iniciación a jQuery : los selectores.
WoorkUp: jQuery Lesson Series: Introduction to Selectors

]]> http://www.emenia.es/curso-de-jquery-2-selectores-primera-parte/feed/ 2 Curso de jQuery (1): Introducción http://www.emenia.es/curso-de-jquery-introduccion-1/ http://www.emenia.es/curso-de-jquery-introduccion-1/#comments Wed, 21 Oct 2009 06:22:32 +0000 Juan Diaz-Bustamante http://emenia.es/?p=154

Voy a comenzar con este artículo un curso básico sobre jQuery, la librería de Javascript probablemente más utilizada en la actualidad.

jQuery fue creada inicialmente por John Resig y nos permite de una manera sencilla y eficiente:
- Acceder a elementos en un documento.
- Modificar la apariencia de una web.
- Alterar el contenido de un documento.
- Responder a una interacción del usuario.
- Animar cambios en un documento.
- Recoger información del servidor sin refrescar la página.
- Tareas diversas de Javascript.

Además nos permite hacerlo sin tener que preocuparnos más por las diferencias entre navegadores, como pasa en muchas ocasiones si utilizamos directamente Javascript.

¿Cómo se añade jQuery a nuestra web?

En primer lugar tenemos que bajarnos la versión más actual de jQuery. Esto lo podemos hacer desde la propia web de jQuery haciendo click sobre el botón Download (jQuery). La versión en el momento de escribir este artículo es la 1.3.2

Una vez tengamos el archivo lo podemos poner en la carpeta donde guardemos los archivos de Javascript del proyecto (por ejemplo js). Luego en la cabecera del código de nuestra web añadimos jQuery como lo haríamos con cualquier archivo de Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
	<title>TITULO DE LA WEB</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script type="text/javascript" src="js/jquery-1.3.2.min.js "></script>
</head>
<body>
 // Contenido de la Web
</body>
</html>

Otra forma alternativa de incluir jQuery, preferida por muchos autores, es descargarla directamente de Google. Se haría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
	<title>TITULO DE LA WEB</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
 
  // Contenido de la Web
 
</body>
</html>

Si estáis usando Wordpress y queréis que no se utilice la versión que incorpora de jQuery y preferís que la cargue desde Google lo único que hay que hacer es añadir estas líneas al archivo functions.php de vuestro tema:

1
2
3
4
5

if( !is_admin()){
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
   wp_enqueue_script('jquery');
}

Y una tercera manera de cargar jQuery, siempre la última versión disponible, es descargarlo de su web oficial:

1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Bueno, ya tenemos la librería jQuery en nuestra web. Pero esto por sí solo no hace nada. Pero ya podemos incluir cualquier código o funciones de jQuery con vistas a realizar cualquiera de las tareas que antes veíamos que se pueden hacer gracias a jQuery.

¿Cómo se añade código de jQuery?

Para explicar cómo se introduce código de jQuery vamos a comenzar con un ejemplo básico. Vamos a añadir la clase “fondo-destacado” a un Div que tiene un id llamado “contenido”.

Tenemos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
	<title>TITULO DE LA WEB</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script type="text/javascript" src="js/jquery-1.3.2.min.js "></script>
</head>
<body>
<h3>Esta es una prueba de jQuery</h3>
<div id="contenido">
<p>Esta es una prueba de jQuery en la que vamos a añadir la clase "fondo-destacado" al Div con el id="contenido"</p>
</div>
</body>
</html>

Supongamos también que nuestra hoja de estilo default.css tiene la siguiente clase definida:

1

.fondo-destacado { background-color: red; }

Para añadir un código de jQuery que se ejecute en cuanto se cargue el documento de nuestra web (y por lo tanto está ya disponible el div con el id “contenido” de nuestro ejemplo) añadimos las siguientes líneas:

1
2
3
4
5
6
7

<script type="text/javascript">
$(document).ready(function() {
 
// líneas de código de jQuery
 
});
</script>

Es decir, cuando el documento (document) esté listo (ready) ejecutar la función que sigue a continuación.

Este comienzo es típico de JQuery y lo que dice es que cuando el documento (document) esté listo (ready) se ejecute la función que sigue a continuación. El documento es el DOM (Document Object Model). Merece la pena distinguir esto de la manera tradicional utilizada en Javascript:

1
2

<script type="text/javascript">
    window.onload = function() {

Con window.onload lo que hacíamos es que la función no se iba a ejecutar hasta que no se cargara la web completa (no sólo el DOM), es decir, todas las imágenes y recursos externos. Esto implicaba que si había alguna imagen de carga muy lenta cualquier evento gestionado con Javascript no iba a funcionar hasta que no se cargara esa imagen. Este impedimento lo evitamos con el $(document).ready de JQuery.

En nuestro caso las líneas de código necesarias serán estas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
	<title>TITULO DE LA WEB</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script type="text/javascript" src="js/jquery-1.3.2.min.js "></script>
        <script type="text/javascript">
           $(document).ready(function() {
              $('#contenido').addClass('fondo-destacado');
          });
       </script>
</head>
<body>
<h3>Esta es una prueba de jQuery</h3>
<div id="contenido">
<p>Esta es una prueba de jQuery en la que vamos a añadir la clase "fondo-destacado" al Div con el id="contenido"</p>
</div>
</body>
</html>

La operación fundamental en jQuery es seleccionar la parte del documento sobre la que se va a actuar. Esto se hace con el constructor$(). Normalmente su parámetro, lo que incluimos entre los paréntesis, es una línea de texto que puede incluir cualquier selector de CSS. En este caso queremos encontrar en el documento un Div con un id llamado “contenido”, es decir: $(‘#contenido’). Esto es lo que se llama un selector.

A continuación gracias al método de jQuery .addClass() añadimos una clase de CSS a la parte de la página que hemos seleccionado anteriormente, es decir al Div con id=”contenido”. Su único parámetro es el nombre de la clase, escrito entre comillas: .addClass(‘fondo-destacado’);

Este simple ejemplo muestra cómo funciona jQuery. No es un ejemplo muy útil para situaciones reales, pero nos sirve para introducirnos en el lenguaje. En el siguiente artículo veremos cómo incluir selectores más complejos que el que hemos creado en ejemplo.

Otros capítulos del curso

Curso de jQuery (2): Selectores, Primera Parte
Curso de jQuery (3): Selectores, Segunda Parte
Curso de jQuery (4): Selectores, Tercera Parte

Lecturas recomendadas

netnuts+: jQuery for Absolute Beginners: The Complete Series
CSSTricks: Intro to jQuery 2
SohTanaka: New to jQuery? Don’t be Scurred…
jQuery.com: Página oficial de jQuery

]]> http://www.emenia.es/curso-de-jquery-introduccion-1/feed/ 6