Está en la página 1de 13
JQUERY DOM
JQUERY DOM
JQUERY DOM

JQUERY

DOM

¿QUE ES JQUERY?
¿QUE ES JQUERY?
¿PARA QUE SIRVE? JQUERY Interactuar con doc. HTML Add. Interacción con AJAX HACE MAS FACIL
¿PARA QUE SIRVE? JQUERY Interactuar con doc. HTML Add. Interacción con AJAX HACE MAS FACIL
¿PARA QUE SIRVE? JQUERY Interactuar con doc. HTML Add. Interacción con AJAX HACE MAS FACIL
¿PARA QUE SIRVE?
¿PARA QUE SIRVE?

JQUERY

Interactuar

con doc.

HTML

Add. Interacción con AJAX

HACE MAS FACIL

Manipular el DOM

Crear

animaciones

Manejar

eventos

¿QUE ES DOM? El Modelo de Objetos del Documento es una (API) para documentos HTML
¿QUE ES DOM? El Modelo de Objetos del Documento es una (API) para documentos HTML
¿QUE ES DOM?
¿QUE ES DOM?

El Modelo de Objetos del Documento es una (API) para documentos HTML y XML. Define la

Documento es una (API) para documentos HTML y XML. Define la estructura lógica de los documentos

estructura lógica de los documentos y el modo

en que se accede y manipula un documento.

documentos HTML y XML. Define la estructura lógica de los documentos y el modo en que
COMO FUNCIONA JQUERY USANDO DOM
COMO FUNCIONA JQUERY
USANDO DOM
OBTENER Y ASIGNAR CONTENIDO 
OBTENER Y ASIGNAR
CONTENIDO
OBTENER Y ASIGNAR CONTENIDO  html(): retorna el HTML contenido en el primer elemento seleccionado. 

html(): retorna el HTML contenido en el primer elemento seleccionado.

html(«contenido»): le asigna el valor de la variable contenido como contenido HTML a todos los elementos encontrados. text(): retorna el texto contenido en el primer elemento seleccionado.

text(«contenido»): le asigna el valor de la variable contenido como texto a todos los elementos encontrados.

MANIPULACION DE UNO O VARIOS ATRIBUTOS HTML 
MANIPULACION DE UNO O
VARIOS ATRIBUTOS HTML
MANIPULACION DE UNO O VARIOS ATRIBUTOS HTML  attr(nombre): Retorna el valor del atributo “nombre” del

attr(nombre): Retorna el valor del atributo “nombre” del elemento seleccionado.

attr({nombre: valor}): Asigna varios atributos del elemento seleccionado. Para asignar los atributos se usa la notación de

objeto de javascript (JSON).

attr(nombre, valor): Asigna “valor” al atributo “nombre” del elemento seleccionado.

removeAttr(nombre): Elimina el atributo “nombre” del elemento seleccionado.

 INSERTANDO CONTENIDO append(contenido): agrega el contenido dentro del los elementos seleccionados. 
 INSERTANDO CONTENIDO append(contenido): agrega el contenido dentro del los elementos seleccionados. 

INSERTANDO CONTENIDO
INSERTANDO CONTENIDO

append(contenido): agrega el contenido dentro del los elementos seleccionados.

appendTo(selector): agrega el contenido a otros elementos especificados.

prepend(contenido): agrega el contenido del

primero dentro de los elementos

seleccionados.

prependTo(selector): agrega el contenido del primero a otros elementos especificados.

after(contenido): agrega el contenido

después del elemento seleccionado.

 before(contenido): agrega el contenido antes del elemento seleccionado.  insertAfter(selector): agrega el
 before(contenido): agrega el contenido antes del elemento seleccionado.  insertAfter(selector): agrega el


before(contenido): agrega el contenido antes del elemento seleccionado.

insertAfter(selector): agrega el

contenido después de otros elementos elementos seleccionados.

insertBefore(contenido): agrega el

contenido antes de otros elementos

elementos seleccionados.

ENVOLVIENDO CONTENIDO Introduce un elemento seleccionado, dentro de otro nuevo.  wrap(html): Envuelve cada elemento
ENVOLVIENDO CONTENIDO
Introduce un elemento seleccionado, dentro de otro nuevo.
wrap(html): Envuelve cada elemento seleccionado con el
 wrap(html): Envuelve cada elemento seleccionado con el html especificado.  wrap(elemento): Envuelve cada

html especificado.

wrap(elemento): Envuelve cada elemento seleccionado con el elemento especificado.

wrapAll(html): Envuelve el grupo de elementos seleccionados con el html especificado.

wrapAll(elemento): Envuelve el grupo de elementos

seleccionados con el elemento especificado.

wrapInner(html): Envuelve los elementos hijos de cada elemento seleccionado con el html especificado.

wrapInner(elemento): Envuelve los elementos hijos de cada elemento seleccionado con el elemento especificado.

REEMPLAZANDO CONTENIDO Cambia el contenido de un elemento por otro nuevo designado arbitrariamente. 
REEMPLAZANDO CONTENIDO Cambia el contenido de un elemento por otro nuevo designado arbitrariamente. 
REEMPLAZANDO CONTENIDO
REEMPLAZANDO CONTENIDO
REEMPLAZANDO CONTENIDO Cambia el contenido de un elemento por otro nuevo designado arbitrariamente. 

Cambia el contenido de un elemento por otro

nuevo designado arbitrariamente.

replaceWith(contenido): Reemplaza el elemento seleccionado con el contenido de

parámetro.

replaceAll(selector): Reemplaza todos los elementos seleccionados con los

elementos buscados.

VACIAR,REMOVER Y CLONAR ELEMENTOS  empty: vaciamos
VACIAR,REMOVER Y CLONAR
ELEMENTOS
empty: vaciamos

remove: removemos

clone: copia elementos y los retorna, de modo que se puede agregar otro

elemento al DOM idéntico al orinal.

GRAZIE 
GRAZIE 
GRAZIE 

GRAZIE