JQUERY

DOM

QUE ES JQUERY?

PARA QUE SIRVE?

JQUERY
HACE MAS
FACIL
Interactuar
con doc.
HTML
Add.
Interaccin
con AJAX

Crear
animaciones

Manipular el
DOM

Manejar
eventos

QUE ES DOM?
El Modelo de Objetos del Documento es una
(API) para documentos HTML y XML. Define la
estructura lgica de los documentos y el modo
en que se accede y manipula un documento.

COMO FUNCIONA JQUERY

USANDO DOM

OBTENER Y ASIGNAR
CONTENIDO
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

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 notacin 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.
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
despus del elemento seleccionado.

before(contenido): agrega el contenido

antes del elemento seleccionado.
insertAfter(selector): agrega el
contenido despus 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 seleccionado con el
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.
replaceWith(contenido): Reemplaza el
elemento seleccionado con el contenido de
parmetro.
replaceAll(selector): Reemplaza todos
los elementos seleccionados con los
elementos buscados.

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 idntico al orinal.

GRAZIE