JQuery

y
r
e
u
JQ
Ral Hernndez
Carlos Osorio
Francisco Osorio
Capitulo 4
DOM Manipulation Methods
Capitulo 5
Event Methods
e
u
Q
?
y
r
e
u
q
J
s
e
Es una biblioteca de JavaScript que permite simplificar la manera de interactuar

con los documentos HTML, junto con ser la biblioteca de JavaScript ms utilizada
jQuery consiste en un nico fichero JavaScript que contiene las funcionalidades
comunes de DOM (Document Object Model)
DOM Manipulation Methods
El objetivo es presentar algunos mtodos de

manipulacin tales como la modificacin, insercin
eliminacin y la copia, estos ltimos conocidos como
fijadores por como cambian los valores de las
propiedades.
Atributos Generales
.attr() (getter)
.attr() sirve para recuperar y alterar atributos de los elementos de una pgina
HTML como por ejemplo title, height, width, href, value entre ellos.
.attr(attributeName)
<a href="http://www.google.cl" title=Google">El Pas</a>
<br>
<a href="http://www.mozilla.org" title="Fundacin Mozilla">Mozilla
Fundation</a>
<br>
<a href="http://es.openoffice.org/" title="Siute de programas de oficina">Open
Office</a>
Ejemplo
.removeAttr()
El objetivo de .removeAttr() es para eliminar por completo un atributo de
cualquier elemento de la pgina
<html>
<head>
<title>mtodo removeAttr</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#boton").click(function(i){
$("td").removeAttr("noWrap");
});
});
</script>
</head>
Propiedades de Estilo
.css()
Actualmente una de los ms utilizados sirve para cambiar y obtener el valor
de cualquier atributo css.
$("#micapa").click(function(){
$(this).css("width", function(index, value){
//alert (value);
var aumento = prompt("cuanto quieres aumentar?", "25");
return (parseInt(value) + parseInt(aumento)) + "px";
});
})
Ejemplo
.height()
.height() (getter)
.height()
.height() (setter)
.height(value)
.innerHeight()
.innerHeight()
.outerHeight()
.outerHeight([includeMargin])
.width() (getter)
.width()
.width() (setter)
.width(value)
.innerWidth()
.innerWidth()
.outerWidth()
.outerWidth([includeMargin])
$("#contenido").height("200px");
Con la funcin height() modificamos el alto del contenedor con
id=contenido.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>innerHeight demo</title>
<style>p { margin:10px;padding:5px;border:2px solid #666; }
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );</script>
</body>
</html>
</style>
Posicin de Documentos
.offset()
.offset()
.offset() (setter)
.offset(coordinates)
.position()
.position()
.scrollTop() (getter)
.scrollTop()
.scrollTop() (setter)
.scrollTop(value)
.scrollLeft() (getter)
.scrollLeft()
.scrollLeft() (setter)
.scrollLeft(value)
.toggleClass()
Existe la posibilidad de que en vez de agregar o quitar una clase de manera
definitiva queramos simplemente intercalar el estilo al momento de dispararse
una accin, es decir, muchas veces al pasar nuestro mouse sobre un elemento
deseamos que este cambie de color pero una vez desenfocado queremos que
vuelva a su estilo anterior. Para estas ocasiones jQuery nos brinda la funcin
toggleClass.
.html()
Obtiene el contenido HTML del primer elemento en el conjunto de elementos
emparejados.
Ejemplo
Seleccin de textos
.text()
Obtiene el contenido del texto combinando cada elemento en el conjunto de
elementos que coinciden.
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
The code $('div.demo-container').text()
Resultado:
Demonstration Box list item 1 list item 2
.text() (setter)
Establecer el contenido de cada elemento en el conjunto de elementos
emparejados al texto especificado.
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
Resultado
<p>This is a test</p>
Ejemplo
.val() (getter)
se utiliza principalmente para obtener los valores de los elementos del
formulario
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
.replaceWith()
nos permite eliminar el contenido de la DOM e insertamosnuevo
contenido en su lugar con una sola llamada
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
Reemplazamos con
$('.second').replaceWith('<h2>New heading</h2>');
Ejemplo
Dentro de la Insercin
.prepend() y .prependto()
.prepend() y .prependTo() son mtodos realizan la misma tarea. La mayor
diferencia est en la sintaxis, especficamente en la colocacin de los
contenidos y de destino.
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Insertamos:
$('.inner').prepend('<p>Test</p>');
Ejemplo
.before() y .insertbefore()
Estos mtodos realizan la misma tarea. La mayor diferencia est en la
sintaxis, especficamente en la colocacin de los contenidos y de destino.
Con .before(), el selector de la expresin que precede el mtodo es el
contenedor que se inserta en el contenido. Con. Insertbefore(), por otro
lado, el contenido precede el mtodo ya sea como un selector de expresin
o como marcado creado en la marcha, y se inserta antes del contenedor de
destino.
<h2>Greetings</h2>
</div>
$('.inner').before('<p>Test</p>');
<h2>Greetings</h2>
<p>Test</p>
<p>Test</p>
</div>
Ejemplo
.after() y
.insertafter()
Los mtodos .after() y .isertafter() realizan la misma tarea. La mayor

diferencia est en la sintaxis, especficamente en la colocacin de los
contenidos y del destino. Con .after(), el selector de la expresin que
precede el mtodo es el contenedor despus de el que se inserta el
contenido. Con .insertafter(), por otro lado, el contenido precede del
mtodo ya sea como un selector de expresin o como marcador creado
sobre la marcha, y se inserta despus de que el contenedor de destino.
<h2>Greetings</h2>
</div>
$('.inner').after('<p>Test</p>');
Ejemplo
Mtodos de insercin
.wrap()
Puede tomar cualquier cadena o un objeto que podra ser transmitida a
los $() funcin de creacin que especifica una estructura DOM. Esta
estructura no puede anidar varios niveles de profundidad, sino que debe
contener slo un elemento ms profundo. La estructura ser envuelta
alrededor de cada uno de los elementos en el conjunto de elementos
emparejados.
</div>
$('.inner').wrap('<div class="new" />');
<div class="new">
</div>
<div class="new">
</div>
</div>
Ejemplo
.wrapAll()
Puede tomar cualquier cadena o un objeto que podra ser transmitida a
las $() De creacin para especificar una estructura DOM. Esta estructura
no puede anidar varios niveles de profundidad, sino que debe contener
slo un elemento ms ntimo. La estructura ser envuelta alrededor de
todos los elementos en el conjunto de elementos emparejados como un
solo grupo
</div>
$('.inner').wrapAll('<div class="new" />');
<div class="new">
</div>
</div>
.wrapInner()
Puede tomar cualquier cadena o un objeto que podra ser pasado a la
funcin $() de creacin para especificar una estructura DOM. Esta
estructura puede estar anidada en varios niveles de profundidad, pero
deben contener slo un elemento ms profundo. La estructura ser
envuelta alrededor de el contenido de cada uno de los elementos en el
conjunto de elementos emparejados.
</div>
$('.inner').wrapInner('<div class="new" />');
<div class="inner"> <div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
Mtodos de Copia
.clone()
El mtodo .clone() ,se utiliza junto con uno de los mtodos de insercin, es una
manera conveniente de duplicar los elementos en una pgina.
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$('.hello').appendTo('.goodbye');
<div class="goodbye">
Goodbye
</div>
</div> $('.hello').clone() .appendTo('.goodbye');
<div class="goodbye">
Goodbye
</div>
</div>
Ejemplo
Mtodos para Eliminar

.empty()
Este mtodo elimina elementos no slo nios (y otras descendiente), sino que
tambin cualquier texto dentro del conjunto de elementos emparejados. Esto
se debe a que de acuerdo con el DOM la especificacin de cualquier cadena
de texto dentro de un elemento se considera un nodo hijo de ese elemento
</div>
$('.hello').empty();
<div class="hello"></div>
</div>
Ejemplo
.remove()
Al igual que .empty(). Mtodo remove() toma elementos del DOM. Y
nosotros utilizamos .remove() cuando queremos eliminar el elemento en
s, as como todo lo en su interior. Adems de los propios elementos,
todos los eventos consolidados y los datos jQuery asociados con
eliminar los elementos.
</div>
$('.hello').remove();
</div>
.detach()
El mtodo .detach() es el mismo que .remove() excepto que .detach()
mantiene todo jQuery con datos asociados con los elementos eliminados.
Este mtodo es til cuando los elementos son retirados para ser reinsertado
en el DOM en un momento posterior.
.unwrap()
El mtodo .unwrap() elimina el padre del elemento. Este es efectivamente el
inverso del mtodo .wrap(). Los elementos coincidentes (y sus hermanos, si los
hay) reemplazan sus padres dentro de la estructura DOM.
Ejemplo
Event Methods
La biblioteca jQuery nos permite
observar el comportamiento del
usuario y del navegador, y
reaccionar en consecuencia. En
este captulo, examinamos de
cerca cada uno de los mtodos de
eventos disponibles en turno. Estos
mtodos se utilizan para registrar
conductas tengan efecto cuando el
usuario interacta con el
navegador, y para manipular an
ms los comportamientos
registrados.
Controlador de eventos
.bind()
El mtodo .bind() es el principal medio de fijacin de la conducta de un
documento. Se permiten todos los tipos de eventos de JavaScript, como el
enfoque, mouseover, y cambiar el tama opara eventype().
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
.unbind()
Cualquier controlador que se ha unido con .bind() se puede quitar con.
unbind(). En el caso ms simple sin argumentos .unbind() elimina todos los
controladores conectados a los elementos.
$('#foo').unbind('click');
Ejemplo
.one()
Este mtodo es idntico al .bind(), con la excepcin de que el controlador no
est consolidado despus de su primera invocacin.
$('#foo').one('click', function() {
alert('This will be displayed only once.');
});
.trigger()
Los controladores de eventos asociados con .bind() o uno de sus mtodos de
acceso directo son activos cuando se produce el evento correspondiente. Sin
embargo, pueden ser despedidos manualmente con el mtodo .trigger(). Una
llamada a .trigger() ejecuta los controladores en el mismo orden en que seran si
el evento se desencadena naturalmente por el usuario.
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
Ejemplo
.triggerHandler()
El mtodo .triggerHandler() se comporta de manera similar a .trigger(), con la
siguientes excepciones:
El mtodo .TriggerHandler() no hace que el comportamiento predeterminado de
un evento ocurra (tal como un envo de formulario)
Adems mientras .Trigger () funcionar en todos los elementos encontrados por
el objeto jQuery, .triggerHandler() slo afecta al primer elemento coincidente
Los eventos creados con .triggerHandler() no brotan del DOM jerarquico,si no
que son manejados por el elemento de destino directamente, no hacer nada
En lugar de devolver el objeto jQuery (para permitir el encadenamiento),.
triggerHandler() devuelve cualquier valor que fue devuelto por el ltimo
controlador que caus a ser ejecutado
.live()
Este mtodo es una variacin en el mtodo bsico . bind() para la fijacin de
controladores de eventos a los elementos. Cuando .bind() es llamado, los
elementos que el objeto jQuery se refiere a obtener el controlador conectado,
sin embargo, los elementos que se introducen ms adelante no lo hacen, por
lo que requerira otra llamada .bind ().
<body>
<div class="clickme">
Click here
</div>
</body>
$('.clickme').bind('click', function() {
$.print('Bound handler called.');
});
Delegacin de Eventos
.die()
Cualquier controlador que se ha unido con la .live() se puede quitar con .die().
Este mtodo es anlogo al .unbind(), que se utiliza para quitar controladores
conectados con .bind ().
Ejemplo
Documentos de Carga
.ready()
Mientras JavaScript proporciona el evento de carga para ejecutar cdigo cuando
una pgina esta rindiendo, este evento no disparar hasta que todos los activos,
tales como imgenes, hayan sido recibido en su totalidad. En la mayora de los
casos, la secuencia de comandos se puede ejecutar tan pronto como el DOM
.ready() ha sido totalmente construido. El controlador pasa a .ready() y est
garantizado que se ejecuta despus de que el DOM est listo, por lo que este es
el mejor lugar para conectar otros controladores de eventos y ejecutar otro cdigo
jQuery. Cuando el uso de scripts que dependen del valor de las propiedades de
estilo CSS, es importante hacer referencia a las hojas de estilo externas como
incorporar elementos de estilo antes de hacer referencia a los scripts.
$(document).ready(function() {
$.print('Handler for .ready() called.');
});
Ejemplo
.load()
El evento de carga es enviada a un elemento cuando l y todos sus sub-elementos

han sido completamente cargados. Este evento puede ser enviado a cualquier
elemento asociado a un enlace como imgenes, scripts, marcos, y el cuerpo del
propio documento.
<img src="book.png" alt="Book" id="book" />
$('#book').load(function() {
$.print('Handler for .load() called.');
});
Ejemplo
.unload()
Este mtodo es un acceso directo. Bind (unload', handler). El evento de descarga
se enva al elemento windows cuando el usuario se desplaza lejos de la pgina.
Esto podra significar una de muchas cosas. El usuario podra haber hecho clic en
un enlace al salir de la pgina, o ha escrito una nueva URL en la barra de
direcciones. El avance y retroceso de botones activarn el evento. Cierre de la
ventana del navegador har que el evento sea disparado. Incluso una recarga de la
pgina en primer lugar crear un evento de descarga.
$(window).unload(function() {
alert('Handler for .unload() called.');
});
.error()
Este mtodo es un acceso directo a .bind ('error', handler).El evento de error
se enva a elementos tales como imgenes, las cuales hacen referencia de
un documento y cargado por el navegador. Se llama si el elemento no era
cargado correctamente.
<img src="missing.png" alt="Book" id="book" />
$('#book').error(function() {
$.print('Handler for .error() called.');
});
Eventos del Mouse

.mousedown()
Este mtodo es un acceso directo .bind ('mousedown', handler) en la primera
variacin y .trigger('mousedown') en el segundo. El evento dousedown() se enva
a un elemento cuando el puntero del ratn est sobre else presiona elemento y el
botn del ratn. Cualquier elemento HTML puede recibir este evento.
<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div>
Ejemplo
.mouseup()
El evento mouseup() enva a un elemento cuando el puntero del mouse est sobre
el elemento, y se suelta el botn del ratn. Cualquier elemento HTML puede recibir
este evento.
<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div>
$('#target').mouseup(function() {
$.print('Handler for .mouseup() called.');
});
Ejemplo
.click()
El evento click se enva a un elemento cuando el puntero del mouse est
sobre el elemento y se presiona el botn del ratn y puesto en libertad.
Cualquier elemento HTML puede recibir este evento.
<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div>
$('#target').click(function() {
$.print('Handler for .click() called.');
});
Ejemplo
.dblclick()
El evento DblClick se enva a un elemento cuando el elemento se hace doble
clic. Cualquier elemento HTML puede recibir este evento.
<div id="target">
Double-click here
</div>
<div id="other">
Trigger the handler
</div>
$('#target').dblclick(function() {
$.print('Handler for .dblclick() called.');
});
Ejemplo
.toggle()
El mtodo .toggle() se une un controlador para el evento click. Por lo tanto, las
normas descritas para la activacin de la aplicacin, son bajo clic aqu.
<div id="target">
Click here
</div>
$('#target').toggle(function() {
$.print('First handler for .toggle() called.');
}, function() {
$.print('Second handler for .toggle() called.');
});
Ejemplo
.mouseover()
El evento mouseover se enva a un elemento cuando el puntero del mouse
entra en el elemento. Cualquier elemento HTML puede recibir este evento.
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
$('#outer').mouseover(function() {
$.print('Handler for .mouseover() called.');
});
Ejemplo
.mouseout()
El evento mouseout se enva a un elemento cuando el puntero del mouse
sale del elemento. Cualquier elemento HTML puede recibir este evento.
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
$('#outer').mouseout(function() {
$.print('Handler for .mouseout() called.');
});
Ejemplo
.mouseenter()
El evento MouseEnter JavaScript es propiedad de Internet Explorer. Debido a
la utilidad general del evento, jQuery simula este caso de modo que se puede
utilizar independientemente del navegador. Este evento se enva a un
elemento cuando el puntero del ratn entra en el elemento. Cualquier
elemento HTML puede recibir este evento.
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
.hover()
El mtodo .hover() enlaza los controladores para ambos eventos
MouseEnter y MouseLeave. Podemos utilizarlo para aplicar simplemente el
comportamiento de un elemento durante el tiempo que el ratn este dentro
del elemento.
$obj.mouseenter(handlerIn);
$obj.mouseleave(handlerOut);
.mousemove()
Este mtodo es un acceso directo .bind ('mousemove', handler) en la primera
variacin, y .trigger('mousemove') en el segundo.
<div id="target">
Move here
</div>
<div id="other">
Trigger the handler
</div>
Ejemplo
Eventos de Formulario
.focus()
Este evento es implcitamenteaplicable a un conjunto limitado de
elementos como elementos de formulario (<input>, <select>,y otros) y
enlaces (<a href>)
<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').focus(function() {
$.print('Handler for .focus() called.');
});
Ejemplo
.change()
El evento .change() se enva a un elemento cuando su valor cambia. Este
evento se limita a <input campos type="text">, box <textarea> y elementos
<select>. Para seleccionar box, el evento se activa inmediatamente cuando el
usuario hace una seleccin con el mouse. Sin embargo, para los otros tipos de
elementos, el evento se aplaza hasta que el elemento pierde el foco
<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
$('.target').change(function() {
$.print('Handler for .change() called.');
});
Ejemplo
.select()
El evento select es enviado a un elemento cuando el usuario realiza una
seleccin de texto en su interior. Este evento est limitado a <input type="text">
campos y cuadros de <textarea>
<form>
<input id="target" type="text" value="Hello ther<div id="other">
Trigger the handler
</div>
$('#target').select(function() {
$.print('Handler for .select() called.');
});
Ejemplo
.submit()
El evento submit se enva a un elemento cuando el usuario est intentando enviar
un formulario. Slo puede estar unido a los elementos <form>. Los formularios
pueden ser presentadas por hacer clic en un botn explcita <input type="submit">
o pulsando Intro cuando un elemento del formulario tiene el foco.
<form id="target" action="destination.html">
<input type="text" value="Hello there" />
<input type="submit" value="Go" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').submit(function() {
$.print('Handler for .submit() called.');
return false;
});
Ejemplo
Eventos del Teclado

.keydown()
El evento keydown() se enva a un elemento cuando el usuario primero presiona
una tecla en el teclado. Se puede acoplar a cualquier elemento, pero el evento
slo se enva al elemento que tiene el foco. Elementos de la interfaz pueden
variar entre los navegadores, pero los elementos de formulario siempre se puede
obtener un enfoque por lo que son candidatos razonables para este tipo de
eventos.
<form>
<input id="target" type="text" value="Hello there" />
</form>
<div id="other">
Trigger the handler
</div>
$('#target').keydown(function() {
$.print('Handler for .keydown() called.');
});
Ejemplo
.keypress()
El evento de pulsacin de tecla se enva a un elemento cuando el navegador
registra teclado de entrada. Esto es similar al caso keydown(), excepto en el caso
de repeticiones de teclas. Si el usuario presiona y mantiene una tecla, un evento
KeyDown se activa una vez, pero por separado los eventos de pulsacin de teclas
se activan para cada carcter insertado. Adems, las teclas modificadoras(como
Shift) provocar eventos KeyDown, pero no los eventos de pulsacin de tecla. Un
controlador de eventos de pulsacin de tecla se puede unir a cualquier elemento,
pero el evento es enviado al elemento que tiene el foco. Elementos de la interfaz
pueden variar entre navegadores, pero elementos de formulario puede conseguir
siempre el enfoque y por lo tanto son candidatos razonables para este tipo de
evento.
<form>
</form>
<div id="other">
Trigger the handler
</div>
$('#target').keypress(function() {
$.print('Handler for .keypress() called.');
});
.keyup()
El evento keyup() se enva a un elemento cuando el usuario suelta una tecla en el
teclado. Se puede acoplar a cualquier elemento, pero el evento slo se enva al
elemento que tiene el foco. Elementos de la interfaz pueden variar entre los
navegadores, pero los elementos de formulario pueden siempre obtener el foco lo son
candidatos razonables para este tipo de eventos.
<form>
</form>
<div id="other">
Trigger the handler
</div>
$('#target').keyup(function() {
$.print('Handler for .keyup() called.');
});
Eventos del navegador

.resize()
El evento de cambio de tamao se enva al elemento de ventana cuando el
tamao del navegador ventana cambia.
$(window).resize(function() {
$.print('Handler for .resize() called.');
});
Ejemplo
.scroll()
El evento scroll es enviado a un elemento cuando el usuario se desplaza a un lugar
diferente enel elemento. Se aplica a los objetos de ventana, as como a los marcos y
elementos desplazable scon la propiedad de desbordamiento de CSS programado
para desplazar (o auto cuando explcito del elementoaltura es menor que la altura de
su contenido).
<div id="target"
style="overflow: scroll; width: 200px; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>
<div id="other">
Trigger the handler
</div>
Ejemplo

JQuery

Cargado por

Información del documento

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

JQuery

Cargado por

Copyright:

Formatos disponibles

y

Es una biblioteca de JavaScript que permite simplificar la manera de interactuar

DOM Manipulation Methods

El objetivo es presentar algunos mtodos de

Los mtodos .after() y .isertafter() realizan la misma tarea. La mayor

Mtodos para Eliminar

El evento de carga es enviada a un elemento cuando l y todos sus sub-elementos

Eventos del Mouse

Eventos del Teclado

Eventos del navegador

También podría gustarte