7 J Query

Desarrollo Web
— Introducción a jQuery —
Dr. César García Osorio

cgosorio@ubu.es
Universidad de Burgos
Contenidos
1 Introducción
2 Javascript super básico
3 Selección de elementos
4 Eventos
5 Efectos y animaciones
6 Manipulación del DOM
7 Recorrido del DOM
8 Manipulación de secuencias
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery 2/48

Bibliografía
Contenidos extraídos de los siguientes manuales en línea:
Arkaitz Garro, jQuery,
http://www.arkaitzgarro.com/jquery/index.html.
The jQuery Foundation, jQuery Learning Center,
http://learn.jquery.com/about-jquery/
W3Schools, jQuery Tutorial,
https://www.w3schools.com/jquery/
Y de los siguientes vídeo tutoriales:

Little Web Hut, JavaScript and jQuery Tutorials,
http://www.littlewebhut.com/javascript/.
Brad Traversy, jQuery Crash Course, https://www.youtube.com/
playlist?list=PLillGF-RfqbYJVXBgZ_nA7FTAAEpp_IAc.
Rachel Appel y Jeremy Foster, Create HTML5 Apps with jQuery
Jump Start, https://mva.microsoft.com/en-US/training-courses/
8429?l=oqWOPtKz_4104984382.
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery 3/48
Introducción
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Introducción 4/48

Introducción ¿Qué es jQuery?1/2
q JQuery es una biblioteca Javascript rápida y pequeña, pero muy

rica en características y funcionalidad.
q Facilita enormemente la manipulación de documentos HTML,
la gestión de los eventos, la creación de animaciones y efectos,
e incluso la comunicación AJAX1 con el servidor.
q Además, es sencilla de usar y está preparada para tener un
comportamiento uniforme entre navegadores.
q Su carácter declarativo y funcional hace que uno se pueda
aprovechar de mucha de su funcionalidad sin tener
conocimientos profundos de Javascript.
1
Asynchronous JavaScript And XML

Introducción ¿Qué es jQuery?1/2
Ruta rápida para aprender jQuery con ejemplos

Esta presentación tiene conceptos importantes que es muy conveniente
conocer, por eso mi consejo es que la leas al menos una vez, no obstante,
también se puede aprender jQuery con los ejemplos en las direcciones:
• http://www.littlewebhut.com/javascript/
• https://www.w3schools.com/jquery/jquery_examples.asp2
• https://www.tutorialrepublic.com/jquery-examples.php
2 El sitio W3School tiene una historia de mala fama por los errores e información incorrecta
presentes en sus páginas. De hecho, hubo una página específicamente diseñada para señalar todos
estos errores: http://www.w3fools.com/. Aunque esta situación ha cambiado, tal como se reconoce
en esa misma página, para algunos su mala fama perdura. A pesar de esto, es un buen recurso para
principiantes, dado que presenta la información de forma concisa, con multitud de ejemplos y con
un lenguaje más fácil de entender que otros sitios más técnicos y completos como
https://developer.mozilla.org/bm/docs/Web/.

Introducción ¿Qué es JavaScript?
q JavaScript es un lenguaje de programación interpretado,

orientado a objetos, basado en prototipos, imperativo (pero
también funcional), débilmente tipado y dinámico.
q Se utiliza principalmente en el lado del cliente, implementado
como parte de un navegador web permitiendo crear interacción
con el usuario y páginas web dinámicas.
5 Es posible ejecutar JavaScript en el propio servidor (NodeJS ).
5 También en aplicaciones externas a la web, por ejemplo en
documentos PDF o aplicaciones de escritorio.
q JavaScript fue diseñado por Brendan Eich , un programador de
Netscape, con una sintaxis similar al lenguaje C.
q La relación con Java es sólo en el nombre, elegido como una
estrategia de marketing.
https://www.arkaitzgarro.com/javascript/capitulo-1.html#que-es-javascript

Javascript super básico
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 8/48

JavaScript super básico Inclusión de código1/4
Hay tres formas de insertar código JavaScript dentro de una

página:
¶ Directamente en la página como contenido de la etiqueta
script.
· Referenciando el archivo externo que contiene el código
usando el atributo src de la etiqueta script.
¸ Embebido en un elemento como valor de un atributo de evento.

Código Javascript en línea

1 <script>
2 console.log(’hello’);
3 </script>
Inclusión de un archivo externo JavaScript

1 <script src=’js/jquery.js’></script>
Código embebido asociado a un evento

1 <p onclick="console.log(’Un mensaje de prueba’)">
2 Un párrafo de texto.
3 </p>

Para poder utilizar jQuery hay que enlazarlo al documento, bien
porque lo descargamos primero (desde https://jquery.com/) y
luego lo referenciamos, bien porque lo incluimos desde un CDN3 .
Inclusión de jQuery previamente descargado
1 <script src="jquery-3.2.1.min.js"></script>
Inclusión de jQuery desde el CDN de Microsoft

1 <script src=
2 "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
3 </script>
Inclusión de jQuery desde el CDN de Google

1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/
jquery.min.js">
2 </script>
3 Content Delivery Network

Cuando se usa jQuery, para garantizar que todo el documento está

cargado antes de ejecutar ninguna de sus instrucciones, éstas se
incluyen como se muestra.
Inclusión de código jQuery
1 jQuery(document).ready(function() {
2 // Código jQuery
3 });
Inclusión de código jQuery con el alias de jQuery

1 $(document).ready(function() {
2 // Código jQuery
3 });

JavaScript super básico Terminología1/5
Script: cada uno de los programas, aplicaciones o trozos de

código creados con un lenguaje de programación no
compilado (por ejemplo JavaScript).
Sentencia: cada una de las instrucciones que forman un script.
Palabras reservadas: son las palabras que se utilizan para construir
las sentencias de JavaScript y que por tanto no pueden
ser utilizadas libremente como nombres de variables o
funciones: break, case, catch, continue, default,
delete, do, else, finally, for, function, if, in,
instanceof, let, new, return, switch, this, throw, try,
typeof, var, void, while, with.

Identificador: secuencia de caracteres que no coincide con una

palabra clave y que se utiliza para dar nombre a los
objetos de un programa.
Variable: en programación, una variable está formada por un
espacio de almacenaje en memoria y un nombre
simbólico (un identificador) que está asociado a dicho
espacio. Ese espacio contiene una cantidad de
información conocida o desconocida, es decir un
valor. El nombre de la variable es la forma usual de
referirse al valor almacenado. Esta separación entre
nombre y contenido permite que el nombre sea usado
independientemente de la información exacta que
representa.

Función: porción de código (secuencia de instrucciones) a la

que se le da un nombre (identificador) para que pueda
ser reutilizado en diversas partes del programa. Una
función puede devolver un valor.
Parámetro o argumento: variable especial a través de la que una
función puede recibir valores que utilizar en sus
instrucciones.
Llamar o invocar una función: Utilizar el nombre de la función
para ejecutar sus instrucciones.
Booleano: Tipo especial de datos que puede tomar uno de dos
posibles valores (true y false).
Expresión: Combinación de valores mediante operadores para
dar un nuevo valor.

Ejemplos de funciones y variables

1 function suma ( num1, num2 ) {
2 return num1 + num2;
3 }
4
5 function suma_y_muestra ( param1, param2 ) {
6 resultado = suma(param1, param2) ;
7 alert("El resultado es " + resultado);
8 }
9
10 var numero1 = 10; // let numero1 = 10;
11 var numero2;
12 numero2 = 12;
13 suma_y_muestra(numero1, numero2);
14 numero1 = 2;
15 suma_y_muestra(numero1,23);
16 ...


3 }
4
8 }
9
11 var numero2;
Declaración de función
12 numero2 = 12;
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Nombre de la función
12 numero2 = 12;
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Argumentos de la función
12 numero2 = 12;
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Cuerpo de la función
12 numero2 = 12;
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Retorno de valor
12 numero2 = 12;
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Invocación de función
12 numero2 = 12;
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Declaración de variable
12 numero2 = 12;
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Declaración e inicialización
12 numero2 = 12;
de variable
14 numero1 = 2;
16 ...


3 }
4
8 }
9
11 var numero2;
Nueva forma en ES6
12 numero2 = 12;
14 numero1 = 2;
16 ...

Objeto: entidad de código que agrupa variables (atributos) y

funciones (métodos). En Javascript «casi todo» es un objeto.
Creación de un objeto con inicializador de objeto
1 var persona = new Object();
2 persona.nombre = "Fulano"; persona.apellido = "Menganez";
3 persona.edad = 45;
Creación de un objeto con la notación literal (JavaScript Object Literal )

1 var persona = {nombre:"Fulano", apellido:"Menganez", edad:45}
Usando las propiedades de un objeto

1 alert(persona.nombre+persona["apellido"]+" hoy cumple años");
2 persona.edad += 1;
Usando los métodos de un objeto

1 "abracadabra".replace(/a/g,"o"); // => obrocodobro
2 "hola".toUpperCase(); // => HOLA
https://www.w3schools.com/js/js_object_definition.asp

JavaScript super básico Instrucción condicional
Instrucción condicional: instrucción que en función del valor de

una expresión, su condición, ejecuta o no una secuencia de
instrucciones u otra. Sus partes son:
Ejemplo de instrucción condicional

1 if ( x % 2 == 0 ) {
2 console.log(’Even’);
3 } else {
4 console.log(’Odd’);
5 }


q Una condición que se evalúa a un booleano.

1 if ( x % 2 == 0 ) {
3 } else {
5 }


q Una acción que se ejecuta si la condición es cierta.

1 if ( x % 2 == 0 ) {
3 } else {
5 }


q Una parte else opcional,

1 if ( x % 2 == 0 ) {
3 } else {
5 }


q Una parte else opcional, con la acción que se ejecuta cuando
la condición es falsa.

1 if ( x % 2 == 0 ) {
3 } else {
5 }

JavaScript super básico Bucle for
Instrucción for: instrucción que en función del valor de una
expresión, ejecuta repetidamente una secuencia de instrucciones
o no la ejecuta en absoluto. Sus partes son:
Ejemplo de instrucción for

1 for ( var i = 0 ; i < 10 ; i++ ) {
2 console.log(’Loop ’ + i );
3 }

q Una inicialización de una variable contador.

1 for ( var i = 0 ; i < 10 ; i++ ) {
3 }


1 for ( var i = 0 ; i < 10 ; i++ ) {
3 }

q Un incremento de la variable de contador.

1 for ( var i = 0 ; i < 10 ; i++ ) {
3 }

q El cuerpo con la secuencia de instrucciones a ejecutar en cada
iteración.

1 for ( var i = 0 ; i < 10 ; i++ ) {
3 }

iteración.

1 for ( var i = 0 ; i < 10 ; i++ ) {
3 }
Existe también un for ... in y el método forEach en las colecciones.

JavaScript super básico Bucle while
Instrucción while: otra forma de bucle en la que la condición de
finalización es más flexible que en el for. Sus partes son:
Ejemplo de instrucción while

1 var i = 1;
2 var j = 512;
3 while ( i < j ) {
4 console.log(’Loop (i:’ + i + ’, j:’ + j );
5 i += 3 ;
6 j /= 2 ;
7 }

q Un estado almacenado en una o varias variables que se
inicializan antes del bucle.

1 var i = 1;
2 var j = 512;
3 while ( i < j ) {
5 i += 3 ;
6 j /= 2 ;
7 }

q Una condición que comprueba la condición de salida.

1 var i = 1;
2 var j = 512;
3 while ( i < j ) {
5 i += 3 ;
6 j /= 2 ;
7 }

q Un cambio en el estado.

1 var i = 1;
2 var j = 512;
3 while ( i < j ) {
5 i += 3 ;
6 j /= 2 ;
7 }

q Un cambio en el estado.
iteración.
1 var i = 1;
2 var j = 512;
3 while ( i < j ) {
5 i += 3 ;
6 j /= 2 ;
7 }

JavaScript super básico Bucle do
Instrucción do: otra forma de bucle similar al while pero que
ejecuta su cuerpo al menos una vez. Sus partes son:
Ejemplo de instrucción do
1 var i = 0;
2 var j= 20;
3 do {
4 console.log(’Loop (i: ’ + i + ’, j: ’ + j );
5 i = i + 2;
6 j = j - 30 ;
7 } while ( i < j )

q Estado inicializado antes del bucle.
1 var i = 0;
2 var j= 20;
3 do {
5 i = i + 2;
6 j = j - 30 ;
7 } while ( i < j )

q Condición después de cuerpo del do que comprueba la
condición de salida.
1 var i = 0;
2 var j= 20;
3 do {
5 i = i + 2;
6 j = j - 30 ;
7 } while ( i < j )

q Cambio en el estado.
1 var i = 0;
2 var j= 20;
3 do {
5 i = i + 2;
6 j = j - 30 ;
7 } while ( i < j )

q Cambio en el estado.
q Cuerpo con la secuencia de instrucciones.
1 var i = 0;
2 var j= 20;
3 do {
5 i = i + 2;
6 j = j - 30 ;
7 } while ( i < j )

JavaScript super básico Interacción con el DOM1/3
Con JavaScript se puede acceder a los elementos del DOM
(Documento Object Model) con el que se representa todo
documento HTML. También se pueden cambiar las propiedades
de los elementos a los que se accede.
Acceso por ID y cambio de contenido de un elemento
1 document.getElementById("demo").innerHTML = ’Hello <i>you</i>’;

q El objeto document representa el documento HTML.


q Con el método getElementById podemos acceder al elemento
cuyo ID coincide con el argumento pasado al método.


q La propiedad innerHTML permite cambiar el contenido de un
elemento.


elemento.
q Como valor le asignamos una cadena con el nuevo contenido,
que puede incluir etiquetas HTML.


elemento.
q Como valor le asignamos una cadena con el nuevo contenido,
que puede incluir etiquetas HTML.
q Las cadenas de JavaScript se pueden delimitar tanto con
comillas simples, como con comillas dobles.
Además de usando el identificador, se puede acceder a los

elementos usando:
q El nombre de la etiqueta: getElementsByTagName(nombre).
q La clase del elemento: getElementsByClassName(clase).
q Incluso se pueden usar selectores CSS:
querySelectorAll(selector).
q Para determinados elementos existen objectos o colecciones
específicas: document.anchors, document.embeds,
document.forms, document.images, document.links,
document.scripts, document.title, ...

Además de cambiar el contenido, se pueden cambiar:

q El valor de los atributos:
document.getElementById(id).atributo = nuevo valor.
5 Donde el atributo puede ser: src, name, href, title, alt, width,
height,
...
q Los propiedades CSS:
document.getElementById(id).style.propiedad = nuevo valor.
5 Donde la propiedad puede ser: color, display, width, border, font,
margin, height, ...
Pero para la mayoría de las manipulaciones sencillas es mucho

más conveniente usar la biblioteca jQuery.

Selección de elementos
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Selección de elementos 25/48

Selección de elementos
q La forma más habitual de usar jQuery es hacer una selección

preliminar de los elementos del documento sobre los que se
quiere actuar, para a continuación llevar a cabo alguna acción
sobre los elementos seleccionados.
q Para la selección de los elementos jQuery soporta la mayoría
de los selectores CSS3 y algunos otros adicionales no estándar
(http://api.jquery.com/category/selectors/).
5 Selección por tipo de elementos, por clase, por identificador, por
atributo, por valor de atributo, por relación jerárquica (hijo,
descendiente, hermano, padre), por estado (enabled, disabled,
hidden, selected), posición (first, last), ...

Uso típico de jQuery
Ejemplo de uso típico de jQuery
2 $( ’ .example > div ’ ) .mouseenter (
3 function() { $(this).animate({ height: ’+=10px’ }); }
4 );
5 $( ’ .example > div ’ ) .mouseleave (
6 function() { $(this).animate({ height: ’-=10px’ }); }
7 );
8 $( ’ .example > div ’ ) .click (
9 function() { $(this).toggle(1000); }
10 );
11 });
q Selección de elementos.

4 );
7 );
10 );
11 });
q Función jQuery (en el ejemplo, de detección de eventos).

4 );
7 );
10 );
11 });
q Función jQuery (en el ejemplo, de detección de eventos).
q La función que utiliza la función jQuery (en el ejemplo,
funcionalidad que se ejecuta cuando tiene lugar el evento).
Más ejemplos
2 $("button#test").click(function(){
3 $("p.toHide").hide();
4 });
5 });
Cuando el usuario haga click en el botón de identificador test,

todos los párrafos de clase toHide desaparecerán del documento.
1 $(’span.code’).dblclick( function(){
2 $(this).parent().children(’.b’)
3 .css({’color’: ’blue’, ’background-color’: ’yellow’});
4 })
Cuando se haga click en algún span de clase code, hacer que todos
sus hermanos de clase b cambien a color a azul y fondo amarillo.
Ver más ejemplos en
http://www.littlewebhut.com/javascript/jquery_selectors/
Eventos
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Eventos 29/48

Algunos eventos
Las siguientes funciones asocian una función con un evento, la
función asociada se ejecuta cuando el evento tiene lugar sobre el
o los elementos. Cuando se utilizan sin argumento, «disparan» el
evento sobre el o los elementos.
.nombreEvento(func) ≡ .on("nombreEvento", func)
Función Evento asociado

.blur() Evento que se dispara cuando el elemento pierde el foco.
.click() Evento de hacer click.
.dblclick() Evento de hacer doble click.
.focus() Evento que se dispara cuando un elemento recibe el foco.
Evento que se dispara cuando un elemento o sus hijos reciben
.focusin()
el foco.
Evento que se dispara cuando el elemento o sus hijos pierden
.focusout()
el foco.
http://api.jquery.com/category/events/

Algunos eventos
Evento de pulsar una tecla cuando el foco está sobre el elemento
.keydown()
(incluidas las teclas modificadoras: ALT, CTRL, ...).
Evento de pulsar una tecla cuando el foco está sobre el elemento
.keypress()
(sólo cuando la pulsación envía un carácter).
.keyup() Evento de liberar una tecla tras haber sido pulsada.
.mousedown() Evento de pulsar un botón del ratón.
.mouseenter() Evento de entrar con el ratón en el área del elemento.
.mouseleave() Evento de sacar el ratón del área del elemento.
Evento de mover el ratón sobre el área del elemento, el evento
.mousemove()
ocurre con cada movimiento del ratón, incluso de un sólo pixel.
Evento de sacar el puntero del ratón del área del elemento, o
.mouseout()
sacarlo del área de cualquier elemento hijo.
Evento de entrar con el ratón dentro del área del elemento, o
.mouseover()
dentro del área de cualquier elemento hijo.
.mouseup() Evento de liberar un botón del ratón después haberlo pulsado.

Algunos eventos
.ready() Evento de finalización de carga del DOM.
.resize() Evento de cambio de tamaño de la ventana del navegador.
Evento que se dispara cuando el usuario desplaza el contenido
.scroll()
del elemento.
.submit() Evento que se dispara cuando el usuario envía un formulario.
La submisión efectiva podría cancelarse invocando el método .preventDefault() del objeto event .
Función Explicación
Asocia simultáneamente funciones a los eventos mouseenter y
.hover()
mouseleave.
.off() Elimina las funciones asociadas a un evento. Es el nuevo .unbind() .
Asocia al evento que se le pasa como primer argumento, la
.on()
función que se le pasa como último argumento. Es el nuevo .bind() .
Asocia una función con un evento, pero tras la primera ejecu-
.one()
ción la función se desasocia del evento.
Algunos ejemplos en http://www.littlewebhut.com/javascript/jquery_events/

Efectos y animaciones
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Efectos y animaciones 33/48

Funciones para efectos y animaciones 1/2
Función Breve descripción

Ejecuta una animación personalizada en los elementos selec-
.animate()
cionados.
Elimina todas las funciones pendientes en cola para todos los
.clearQueue()
elementos seleccionados.
Establece un retraso para todas las funciones en cola en los ele-
.delay()
mentos seleccionados.
Ejecuta la siguiente función en la cola de efectos y la elimina
.dequeue()
de la cola.
Hace aparecer los elementos seleccionados, cambia su opaci-
.fadeIn()
dad de totalmente transparentes a totalmente opacos.
Desvanece los elementos seleccionados, los hace transparen-
.fadeOut()
tes.
Ajusta la opacidad de los elementos seleccionados al valor pa-
.fadeTo()
sado como argumento.
.fadeToggle() Alterna entre los métodos .fadeIn() y .fadeOut() .

Funciones para efectos y animaciones 2/2
Detiene la animación en ejecución, elimina todas las animacio-
.finish() nes pendientes en cola y completa todas las animaciones para
los elementos seleccionados.
.hide() Oculta los elementos seleccionados.
Muestra las funciones en cola en los elementos seleccionados.
.queue()
.show() Muestra los elementos seleccionados.

Hace aparecer los elementos seleccionados al desplegarlo ha-
.slideDown()
cia abajo.
.slideToggle() Alterna entre los métodos .slideUp() y .slideDown() .
Hace desaparecer los elementos seleccionados al plegándolos
.slideUp()
hacia arriba.
Detiene la animación actualmente en ejecución para los ele-
.stop()
mentos seleccionados.
.toggle() Alterna entre los métodos .hide() y .show() .

Manipulación del DOM
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Manipulación del DOM 36/48

Funciones para manipulación del DOM 1/6

.addClass() Añade una o más clases a los elementos de la selección.
Inserta contenido por detrás de cada uno de los elementos se-
.after()
leccionados (como hermanos de los elementos).
Añade el contenido que se le pasa como argumento al final de
.append() los elementos seleccionados (dentro de los propios elemen-
tos).
Añade los elementos en la selección a los elementos especi-
.appendTo() ficados por su argumento (similar a .append() , pero con los
roles de contenido/receptor del contenido intercambiados).
Con el nombre de un atributo como argumento, recupera el
valor de dicho atributo para el primer elemento de la selección;
.attr()
con dos argumentos, nombre de atributo y valor, establece el
valor del atributo para todos los elementos de la selección.
Inserta contenido por delante de cada elemento de la selección
.before()
(como hermanos de los elementos).


.clone() Hace una copia de los elementos seleccionados.
Obtiene el valor de una propiedad CSS del primer elemen-
.css() to, o establece valores de propiedades CSS para todos los
elementos de la selección.
Elimina los elementos seleccionados del DOM (aunque
.detach()
mantiene datos y eventos asociados).
Elimina todo el contenido de los elementos seleccionados
.empty()
(pero no los propios elementos).
Comprueba si alguno de los elementos seleccionados tiene
.hasClass()
la clase cuyo nombre se le pasa como argumento.
Recupera el alto del primer elemento de la selección, o esta-
.height()
blece el alto de todos los elementos en la selección.
Recupera el contenido del primer elemento, o estable el con-
.html()
tenido de todos.

Obtiene la altura del primer elemento (incluido el relleno,
.innerHeight() pero no el borde), o estable la altura interna (sin el borde)
de todos los elementos de la selección).
.innerWidth() Como .innerHeight() , pero para el ancho.
Inserta los elementos de la selección después del elemento
indicado por su argumento (o después de los elementos clo-
.insertAfter()
nando los elementos de la selección tantas veces como sea
necesario).
.insertBefore() Como .insertAfter() , pero insertando por delante.
Recupera las coordenadas del primer elemento, o estable-
.offset() ce las de todos los elementos en la selección (coordenadas
dentro del documento).
Devuelve los elementos que son contexto de posicionado de
.offsetParent()
los elementos en la selección.
.outerHeight() Como .innerHeight() , pero incluyendo los bordes.
.outerWidth() Como .innerWidth() , pero incluyendo los bordes.


Devuelve la posición del primer elemento de la selección
.position()
(relativa a su elemento padre).
.prepend() Como .append() , pero al principio de los elementos.
Como .appendTo() pero al principio del elemento (o los ele-
.prependTo()
mentos) indicados por su argumento.
Devuelve o estable valores de las propiedades de los elemen-
.prop() tos DOM (que no tiene porque coincidir con los atributos de
los elementos HTML, para eso se usa .attr() ).
Elimina los elementos seleccionados (su contenido, los even-
.remove()
tos asociados y los propios elementos).
.removeAttr() Elimina uno o más atributos de los elementos seleccionados.
.removeClass() Elimina una o varias clases de los elementos seleccionados.
.removeProp() Elimina una propiedad establecida por el método .prop() .


Reemplaza los elementos indicados en su argumento por los
.replaceAll()
elementos en la secuencia sobre la que se aplica.
Reemplaza los elementos en la secuencia sobre la que se
aplica con el contenido que se le pasa como argumento (co-
.replaceWith()
mo .replaceAll() , pero con los roles de nuevo contenido/-
contenido reemplazado intercambiados).
Recupera el desplazamiento horizontal del primer elemento,
.scrollLeft()
o los establece para todos los elementos de la selección.
.scrollTop() Como .scrollLeft() , pero para el desplazamiento vertical.
Obtiene la concatenación de los contenidos de los elemen-
.text() tos en la selección, o establece los contenidos para todos
ellos.
Para cada elemento de la selección, elimina o añade de for-
.toggleClass()
ma alternativa las clases que se le pasan como argumentos.


Elimina los padres de los elementos de la selección, dejando
.unwrap()
en su lugar los propios elementos.
Obtiene el valor del primer elemento de la secuencia, o es-
.val() tablece el valor de todos los elementos de la secuencia (se
usa principalmente para elementos de formulario).
Obtiene el ancho del primer elemento de la secuencia, o lo
.width()
establece para todos los elementos de la secuencia.
Añade un nuevo padre a cada uno de los elementos de la
.wrap()
secuencia.
Añade un elemento para que sea padre común de todos los
.wrapAll()
elementos de la secuencia.
Añade un nuevo padre al contenido de cada uno de los ele-
.wrapInner() mentos de la secuencia (cada elemento tendrá ahora un nue-
vo hijo, que es padre de su antiguo contenido).

Recorrido del DOM
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Recorrido del DOM 43/48

Funciones para el recorrido del DOM 1/3

Devuelve todos los hijos directos del elemento seleccionado
.children()
(excluidos nodos de texto y comentario).
.closest() Devuelve el primer ancestro del elemento seleccionado.
Devuelve todos los elementos hijos directos del elemento se-
.contents()
leccionado (incluidos los nodos de texto y comentario).
Devuelve un elemento con un número de índice específico
.eq()
de los elementos seleccionados (se empieza a contar en 0).
Reduce el conjunto de elementos seleccionados a aquellos
.filter()
que coinciden con el selector o pasen la prueba de la función.
Devuelve los descendientes de los elementos en la secuencia
.find()
que cumplan el criterio de selección usado como argumento.
.first() Devuelve el primer elemento de los elementos seleccionados.
Devuelve todos los elementos que tienen uno o más elemen-
.has()
tos de los indicados en su argumento.
.last() Devuelve el último elemento de los elementos seleccionados.


.next() Devuelve el siguiente hermano del elemento seleccionado.
Devuelve todos los elementos hermanos siguientes del ele-
.nextAll()
mento seleccionado.
Devuelve los hermanos que siguen a cada elemento selec-
.nextUntil() cionado hasta encontrar uno que concuerde con el selector
(y que no es incluido).
Elimina del conjunto de elementos seleccionados los que
.not()
coincidan con el selector que se le pasa como argumento.
Devuelve el primer elemento padre posicionado (y que es
.offsetParent()
por tanto el contexto de posicionado del elemento).
.parent() Devuelve el padre del elemento seleccionado.
.parents() Devuelve todos los ancestros del elemento seleccionado.
Devuelve los ancestros de cada elemento seleccionado hasta
.parentsUntil() encontrar uno (que no incluye) que concuerde con el selec-
tor.


.prev() Devuelve el hermano que precede al elemento seleccionado.
Devuelve todos los elementos que preceden al elemento se-
.prevAll()
leccionado.
Devuelve los hermanos que preceden a cada elemento selec-
.prevUntil() cionado hasta encontrar uno (que no incluye) que concuerde
con el selector.
.siblings() Devuelve todos los hermanos del elemento seleccionado.
Reduce el conjunto de elementos seleccionados a un sub-
.slice() conjuntos de aquellos que se encuentran entre el valor de los
índices que se pasan como argumento.

Manipulación de secuencias
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Manipulación de secuencias 47/48

Manipulación de secuencias

.add() Agrega elementos al conjunto de elementos seleccionados.
.addBack() Agrega el conjunto anterior de elementos al conjunto actual.
.each() Ejecuta una función para cada elemento seleccionado.
Finaliza la operación de filtrado más reciente en la cadena
.end() actual y devuelve el conjunto de elementos seleccionados a
su estado anterior.
Compara el conjunto de elementos seleccionados con un se-
.is() lector, elemento, u objeto jQuery, y devuelve true si al menos
uno de ellos concuerda con el argumento dado.
Pasa cada elemento en el conjunto seleccionado a través de
.map() una función, produciendo un nuevo objeto jQuery que con-
tiene todos los valores de retorno.
cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Manipulación de secuencias 48/48

7 J Query

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

7 J Query

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web

Dr. César García Osorio

2 Javascript super básico

6 Manipulación del DOM

7 Recorrido del DOM

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery 2/48

Y de los siguientes vídeo tutoriales:

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Introducción 4/48

q JQuery es una biblioteca Javascript rápida y pequeña, pero muy

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Introducción 5/48

Ruta rápida para aprender jQuery con ejemplos

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Introducción 6/48

q JavaScript es un lenguaje de programación interpretado,

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Introducción 7/48

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 8/48

Hay tres formas de insertar código JavaScript dentro de una

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 9/48

Código Javascript en línea

Inclusión de un archivo externo JavaScript

Código embebido asociado a un evento

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 10/48

Inclusión de jQuery desde el CDN de Microsoft

Inclusión de jQuery desde el CDN de Google

3 Content Delivery Network

Cuando se usa jQuery, para garantizar que todo el documento está

Inclusión de código jQuery con el alias de jQuery

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 12/48

Script: cada uno de los programas, aplicaciones o trozos de

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 13/48

Identificador: secuencia de caracteres que no coincide con una

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 14/48

Función: porción de código (secuencia de instrucciones) a la

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 15/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Ejemplos de funciones y variables

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 16/48

Objeto: entidad de código que agrupa variables (atributos) y

Creación de un objeto con la notación literal (JavaScript Object Literal )

Usando las propiedades de un objeto

Usando los métodos de un objeto

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 17/48

Instrucción condicional: instrucción que en función del valor de

Ejemplo de instrucción condicional

cgosorio@ubu.es Desarrollo Web . Introducción a jQuery . Javascript super básico 18/48

Instrucción condicional: instrucción que en función del valor de

Ejemplo de instrucción condicional