Introduccion a j_query

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ón
function 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

Introduccion a j_query

Más contenido relacionado

La actualidad más candente (18)

Destacado (20)

Similar a Introduccion a j_query (20)

Introduccion a j_query