Sesion09-Jquery-I

INSTITUTO DE COMPUINGLÉS DE ORIENTE

Páginas Web Optimizadas (AJAX) Programador de Sistemas y Redes

1

Área de Investigación en Computación

INSTITUTO DE COMPUINGLÉS DE ORIENTE

Sesión 09 jQuery I

2

Área de Investigación en Computación

INSTITUTO DE COMPUINGLÉS DE ORIENTE

jQuery es una biblioteca de JavaScript rápida, pequeña y rica en características.

Permite que cosas como Ajax y las animaciones sean mucho más simples de programar con una API fácil y sencilla, tiene compatibilidad con una gran cantidad de navegadores. jQuery a cambiando la forma en que millones de programadores escriben código de JavaScript.

Algunos de los miembros corporativos de jQuery son IBM e Intel.

3

Área de Investigación en Computación

INSTITUTO DE COMPUINGLÉS DE ORIENTE

Componentes de jQuery Existen tres elementos de jQuery El núcleo.- Es una pequeña descarga que contiene todos los metodos necesarios para acceder y manipular elementos dentro de una página y para tener funcionalidad AJAX. jQuery UI.- Es una biblioteca que incluye elementos de UI (interfaz de usuario) tales como calendarios, cuadros de diálogo, efectos de animación, etc. jQuery plug-ins.- Hay actualmente mas de 4000 plug-ins que aumentan la capacidad y funcionalidad de jQuery.

4

Área de Investigación en Computación

INSTITUTO DE COMPUINGLÉS DE ORIENTE

Componentes de jQuery Algunos de los componentes de jQuery UI • • • • • • • •

Árboles Autocompletar Botones Selectores de fecha Pop ups Barras de progreso Sliders Tabs

5

Área de Investigación en Computación

INSTITUTO DE COMPUINGLÉS DE ORIENTE

Sintaxis de jQuery Con jQuery seleccionas elementos HTML (haces un query) y realizar acciones en ellos.

La sintaxis de jQuery es muy simple $(selector).acción()

selector es el objeto HTML. acción es lo que se va ha hacer con él.

Por ejemplo: $(this).hide() - Oculta el elemento actual. $("p").show() - Muestra todos los párrafos <p> que hay en la página. $(".azul").hide() - Oculta todos los elementos que usan la clase (estilo) llamado "azul". $("#btnCerrar").show() - Muestra el elemento que tiene la id "btnCerrar".

6

Área de Investigación en Computación

INSTITUTO DE COMPUINGLÉS DE ORIENTE

Sintaxis de jQuery Todo el código de jQuery debe encerrarse dentro de la estructura siguiente:

$(document).ready ( function() { // Código } ) Esto previene que el código jQuery se ejecute antes de que la página web termine de cargarse. Es una excelente práctica esperar a que la página web se cargue por completo antes de realizar cualquier acción.

7

Área de Investigación en Computación

INSTITUTO DE COMPUINGLÉS DE ORIENTE

Cómo incluir jQuery en nuestro sitio Ya que jQuery esta disponible sin costo alguno, existen varias formas de conseguirlo.

1. Descargándolo desde su sitio web oficial: http://jquery.com/ E incluirlo después usando una etiqueta <script> <script src=“@Href(“~/Scripts/jquery-1.6.2.min.js”)” type=”text/javascript”></script> 2. Incluyéndolo en nuestra página desde sitios web externos como Google o Microsoft. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js” type=”text/javascript”></script> 8

Área de Investigación en Computación