Realizado por Canío – http://www.tostring.es

INTRODUCCIÓN

Qué es jQuery● Es un framework desarrollado en Javascript.

● Un framework es un conjunto de librerías.

● Su creador John Resig (1984), web: http://ejohn.org/

● Es un software libre y de código abierto, tiene doble Licencia como son: la de MIT y la Pública General de GNU v2.

● Básicamente sirve para escribir menos código y obtener más resultado, agilizando y facilitando el desarrollo del lado del cliente dentro de las aplicaciones web.

● Es la librería más popular y potente de

JavaScript

Características● Selección de elementos DOM. (Modelo de Objetos del Documento)

● Interactividad y modificaciones del árbol DOM.

● Eventos.

● Manipulación de la hoja de estilos CSS.

● Efectos y animaciones.

● Interacciones AJAX.

● Soporta extensiones.

● Compatible con los navegadores.

Qué es DOM● DOM es un estándar que permite acceder y manipular los

elementos de una página web mediante algún lenguaje de programación web, como JavaScript o su librería jQuery.

● Un documento web es un árbol que se va ramificando hasta llegar a los datos que serían las hojas.

● Esas ramas son lo que en DOM se entiende por nodos.

● Los dos nodos más importante son:

● Document: es el nodo raíz del documento DOM, el padre de todos.

● Element (etiquetas): ya sean pares de apertura y cierre <p></p> o las que funcionan de forma individual, como <img>.

EMPEZANDO...

1. Descargar el framework desde la página oficial o cargarlo desde los servidores de librerías de google:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

2. Cargamos el archivo localmente en nuestro documento:<script type="text/javascript" src="jquery.js"></script>

3.Crear un objeto jQuery a partir de la referencia a document:

var x;

x=$(document);

4.Accedamos al método “ready” de “document” para asegurarnos que todo el documento esta preparado y sea accesible:

x.ready(funcion);

Explicación del código anterior

var x; // declaramos una variable, por defecto se inicializará Undefined.

x=$(document); // Creamos un objeto de tipo jQuery a través de la referencia Document.

x.ready(funcion); // Accedemos al método ready del objeto x el cual se ejecutará tan pronto cargue el documento (recibe como parámetro la función que se quiere ejecutar)

function funcion() { }// Declaramos la función que queremos que se ejecute tan pronto cargue el método ready()

Acceder a los elementos del document

Selectores: (Los selectores se definen igual que en CSS)

● Selector de etiquetas: $("p");

● Selector por identificador: $("#idelemento")

● Selector por clase: $(".clase")

● Selector por varias clases: $(".clase1.clase2")

● Selector asterisco "*": $("*")

● Concatenar varios selectores distintos:

$("div,p") $(".clase1,.clase2") $("#id,.miclase,ul)

Algunas comparaciones entre JavaScript y jQuery

Diferencias a la hora de seleccionar un elemento.

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

b) $("#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) $(".class"): es el equivalente a getElementsByClassName() y, claro está, selecciona los elementos de determinada clase.

Eventos

Podemos ejecutar ciertas acciones ante las peticiones que hace algún usuario desde su navegador. Algunos ejemplos de eventos son:

● click()

Sirve para generar un evento cuando se produce un clic en un elemento de la página que previamente hemos indicado.

● dblclick()

Para generar 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 espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos.

(los eventos mouseover y mouseout en común)

enlace directo para ---> Ver lista completa en la página oficial

¿Cómo ejecutar alguna acción ante un evento?

1. Debemos seleccionar algún elemento.$(“#mielemento”)

2.Accedemos al evento que queremos gestionar.$(“#mielemento”).click(ejecutarAccion)

3.Cuando creamos un evento debemos pasar como parámetro la función que queremos correr cuándo este se ejecute. En este caso debe estar definida la funciónfunction ejecutarAccion() { }

4. A veces nos encontraremos eventos que hay que pasarle dos funciones separadas por ,

Efectos con Jquery (animate)

Podemos crear animaciones dentro de nuestro documento accediendo a los métodos del objeto Jquery que hemos creado, como por ejemplo:

Ver lista completa de efectos

var x=$(document);

x.ready(inicio);

function inicio(){

var x=$("#animar");

x.click(animate);}

function animate(){

var x=$("#objetivo");

x.animate({height:300},"slow");

x.animate({width:300},3000);

x.animate({height:100},"normal");

x.animate({width:100},1000);}

EXTRA

Método para cargar jQuery desde los servidores de google pero si falla poder cargarlo desde nuestro servidor local./*-----------------------------------------------------------------------------------*/

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

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

/*-----------------------------------------------------------------------------------*/

- window.jQuery es una variable, si no está definido, o sea, si no existe, da "undefined" que podemos considerarlo como false. Cuando cargas jQuery, automáticamente se crea la variable window.jQuery con el contenido de jQuery, entonces deja de estar undefined (false) para existir (true)- Si existe, es que el script de jQuery ya ha sido cargado desde google. Si no existe, es que jQuery no se ha cargado, en este caso, al dar false pasaría a comprobar lo que está después de ||, que siempre que esté bien escrito será true y se ejecutará

$(document).ready(function() {alert(“Gracias”);}

Por: Francisco Recio – www.tostring.es