Introducción a jQuery
Guia de introducción a jQuery donde encontraras la informacion necesaria para poder aprender la implementasion, sintaxis y eventos que pueden utilizarse con este Framework de JavaScript.
JQuery es sin ninguna duda el mejor de los frameworks de JavaScript, utilizado para mutiples tareas como animaciones, Ajax entre otras cosas.
Implementando JQuery en una web
Lo principal que hay que hacer es descargar la version de JQuery que vamos a utilizar aqui puedes descargarlo
página oficial de jQuery Existen dos formas implementar jQuery en una pagina web:
La primera es copiar la ruta del archivo y agregar una etiqueta script en el codigo de nuestra web.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
La segunda forma es guardar el contenido en el equipo y añadir la etiqueta script
con la ubicacion de nuestro archivo descargado.
<script src="jquery-1.10.2.min.js"></script>
Sentencias en JQuery
Las sentencias nos permiten ejecutar scripts una vez que todo esta cargado en nuestra pagina.
$( document ).ready()
Esta sentencia nos permite ejecutar nuestros scripts una vez todo el DOM de la pagina ha sido cargado.
$(document).ready(function(){ Codigo });
Selectores
Los selectores en jQuery forman parte de los mecanismo principales para seleccionar elementos del DOM. Existen tres principales selectores en jQuery:
El primero es de Etiqueta retorna una coleccion con los elementos correspondientes a la etiqueta seleccionada.
Etiqueta
Retorna una colección de elementos correspondiente a la etiqueta deseada.
$("h3")
Ejemplo practico seria:
$("h3").each(function(){
alert($(this).html());
});
Como puedes ver en este ejemplo se esta seleccionado todos los elementos
<h3> y luego recorremos dicha colección imprimiendo en una ventana de alerta su contenido.
El siguiente selector es de clase el cual retorna una coleccion de acuerdo a los elementos que estan asociados a dicha clase.
Clase
Este selector retorna una coleccion de elementos cuya clase sea la especificada.
$(".header")
Ejemplo practico :
$(".header").each(function(){
alert($(this).html());
});
Como puedes apreciar en este ejemplo se ha seleccionado todos los elementos cuya clase sea
header y luego recorremos dicha colección imprimiendo su contenido en una ventana de alerta.
Identificador
La tercer selector es de identificador el cual a travez de un id se retorna un elemento en especifico
$("#nav")
Ejemplo
var header = $("#nav");
alert(header.html());
Como puedes ver solo se esta imprimiendo en la ventana de alerta el contenido del elemento cuyo identificador sea nav.
