Breve Introducción a jquery

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Breve Introducción a jquery"

Catalina Rojas Cordero
hace 5 años
Vistas:

1 Breve Introducción a jquery Grupo de Ingeniería del Software y Bases de Datos Universidad de Sevilla Por qué jquery? Diferentes navegadores, diferentes DOM JavaScript jquery hace de interfaz entre los navegadores y el código JavaScript jquery es JavaScript con funciones para facitar algunas tareas Marzo 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 1 IISSI 1

Qué necesito para empezar a trabajar? Desgargar jquery desde http://jquery.com/download/ Para mejorar el rendimiento es mejor descargar la versión comprimida o mini

2 Qué necesito para empezar a trabajar? Desgargar jquery desde Para mejorar el rendimiento es mejor descargar la versión comprimida o mini En la cabecera del documento <script src=" <script src= scripts/jquery-x.y.z.min.js"></script> Marzo 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 2 ó El DOM Menú document Pasta Ensalada Lomo Flamenquin head title <html> <title>menú Cafeta</title> document (html) body head h1 <h1>menú </h1> title Menú Cafeta body ul <ul> h1 <>Pasta</> Menú <>Ensalada</> ul <ul> <>Lomo</> <>Flamenquin</> Pasta Ensalada </html> Marzo 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 3 IISSI 2

3 Se inspira en los selectores de CSS CSS h1{ } #menu.button jquery $( h1 ) $( #menu ) $(.button ) El equivalente en JavaScript sería: document.getelementsbytagname( h1 ) document.getelementbyid( menu ) document.getelementsbyclassname( button ) Marzo 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 4 Se pueden usar jerarquías <h1>menú </h1> <ul id= primeros > <>Pasta</> <>Ensalada</> <ul class= segundos > <>Lomo</> <>Flamenquin</> $( #primeros ) padre descendiente OJO: Selecciona todos los descendientes aunque no sean directos $( #primeros,.segundos ) $( #primeros > ) Selecciona varios elementos OJO con la, Selecciona solo los hijos directos Marzo 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 5 IISSI 3

4 Se pueden usar pseudoclases <h1>menú </h1> <ul id= primeros > <>Pasta</> <>Ensalada</> <>Lentejas</> <ul class= segundos > <>Lomo</> <>Flamenquin</> $( #primeros :first ) $( #primeros :last ) $( #primeros :odd ) $( #primeros :even ) Selecciona el primer y último elemento Selecciona los elementos pares e impares OJO: empieza por 0 $( #primeros).find() $( ).first() Es lo mismo que con jerarquías pero es más rápido Es lo mismo que con pseudoclases pero es más rápido Marzo 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 6 Se puede recorrer de atrás para adelante $( ).first(); $( ).first().next(); $( ).first().next().prev(); next() y prev() se pueden apcar a cualquier elemento de una sta Se puede ir al padre de un elemento $( ).first().parent(); parent() se puede apcar a cualquier elemento Se pueden seleccionar los hijos $( #primeros ).children( ); children() a diferencia de find() devuelve sólo hijos directos Marzo 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 7 IISSI 4

5 Comentarios, sugerencias, Introducción a la Ingeniería del Software y a los Sistemas de Información 8 Breve Introducción a jquery Historia de esta presentación Creación de las diapositivas, Marzo de 2013 (David Benavides). Pequeñas modificaciones, Marzo de 2014 (David Benavides). Introducción a la Ingeniería del Software y a los Sistemas de Información 9 IISSI 5

Documentos relacionados

JAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E)

APRENDERAPROGRAMAR.COM JAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript