jQuery Blues: 3. Selectores básicos

Tutorial de jQuery 3. Esta librería funciona de forma muy curiosa, mediante selectores separados del código HTML.

klimt

archivado en: JavaScript / 24 octubre, 2012 / taller:

La manera habitual de trabajar sobre los elementos de una página con jQuery es peculiar y, al principio, cuesta un poco cambiar el chip. Lo normal es llamar a una función que procese una serie de instrucciones y las devuelva desde algún elemento. Por ejemplo, en JavaScript, se puede programar una función para que al pulsar un enlace se abra una ventana de alert, que son muy útiles cuando estás depurando el código (1).

En este caso estaríamos llamando a la función alerta cuando suceda el evento onclick en el enlace, es decir, cuando sea pulsado:

<!DOCTYPE html>

<html>

<head>

<title>

página de pruebas

</title>

<script text="javascript">

function alerta () {

alert("los dinosaurios son divertidos");

}

</script>

</head>

<body>

<a href="#" onclick="alerta();"> Enlace para abrir la ventana de alert </a>

</body>

</html>

Sin embargo, con jQuery no se llama a las funciones cuando se necesitan, sino que se asocian a determinados elementos mediante selectores y se deja limpio el código HTML. Por ejemplo, en el caso anterior, vamos a decirle —en modo no conflict— que active la función alert con el evento onclick para los elementos <a>.

<!DOCTYPE html>

<html>

<head>

<title>

página de pruebas

</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="RUTA/jquery-1.6.1.min.js">\x3C/script>')</script>

<script type="text/javascript">

$.noConflict();

jQuery(document).ready(function($) {

jQuery("a").click(function() {

alert("Los dinosaurios son divertidos");

});

});

</script>

</head>

<body>

<a href="#"> Enlace para abrir la ventana de alert </a>

</body>

</html>

No importa ahora si no hemos entendido bien qué es eso de un evento, sino el mecanismo básico de jQuery: Se asocian funciones (conjunto de instrucciones) a los elementos de una página directamente en el script. Bueno, esto quedará más claro a continuación.  🙂

Selectores básicos

Hay dos maneras principales para seleccionar elementos en jQuery. Una es refiriéndose al elemento  y otra es recorriendo el documento hasta encontrarlo. En los dos casos y en otros que veremos más adelante la sintaxis es la misma:

$("selector").lo que sea venga después

Aunque en nuestro caso, como estamos aprendiendo jQuery en modo non conflict para trabajar mejor luego en WordPress, en vez del $, ponemos jQuery:

jQuery("selector").lo que sea venga después

La primera manera de seleccionar un elemento no guarda mayor misterio. Normalmente sigue la misma sintaxis que las CSS y se puede hacer en referencia al elemento, al id y a la clase (class).

a) Selector ("element"): equivale a la función de JavaScript getElementsByTagName() y sirve para cualquier etiqueta de HTMl (div, h2, a, p, etcétera).

b) Selector ("#id"): es el más rápido y equivale en JavaScript a document.getElementById(). Es importante recordar que los identificadores deben ser únicos, de lo contrario hay que usar clases (.class).

c) Selector (".class"): es el equivalente a getElementsByClassName() y, claro está, selecciona los elementos de determinada clase.

Con estos tres selectores —elemento, id y class—se pueden hacer las mismas combinaciones que en CSS (con la misma sintaxis). Por ejemplo, mientras que así seleccionaríamos todos los párrafos (<p>):

jQuery("p")

y así todos los elementos con la clase .diplodocus

jQuery(".diplodocus")

de esta manera solo se seleccionarían los párrafos con la clase diplodocus

jQuery("p.diplodocus")

Y para seleccionar varios elementos, basta con separarlos por comas, igual que en las CSS.

jQuery("a, p.diplodocus, h1")

Por ejemplo, en un documento con un titular (h1), un div (div) y tres párrafos (p), uno de ellos con un identificador, y los otros dos con la misma clase, mediante el método .css("nuevo estilo") que veremos más adelante, vamos a poner cuando el documento esté cargado (ready):

  • un fondo gris al titular (h1) y al párrafo con identificador
  • un borde rojo al texto que se encuentra en el div
  • las letras de color rojo al titular, en verde al párrafo con id y en rojo a los dos párrafos y el div que comparten la misma clase

[singlepic id=15 w=389 h=279 float=center]

<!DOCTYPE html>

<html>

<head>

<title>

página de pruebas

</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="RUTA/jquery-1.6.1.min.js">\x3C/script>')</script>

<script type="text/javascript">

$.noConflict();

jQuery(document).ready(function($) {

jQuery("h1").css("color","#900");

jQuery("#parrafo_con_identificador").css("color","#090");

jQuery(".clase_1").css("color","#009");

jQuery("div.clase_1").css("border","1px solid #900");

jQuery("h1, #parrafo_con_identificador").css("background-color","#ccc");

});

</script>

</head>

<body>

<h1>Soy un titular </h1>

<p id="parrafo_con_identificador"> Soy un párrafo con identificador id </p>

<p class="clase_1"> Soy un párrafo con la clase 1 </p>

<p class="clase_1"> Soy otro párrafo con la clase 1 </p>

<div class="clase_1"> Soy un div con la clase 1 </p>

</body>

</html>

Bueno, el resultado es muy feo, pero espero que se haya comprendido cómo funcionan los selectores básicos. El próximo día veremos algunos más complejos.

Práctica

Para el siguiente documento HTML, en el que se recoge el poema Alquimista de Borges:

<!DOCTYPE html>

<html>

<head>

<title>

primera práctica de jQuery - un poema de Borges

</title>

</head>

<body>

<p id="primera_estrofa" class="estrofas_impares">Lento en el alba un joven que han gastado<br />

la larga reflexión y las avaras<br />

vigilias considera ensimismado<br />

los insomnes braseros y alquitaras.</p>

<p id="segunda_estrofa" class="estrofas_pares">Sabe que el oro, ese Proteo, acecha<br />

bajo cualquier azar, como el destino;

sabe que está en el polvo del camino,

en el arco, en el brazo y en la flecha.</p>

<p id="tercera_estrofa" class="estrofas_impares">En su oscura visión de un ser secreto<br />

que se oculta en el astro y en el lodo,<br />

late aquel otro sueño de que todo<br />

es agua, que vio Tales de Mileto.</p>

<p id="cuarta_estrofa" class="estrofas_pares">Otra visión habrá; la de un eterno<br />

Dios cuya ubicua faz es cada cosa,<br />

que explicará el geométrico Spinoza<br />

en un libro más arduo que el Averno…</p>

<p id="quinta_estrofa" class="estrofas_impares">En los vastos confines orientales<br />

del azul palidecen los planetas,<br />

el alquimista piensa en las secretas<br />

leyes que unen planetas y metales.</p>

<p id="sexta_estrofa" class="estrofas_pares">Y mientras cree tocar enardecido<br />

el oro aquel que matará la Muerte,<br />

Dios, que sabe de alquimia, lo convierte<br />

en polvo, en nadie, en nada y en olvido.</p>

</body>

</html>

Cuando el documento esté listo, mediante jQuery, definir:

  • Que el color del titular y el subtitular sean rojos
  • Que el titular tenga un borde gris
  • Que las estrofas impares tengan un fondo gris muy claro
  • Que las pares lo tengan de un gris más oscuro
  • Que cada estrofa tenga el texto de un color diferente.

Para eso, usaremos esta sentencia:

jQuery("selector").css("propiedad que se quiera cambiar","valor");

(Podemos cortar y pegar el código anterior en el sublime o el notepad para no tener que andar picando htmlcosas y centrarnos en jQuery)

Notas

1. En vez de alert, también se puede emplear console.log, que muestra los resultados en la consola de Chrome o Firefox.

function alerta () {

console.log('los dinosaurios son divertido');

}

[singlepic id=14 w=600 h=165 float=center]

|| Tags: ,

valoración de los lectores sobre jQuery Blues: 3. Selectores básicos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (16 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

3 respuestas a “jQuery Blues: 3. Selectores básicos

  1. Vale, todo esto esta genial… pero sigo sin entender realmente ¿para que sirve todo esto?
    Es decir que me imagino que tendrá alguna utilidad más.
    Según el ejercicio y los ejemplos hemos definido estilos, que ya podiamos definir en un css.

    ¿cual es la ventaja de hacerlo mediante jquery? ¿o es que jquery tiene muchas más utilidades que definir estilos?

  2. marcos el dijo:

    lol, es que acabamos de empezar. No te impacientes : ).

    Cuando lo tengas controlado, podrás hacer menús, carruseles de diapositivas, control de formularios… en fin, una montonera de cosas muy chulas.

    Para que te hagas una idea, mira los plugin de jQuery de imágenes que hay recopilados en kollermedia.at