Bienvenidos sean a este post, hoy continuaremos con el tema visto en el post anterior.
En el post anterior hablamos sobre como manipular los atributos de una pagina HTML pero hoy hablaremos sobre las propiedades mas orientadas a DOM, si bien puede que a simple vista sean similares no lo son tanto, dado que en los atributos no podremos manejar ciertas conductas de nuestra pagina, por ejemplo tildar como chequeado un elemento, por esta razon tenemos otro metodo llamado prop para poder actuar sobre las propiedades, en si es muy similar a attr dado que podemos pasarle una sola propiedad o un objeto de propiedades para modificarlas al mismo tiempo, para entenderlo un poco mejor vamos a trabajar con un pequeño ejemplo, para ello crearemos un nuevo archivo con el nombre de form.html y le agregaremos el siguiente codigo:
form.html
<html>
<head>
<title>Formulario de ejemplo</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script>
<!--
$(document).ready(function() {
$('#chequeo').on('click',function(){
alert($(this).val());
});
$('#radio').on('click',function(){
alert($(this).val());
});
});
//-->
</script>
</head>
<body>
<div class="titulo">
<h1>Formulario de ejemplo.</h1>
</div>
<div class="formulario">
Ingresa un texto:
<input type="text" id="texto" name="texto" value=""><br>
<input type="checkbox" id="chequeo" value="check ok"> Checkbox<br>
<input type="radio" id="radio" value="radio ok"> Radio<br>
<button id="subir" type="button">Subir</button>
</div>
</body>
</html>
Aqui utilizaremos a la funcion ready para que actue cuando la pagina este totalmente cargada, despues aplicaremos el evento click a los dos elementos de seleccion, chequeo y radio, en ambos casos mostraremos el valor de cada uno de los seleccionados mediante la funcion val, con esto comentado vamos a ver como trabaja mediante el siguiente video
Aqui vemos como se puede obtener los valores, para el siguiente caso vamos a trabajar con la funcion prop, para ello modificaremos este bloque:
$(document).ready(function() {
$('#chequeo').on('click',function(){
alert($(this).val());
});
$('#radio').on('click',function(){
alert($(this).val());
});
});
De la siguiente manera:
$(document).ready(function() {
var objeto=$('#chequeo').prop('checked', true);
$('#chequeo').click(function() {
alert($(this).val());
});
$('#radio').click(function() {
alert($(this).val());
});
});Basicamente es exactamente lo mismo pero agregamos una linea nueva para que busque al elemento identificado como chequeo y mediante el metodo prop lo marque como tildado, mediante la propiedad y el valor pasado, en este caso lo tilda porque pasamos true, si cargan la pagina se vera de la siguiente forma
Tomemos el codigo anterior y modifiquemoslo de la siguiente manera:
$(document).ready(function() {
$('#subir').click(function() {
var texto, objChk;
texto = $('#texto').val();
if (!texto) { texto='No se ingreso ningun texto'; }
objChk=$('#chequeo').prop('checked');
if (objChk) { texto += "\n" + $('#chequeo').val(); }
objChk=$('#radio').prop('checked');
if (objChk) { texto += "\n" + $('#radio').val(); }
alert(texto);
});
});Aqui eliminamos todo lo anterior y tomamos al boton para asignarle al evento click, primero declaramos dos variables que usaremos, nuestro sigueinte paso sera asignar el valor que contiene el elemento de ingreso de texto en la pagina, despues tenemos un condicional donde evalua si la variable anterior esta vacia (mediante el operador de negacion y en caso de ser verdadero le asigna ese mensaje, despues de esto a la segunda varriable le asignaremos el valor de la propiedad checked mediante el metodo prop, lo siguiente sera un condicional donde evaluaremos si tiene el valor true, cuando pasamos el objeto o variable solamente el condicional if evalua esta condicion automaticamente, en caso de ser verdadero procedemos a adicionar el valor del elemento chequeo al texto anterior, este tambien lo obtenermos por medio de val, despuess de esto volvemos a hacer lo mismo pero con el elemento radio, por ultimo mostraremos el resultado final en la variable texto, con todo esto comentado veamos como trabaja mediante el siguente video
Si se preguntan porque usamos a la funcion val en lugar de las propiedades relacionadas a estas, porque no siempre es la misma, por ejemplo los input no utilizan siempre a value sino a defaultValue y lo mismo con los select porque en lugar de usar a value usan a selectedIndex, para evitar estos inconveniente tenemos la facilidad de val, ahora ya disponemos de tres herramientas para trabajar:
- attr, para manejar atributos
- prop, para manejar propiedades
- val, para obtener el valor almacenado en el elemento (si corresponde)
Con todo esto comentado vamos a ir finalizando y a continuacion les dejo el archivo final creado en este post:
En resumen, hoy hemos visto como manipular propiedades de DOM mediante el metodo prop, como se puede utilizar, como obtener valores, como a traves de prop podemos intercerptar informacion, y un ejemplo practico para ver como trabaja, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 