Entender jQuery. Principios básicos

29 enero 2009 at 7:36 pm 2 comentarios

Una de las maneras, quizás la más utilizada, de emplear jQuery es siguiendo los ejemplos del plugin que queramos utilizar, como hice en este mismo blog en «Utilización de jQuery cycle plugin«.

Pero si queremos entender cómo funciona jQuery o intentar hacer nuestro propio plugin necesitamos ir más allá. Eso es lo que intenta esta entrada.

logo_jquery_215x53

jQuery es un framework javascript especializado principalmente en la localización y modificación de elementos en el árbol DOM (Document Object Model). También es importante su gestión de eventos y la facilidad para el desarrollo de plugins.

Un uso frecuente de jQuery sería:

Reaccionar a un evento llamando a una función.
En dicha función localizar un objeto del árbol DOM.
Modificar dicho objeto.

Podemos reaccionar a un evento del tipo de pulsado de un enlace, paso del ratón sobre algo o envío de un formulario entre otros. Podemos consultar el API de eventos de jQuery para velos todos.

Un evento un tanto especial es el que indica que el árbol DOM está listo para recorrerse. Este evento es el que se suele utilizar para dar entrada a todo el código jQuery, por lo que solemos ver que siempre ponemos nuestro código jQuery dentro de $(document).ready():

$(document).ready(function(){
  //Nuestro codigo aqui
});

Para buscar dentro del árbol DOM, jQuery utiliza una nomenclatura de selectores muy similar a CSS, por lo que si conocemos CSS nos resultará bastante familiar. Ejemplos de selectores serían:

$("#id") que devuelve el elemento de identificador «id».
$("p") que devolverá todos los párrafos
$("p.class") que devuelve los párrafos con la clase «class»

Podemos ver todos los selectores en la documentación de jQuery sobre selectores.

Vemos que estamos utilizando en varias ocasiones la función $(), que es la llamada función jQuery. Podemos señalar que la función jQuery siempre nos devuelve un objeto jQuery, que contiene un array con todos los resultados. Realmente tambiéń la mayoría de eventos y otras funciones de jQuery devuelven el objeto jQuery (lo que se conoce por Interface Fluida), por lo que es muy común enlazar unas llamadas con otras tal y como veremos en el ejemplo que acompaña a esta entrada.

Por último vamos a conocer las funciones de manipulación del árbol DOM. Con estas funciones podemos por ejemplo: añadir una clase a una etiqueta HTML o agregar contenido dentro de un elemento. Podemos ver todos ellos en el API de atributos y en el API de manipulación.

Finalmente y para aclarar los conceptos vamos a ver un pequeño ejemplo. Nos vamos a basar en la siguiente página HTML:

<html>
<head>
    <style type="text/css">
        p.red { background: red; }
	p.yellow { background: yellow; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
	//Aqui nuestro codigo jQuery
   </script>
</head>
<p class="color">Este es un párrafo</p>
<p>Este es otro párrafo</p>
<p class="color">Y este el último párrafo</p>
<ul>
<li><a id="redLink" href="#">red</a></li>
<li><a id="yellowLink" href="#">yellow</a></li>
<li><a id="resetLink" href="#">reset</a></li>
</ul>
<body>
</body>
</html>

Como vemos son tres párrafos de los cuales dos pertenecen a la clase «color». Además tenemos tres enlaces cada uno con un id distinto. Aparte en la cabecera se definen dos estilos CSS para los párrafos (para darle un color de fondo) y se importa la librería jQuery.

Ahora añadimos el código jQuery en la etiqueta script de la cabecera:

$(document).ready(function(){
	$("#redLink").click(function(event){
		$("p.color").removeClass("yellow").addClass("red");
	});
	$("#yellowLink").click(function(event){
		$("p.color").removeClass("red").addClass("yellow");
	});
	$("#resetLink").click(function(event){
		$("p.color").removeClass("red").removeClass("yellow");
	});
});

Destacamos lo siguiente:

Como hemos dicho, todo nuestro código se engloba en una función que se suministra al evento $(document).ready.
Utilizamos el selector para buscar por id para localizar cada uno de los enlaces y pasarle un código a su evento click.
Dentro del código del evento click utilizamos el selector «p.color» para localizar los párrafos pertenecientes a la clase «color».
Utilizando la concatenación de funciones (Interface Fluida) modificamos el árbol DOM añadiendo o quitando clases.

Podemos ver este ejemplo funcionando en: ejemplo de jQuery funcionando.

Entry filed under: Javascript. Tags: Javascript, JQuery.

Repositorios Maven: Nexus Herramientas CakePHP: Scaffolding y bake

2 comentarios Add your own

1. Uziel | 18 noviembre 2009 a las 11:44 pm

Interesante ejemplo, sobre todo porque Jquery es una gran tecnologia que merece la pena su estudio
2. lumbreras | 5 abril 2010 a las 11:31 pm

Estoy tratando de armar mi portafolio con WordPress, jQuery y CSS, pero me esta dando problemas, se supone que subo la imagen que se muestra al principio, que es como una miniatura, pero me la muestra como apachurrada, y cuando pongo hover si la muestra bien la segunda imagen, estoy usando CSS Sprite, y ya no entiendo que me hace falta.