Manual de JQuery

JQuery, parte 6: Mtodo .
each()
10 febrero, 2013 Ferchu Javascript / Ajax, JquerySin comentarios
En el anterior posteo, JQuery, parte 5: Selectores, aprendimos cmo levantar los

distintos elementos de nuestra pgina ya sea por su nombre de etiqueta, su id o
su class. Por ejemplo aplicarle un estilo css con el mtodo .css() a una serie de
elementos con una determinada class.
Ahora bien, supongamos que nosotros quisiramos recorrer cada uno de esos
elementos individualmente como si fuese una especie de for o while, esto es
posible? Por supuesto.
Siguiendo como ejemplo el cdigo que di en mi anterior posteo de selectores,
pensemos esta situacin, tenemos varios productos con input checkbox y un botn
para realizar una compra, pero en caso de que el usuario no tilde ninguno de
esos checkbox debera aparecer un mensaje por pantalla indicndole que ha
seleccionado ninguno. Para ello nosotros tendramos que recorrer cada uno de esos
elementos y preguntar si estn tildados.
El cdigo quedara ms o menos igual que la ltima vez, pero por ahora no nos
preocupemos porque funcione lo que acabo de decir:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form id="formulario" action="" method="post">
<fieldset>
<legend> Seleccione sus productos </legend>
<ul id="lista_productos">
<li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>

<li> <input type="checkbox" class="producto" value="2" /> Wii </li>
<li> <input type="checkbox" class="producto" value="3" /> PS3 </li>
<li> <input type="checkbox" class="producto" value="4" /> PS Vita </li>
<li> <input type="checkbox" class="producto" value="5" /> Atari </li>
</ul>
<input type="button" id="enviar" value="Enviar" />
</fieldset>
</form>
</body>
</html>
Ahora deberamos crear una funcin de Javascript que recorra cada uno de
esoscheckbox por su nombre de class producto y preguntando si cada elemento
est tildado. Algo como esto:
function verificarProductosSeleccionados(){
var resultado = false;
$(".producto").each(function(){
if($(this).is(':checked')){
resultado = true;
}
});
return resultado;
}
Ahora repasemos, tengo una variable de nombre resultado que ser la encargada
de devolver true si hay al menos un producto tildado y false si no hay ninguno.
Luego levantamos todos los checkbox con el nombre class producto y
preguntamos si el mismo est tildado (is(:checked)) en caso de que lo est, la
variable resultado pasar a igualarse a true, tal vez haya ms de uno tildado y
cambiar varias veces el valor de la variable, pero siempre a true.
Una vez finalizado el bucle .each() tendremos el valor de nuestra variable que nos
indicar si encontr alguno tildado o no. Esta funcin debera dispararse al presionar
el botn. El cdigo quedara:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
function verificarProductosSeleccionados(){
var resultado = false;
$(".producto").each(function(){
if($(this).is(':checked')){
resultado = true;
}
});
return resultado;
}
$(document).ready(function(){
$("#enviar").click(function(){
var seleccionados = verificarProductosSeleccionados();
if(seleccionados){
$("#formulario").css('display', 'none');
alert('Gracias!!!');
}else{
alert('Usted debe seleccionar al menos un producto')
}
});
});
</script>
</head>
<body>
<form id="formulario" action="" method="post">
<fieldset>
<legend> Seleccione sus productos </legend>
<ul id="lista_productos">
<li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>
<li> <input type="checkbox" class="producto" value="2" /> Wii </li>
<li> <input type="checkbox" class="producto" value="3" /> PS3 </li>
<li> <input type="checkbox" class="producto" value="4" /> PS Vita </li>
<li> <input type="checkbox" class="producto" value="5" /> Atari </li>
</ul>
<input type="button" id="enviar" value="Enviar" />
</fieldset>
</form>
</body>
</htm
jQuery val(): Asignar y obtener

valores de los input, select y textarea
Con jQuery val() podemos asignar u obtener valores de ciertos
elementos del DOM de una web, estos elementos son los inputs de
formularios y las etiquetas select y textarea.
Aunque anteriormente habl sobre cmo obtener el valor de un radio
button y cmo obtener el valor de un select he creido conveniente hablar
de las posibilidades que nos da esta funcin dejQuery. Otra funcin similar
pero que vale para obtener o asignar texto es jQuery text().
SINTAXIS DE JQUERY VAL()

Vamos a ver las diferentes sintaxis de esta funcin extrada de su web
oficial:
La 1 es para obtener el valor de un elemento:
$(elemento).val()
Esta opcin no requiere ms parmetros que el
del elemento seleccionado.

La 2 para asignar un valor a un elemento:
$(elemento).val(valor)
Se elige el elemento seleccionado.

Se pasa el valor que queremos asignarle.
EJEMPLO PARA ASIGNAR Y OBTENER EL VALOR DE UN INPUT

TEXT CON JQUERY VAL()
Vamos a ver cmo podemos asignar y obtener el valor de un input
text en este primer ejemplo, primero os pongo el cdigo jQuery de
obtencin del valor.
JavaScript
<script type='text/javascript'
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
$(document).ready(function()
{
$("#boton01").click(function () {
//saco el valor accediendo a un input de tipo text y name = nombre
alert($('input:text[name=nombre]').val());
//saco el valor accediendo al id del input = nombre
alert($("#nombre").val());
//saco el valor accediendo al class del input = nombre
alert($(".nombre").val());
});
});
</script>
Y aqu los 2 botones:

XHTML
1 <input type="text" name="nombre" id="nombre" class="nombre" value="">

2 <input type="button" name="boton01" id="boton01" value="Sacar el valor del input text">
Os explico el cdigo jQuery donde he obtenido el valor de 3 maneras

diferentes.
Detectamos que se haga click en el botn con id = boton01.
Saco un primer alert accediendo al valor del input texto con name =
nombre.
Un segundo alert accediendo al valor del input texto con id = nombre.
Termino con otro alert accediendo al valor del input texto con class =
nombre.
Ahora os pongo el cdigo para asignar valores al input text, tambin lo

podis probar en elprimer ejemplo:
$(document).ready(function()
{
$("#boton02").click(function () {
//saco el valor accediendo a un input de tipo text y name = nombre2 y lo asigno a uno
con name = nombre3
$("#nombre3").val($("#nombre2").val());
});
});
</script>
Tambin os pongo el cdigo de los botones:

XHTML
<input type="text" name="nombre2" id="nombre2" class="nombre2" value="">
<input type="text" name="nombre3" id="nombre3" class="nombre3" value="">
<input type="button" name="boton02" id="boton02" value="Asginar al input 2 el valor del
primero">
Os explico el cdigo jQuery para la asignacin de valores.
Detectamos que se haga click en el botn con id = boton02.
Al input con id = nombre3 se le asigna el valor del input con id = boton2
OBTENER EL VALOR DE UN RADIO BUTTON CON JQUERY VAL()

En este post que hice anteriormente explico de varias maneras de cmo
obtener el valor de un radio button.
OBTENER EL VALOR DE UN SELECT (OPTION) CON JQUERY

VAL()
Tambin escrib este post para obtener el valor de un select con jquery.
dsdsd
Obtener el valor de un select (option) con jQuery

Publicado por Aner Barrena el 18 julio, 2013 | 0 comentarios
Vamos a ver cmo obtener el valor de un select con jQuery. Este campo
desplegable es muy usado y muchas veces se requiere saber su valor antes de
validarse el formulario al que pertenece.
En un post anterior hice mencin y ejemplo prctico

con jQuery para sacar dicho valor de un select, es el post del
mtodo jQuery change(). Ahora os lo detallo con calma.
CMO OBTENER EL VALOR DE UN SELECT CON JQUERY

CHANGE
En esta demo tenemos el ejemplo que casi seguro os puede valer para
vuestros proyectos:
$(document).ready(function(){
$("select[name=color1]").change(function(){
alert($('select[name=color1]').val());
$('input[name=valor1]').val($(this).val());
});
$("#ejemplo2").change(function(){
alert($('select[id=ejemplo2]').val());
$('#valor2').val($(this).val());
});
$(".ejemplo3").change(function(){
alert($('select[class=ejemplo3]').val());
$('.valor3').val($(this).val());
});
});
</script>
Os he puesto 3 formularios con campos select y mismo contenido, la

diferencia entre los 3 radica en como voy a realizar la comprobacin y
asignacin del cambio de valor de cada formulario.
1. Comprobacin/asignacin de valor por atributo name. En la primera
comprobacin detecto el cambio de valor de un campo select de nombre
color1, saco su valor con un alert y asigno su valor al input con jQuery
val().
2. Comprobacin/asignacin de valor por atributo id. En la segunda
comprobacin detecto que el elemento con id ejemplo2 cambia de valor,
saco su valor con un alert y asigno su valor al input con jQuery val().
3. Comprobacin/asignacin de valor por atributo class. En la tercera
comprobacin detecto como el elemento con class ejemplo3 ha cambiado
su valor, saco su valor con un alert y asigno su valor al input con jQuery
val().
Como veis los ejemplos son bien sencillos, en el cdigo fuente de

la demo encontrareis el cdigo de los 3 formularios.
Otra opcin es usar el mtodo jQuery click(), pero resultara incmodo
para el usuario y casi imposible validar el formulario, ya que el primer click
en el select siempre sera para desplegar los diferentes valores del select.
jQuery load(): cargar un html externo en un div

Publicado por Aner Barrena el 2 enero, 2013 | 104 comentarios
Hay veces en las que en la interactuacin con el usuario necesitamos

actualizar cierta parte de la pgina sin tener que refrescarla. Una opcin
que suelo utlizar con frecuencia es la de jQuery load().
Con jQuery load() podemos cargar en un determinado div un archivo
externo al script (php, html, asp) en el momento que necesitemos o bajo
peticin del usuario mediante formularios, botones, enlaces
Este archivo externo al script deber estar alojado en el mismo dominio de
la web.
Otras funciones de jQuery interesantes son: jQuery animate(), jquery
show() y hide(), jQuery toggle() y jQuery html().
SINTAXIS DE JQUERY LOAD()

JavaScript
.load( url [, data] [, callback(responseText, textStatus, XMLHttpRequest)] )
1. url: es la cadena que contiene la url a cargar. (obligatoria).

2. data: parametros que podemos pasar para ser tratados por el destino de
la url. (opcional).
3. callback: funcin invocada despus de procesarse la url. (opcional).
Este mtodo es una sencilla manera de obtener datos del servidor desde
el mismo HTML, aunque se parece mucho a $.get(url, data, success) ,
solo que la primera es un mtodo y la segunda es una funcin global.
En las demos que os pongo a continuacin vamos a forzar dicha carga
externa mediante el mtodo jQuery Click(), que se ejecutar cuando se
pulse el botn.
EJEMPLO 1 DE JQUERY LOAD() PASANDO COMO

PARMETRO LA URL
XHTML
<html>
<head>
<title>jQuery Load</title>


$(document).ready(function() {
$("#boton").click(function(event) {
$("#capa").load('/demos/03-jquery-load01.php');
});
});
</script>
</head>
<body>
<div id="capa">Pulsa 'Actualizar capa' y este texto se actualizar</div>
<br>
<input name="boton" id="boton" type="button" value="Actualizar capa" />
</body>
</html>
1. Primera demo de ejemplo del script.

2. Lnea 5: referenciamos la libreria jQuery.
3. Script lnea 8: Tal y como comento en el cdigo, cuando se clicke el botn
con id=boton cargaremos el archivo /demos/03-jquery-load01.php en el
div con id=capa.
4. Lnea 17: Div que actualizaremos con el nuevo contenido, cuyo id=capa.
5. Lnea 19: Botn con id=boton que ser el ejecutor del script.
6. El archivo externo /demos/03-jquery-load01.php contiene el texto TEXTO
ACTUALIZADO!!!!.
EJEMPLO 2 DE JQUERY LOAD() CON PARAMETROS

Y CALLBACK
XHTML
<html>
<head>

$("#capa").load("/demos/2013/03-jquery-load03.php",
{valor1:'primer valor', valor2:'segundo valor'}, function(response, status, xhr) {
if (status == "error") {
var msg = "Error!, algo ha sucedido: ";
$("#capa").html(msg + xhr.status + " " +
xhr.statusText);
}
});
});
});
</script>
</head>
<body>
<br>
</body>
</html>
1. Segunda 2 de ejemplo del script.

2. Me voy a centrar en la diferencia que hay con el script anterior. A partir de
la lnea 11 he puesto que se cargue el archivo externo, he pasado 2
variables y pregunto si se ha ejecutado correctamente.
3. Envo de variables: en el ejemplo veris que paso valor1 y valor2 con su
contenido, este envo se hace por POST, si queremos hacer un envo por
GET tendriamos que poner las variables seguidas de la url. Ejemplo:
load(/demos/2013/03-jquery-load03.php?
variable1=primervalor&variable2=segundovalor
4. Callback: En la misma llamada pregunto por el status de la carga del
archivo, si hay error cargo en el mismo div el error.
Importante y a tener en cuenta es que el callback nos devuelve
el estatus e independientemente si el archivo existe o no el script se
ejecuta.
Aqu solo sacamos el error para que nos demos cuenta del mismo, de lo
contrario no se cargara nada ni se vera el tipo de error.
5. Archivo destino: solamente saco los 2 valores enviados por POST.
EJEMPLO 3 DE JQUERY LOAD() PARA OBTENER

CIERTO CONTENIDO DEL HTML EXTERNO
XHTML
<html>
<head>

$("#capa").load('/demos/2013/03-jquery-load05.php
#contenido');
});
});
</script>
</head>
<body>
<br>
</body>
</html>
1. Tercera demo de ejemplo del script.

2. Lnea 11: si nos fijamos despues de la url he puesto #contenido, ese ser
el contenido delid del html externo que heredaremos para nuestra
pgina actual. El resto se ignora.
3. El html externo tiene la siguiente maquetacin:
XHTML
<div id="contenido">CONTENIDO QUE TIENE QUE APARECER</div>

<div id="no">ESTO NO DEBE APARECER</div>
4. Podis probar la demo y ver que efectivamente solo coge el contenido del
id=contenido.
CARGAR EL HTML EXTERNO AL HACER CLICK EN UN ENLACE

DE TEXTO
Otro ejemplo prctico en esta nueva cuarta demo para cargar un html
externo una vez clickado un enlace de texto, aqu el cod fuente:
JavaScript
$("#boton2").click(function(event) {
$("#capa").load('/demos/2013/03-jquery-load01.php');
});
});
</script>
EVITAR CONFLICTOS CON OTRAS LIBRERAS
En caso de trabajar con otras libreras distintas a jQuery os recomiendo en

caso de problemas usar jQuery noConflict().

Manual de JQuery

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de JQuery

Uploaded by

Copyright:

Available Formats

JQuery, parte 6: Mtodo .

En el anterior posteo, JQuery, parte 5: Selectores, aprendimos cmo levantar los

<li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>

<script type="text/javascript" src="js/jquery.js"></script>

jQuery val(): Asignar y obtener

SINTAXIS DE JQUERY VAL()

Esta opcin no requiere ms parmetros que el

del elemento seleccionado.

Se elige el elemento seleccionado.

EJEMPLO PARA ASIGNAR Y OBTENER EL VALOR DE UN INPUT

Y aqu los 2 botones:

1 <input type="text" name="nombre" id="nombre" class="nombre" value="">

Os explico el cdigo jQuery donde he obtenido el valor de 3 maneras

Detectamos que se haga click en el botn con id = boton01.

Un segundo alert accediendo al valor del input texto con id = nombre.

Ahora os pongo el cdigo para asignar valores al input text, tambin lo

Tambin os pongo el cdigo de los botones:

Os explico el cdigo jQuery para la asignacin de valores.

Detectamos que se haga click en el botn con id = boton02.

Al input con id = nombre3 se le asigna el valor del input con id = boton2

OBTENER EL VALOR DE UN RADIO BUTTON CON JQUERY VAL()

OBTENER EL VALOR DE UN SELECT (OPTION) CON JQUERY

Obtener el valor de un select (option) con jQuery

En un post anterior hice mencin y ejemplo prctico

CMO OBTENER EL VALOR DE UN SELECT CON JQUERY

Os he puesto 3 formularios con campos select y mismo contenido, la

Como veis los ejemplos son bien sencillos, en el cdigo fuente de

jQuery load(): cargar un html externo en un div

Hay veces en las que en la interactuacin con el usuario necesitamos

SINTAXIS DE JQUERY LOAD()

1. url: es la cadena que contiene la url a cargar. (obligatoria).

EJEMPLO 1 DE JQUERY LOAD() PASANDO COMO

1. Primera demo de ejemplo del script.

EJEMPLO 2 DE JQUERY LOAD() CON PARAMETROS

1. Segunda 2 de ejemplo del script.

EJEMPLO 3 DE JQUERY LOAD() PARA OBTENER

1. Tercera demo de ejemplo del script.

<div id="contenido">CONTENIDO QUE TIENE QUE APARECER</div>

CARGAR EL HTML EXTERNO AL HACER CLICK EN UN ENLACE

EVITAR CONFLICTOS CON OTRAS LIBRERAS

En caso de trabajar con otras libreras distintas a jQuery os recomiendo en

You might also like