Introducción a jQuery | ProgramandolaWeb

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.