Jquery tiene un método que nos permite recuperar y modificar el valor de cualquier atributo de cualquier elemento. Por ejemplo, las etiquetas img e iframe tienen un atributo en común llamado src, la etiqueta input tiene el atributo type que definirá su aspecto y funcionalidad. También existen atributos como title que se puede aplicar a todas las etiquetas.
El método .attr() nos permite recuperar el valor de un atributo o bien de modificarlo.
Podríamos tener una etiqueta como ésta:
<p id="parrafo" title="Soy el titulo del parrafo"> Yo amo a Javascript </p>
Y recuperar su valor de esta forma:
var titulo = $("#parrafo").attr('title');
alert(titulo);
O bien modificarlo y mostrar su nuevo valor:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var titulo = $("#parrafo").attr('title');
alert(titulo);
$("#parrafo").attr('title', 'Soy un nuevo titulo del parrafo');
titulo = $("#parrafo").attr('title');
alert(titulo);
});
</script>
</head>
<body>
<p id="parrafo" title="Soy el titulo del parrafo"> Yo amo a Javascript </p>
</body>
</html>
Como verán para recuperar el valor de un atributo debe usarse:
$(elemento).attr(atributo);
Y para modificar el valor de un atributo:
$(elemento).attr(atributo, valor);
De esta manera a continuación les mostraré un ejemplo muy básico para comprender un poco el método .attr(): tendremos un campo de ingreso donde se deberá introducir la url de una imagen y al presionar un botón debería mostrarse la imagen y más abajo el valor del atributo src:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cargar_imagen").click(function(){
var imagen_src = $("#imagen_src").val();
$("#imagen").attr('src', imagen_src);
});
});
</script>
</head>
<body>
<form action="javascript:void(0);">
<label> Url de imagen: </label>
<br />
<input type="text" id="imagen_src" />
<br />
<input type="button" id="cargar_imagen" value="Cargar imagen" />
</form>
<img id="imagen" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-snc7/423982_10200453487325652_519658398_n.jpg" alt="" />
<div id="url_de_imagen"></div>
</body>
</html>
Cuando modificamos de a varios atributos podemos, por ejemplo tenemos una etiqueta:
<img id="imagen" src="" alt="" />
Y para modificar sus atributos podemos hacer esto:
var url = 'https://www.google.com.ar/intl/es_ALL/images/logos/images_logo_lg.gif';
$("#imagen").attr('src', url);
$("#imagen").attr('alt', 'Imagen no disponible');
$("#imagen").attr('title', 'Imagen de carga');
O bien, el método .attr() puede recibir un parámetro json con las propiedades y valores correspondientes:
var url = 'https://www.google.com.ar/intl/es_ALL/images/logos/images_logo_lg.gif';
$("#imagen").attr({
src: url,
alt: 'Imagen no disponible',
title: 'Imagen de carga'
});
Se puede hacer de ambas formas. Como verán, usar un json es un poco más agradable visualmente.
Otra posibilidad que nos da jquery a través de sus métodos es la de eliminar un atributo mediante el método removeAttr():
Por ejemplo si tuviéramos esto:
<p id="parrafo" title="Saludo: 'Hola mundo'"> Hola mundo </p>
Y quisiéramos quitarle el atributo title, deberíamos hacerlo de esta manera:
$("#parrafo").removeAttr('title');
Este método al igual que .attr() se aplica para todo tipo de atributos.
Anterior: JQuery, parte 2: Eventos y métodos .html(), .text() y .val()
Siguiente: JQuery, parte 4: Método .css()
Hola me encanta todo tu blog, explicas muy bien y me ha ayudado mucho, soy nueva en esto, me gustaría que me ayudaras, lo que asa que tengo un gridview dentro de este gridview tengo un checkBox y un textbox ahora bien, al darle click en el checkBox me tiene que mostrar el textBox que es el de cantidad pero no logro hacer que me muestre no se que me este faltando, no se si me puedas ayudar, todo lo estoy haciendo meciante JavaScript te comparto como es que lo estoy realizando.
$(document).ready(function () {
$(‘# td [id*=TextBox4]’).change(function () {
alert(‘estrando ‘);
var tr = $(this).parent().parent();
var costo = $(«td:eq(5)», tr).html();
var cantidad = $(this).parent(«td»).find(‘[id*=»TextBox4″]’).val();
var toal = costo * cantidad;
alert(‘resultado es ‘ + costo * cantidad);
$(«td:eq(8)», tr).find(‘[id*=»TextBox9″]’).val(toal);
});
$(‘# td [id*=CheckBox1]’).change(function () {
var checkeado = $(this).is(‘:checked’);
var tr = $(this).parent().parent();
alert(«esta funcionando hasta aqui1»)
$(«td:eq(4)», tr).find(«#TextBox4»).removeAttr(‘Visible’)
$(«td:eq(4)», tr).find(«#TextBox4»).attr(‘Visible’, true)
});
});
dentro de mi grid asi se encuentra mi textBox
0
Podrías enviarme un ejemplo del código para entender un poco más?
De cualquier manera no entiendo bien lo de:
$(“td:eq(4)”, tr).find(“#TextBox4”).removeAttr(‘Visible’)
$(“td:eq(4)”, tr).find(“#TextBox4”).attr(‘Visible’, true)
Ahí no te convendría hacer:
$(“td:eq(4)”, tr).find(“#TextBox4”).hide();
$(“td:eq(4)”, tr).find(“#TextBox4”).show();
Saludos!