Alguno de los componentes mas basicos que puede manipular cuando se trata de los elementos DOM son las propiedades y atributos asignados a esos elementos. La mayoria de estos atributos estan disponibles a traves de javascript como propiedades del nodo DOM. Algunas de las propiedades mas comunes son:
* className
* tagName
* id
* href
* title
* rel
* src
Considere el siguiente codigo HTML para un elemento de imagen:
<img id="miImagen" src="imagen.gif" alt="Una imagen" class="algunaClase" title="Esto es una imagen" />
En el marcado de este elemento, el nombre de la etiqueta es img, y el marcado para id, src, alt, class y title representan los atributos del elemento, cada uno de los cuales consta con un nombre y valor. jQuery nos da medios para manipular facilmente atributos de un elemento y nos da acceso al elemento de modo que tambien podemos cambiar sus propiedades.
Obteniendo el valor del atributo
El metodo attr() se puede utilizar ya sea para buscar el valor de un atributo desde el primer elemento en el conjunto que coincida o valores en los atributos establecidos en todos los elementos coincidentes. Ejemplo:
El siguiente es un ejemplo sencillo que obtiene el atributo title de <em> y establece el valor <div id="divid"> con el mismo valor:
<html>
<head>
<title>Titulo</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var titulo = $("em").attr("title");
$("#divid").text(titulo);
});
</script>
</head>
<body>
<div>
<em title="audaz y breve">Este es un parrafo</em>
<p id="mi_id">Este es el segundo parrafo</p>
<div id="divid"></div>
</div>
</body>
</html>
Estableciendo un valor de atributo
El metodo attr(nombre,valor) puede ser usado para establecer el nombre de atributo dentro de todos los elementos que se envuelvan dentro de el valor pasado. Ejemplo: a continuacion se presenta un ejemplo sencillo que establece el atributo src en una etiqueta de imagen en una ubicacion correcta:
<html>
<head>
<title>Titulo</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#miimg").attr("src", "img/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id="miimg" src="/asdfnoexiste.jpg" alt="imagen simple" />
</div>
</body>
</html>
Aplicacion de estilos
El metodo addClass (clases) puede ser usado para aplicar estilos dentro de los elementos que coinciden. Puede especificar varias clases separadas por un espacio. Ejemplo:
<html>
<head>
<title>Titulo</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("em").addClass("seleccionado");
$("#mi_id").addClass("resaltado");
});
</script>
<style type="text/css">
.seleccionado { color: red; }
.resaltado { background-color: yellow; }
</style>
</head>
<body>
<div>
<em title="audaz y breve">Este es un parrafo</em>
<p id="mi_id">Este es el segundo parrafo</p>
</div>
</body>
</html>
Metodos utiles para atributos
La siguiente tabla enumera abajo algunos metodos utiles que usted puede utilizar para manipular atributos y propiedades:
+---------------------+------------------------------------------------------------------------------------------------------+
| Metodos | Descripcion |
+---------------------+------------------------------------------------------------------------------------------------------+
| attr(propiedades) | Establece a un objeto clave/valor como propiedades a todos los elementos que coincidan. |
+---------------------+------------------------------------------------------------------------------------------------------+
| attr(clave,funcion) | Establece una sola propiedad para un valor calculado, en todos los elementos que coincidan. |
+---------------------+------------------------------------------------------------------------------------------------------+
| removeAttr(nombre) | Elimina un atributo de cada uno de los elementos que coincidan. |
+---------------------+------------------------------------------------------------------------------------------------------+
| hasClass(clase) | Devuelve true si la clase especificada esta presente en al menos uno de los elementos que coincidan. |
+---------------------+------------------------------------------------------------------------------------------------------+
| removeClass(clase) | Elimina todas o la clase especificada desde todos los elementos que coincidan. |
+---------------------+------------------------------------------------------------------------------------------------------+
| toggleClass(clase) | Agrega la clase especificada si no esta presente, elimina la clase especificada si esta presente. |
+---------------------+------------------------------------------------------------------------------------------------------+
| html() | Obtener el contenido html (innerHTML) del primer elemento que coincida. |
+---------------------+------------------------------------------------------------------------------------------------------+
| html(valor) | Establece contenido HTML de cada elemento que coincida. |
+---------------------+------------------------------------------------------------------------------------------------------+
| text() | Obtiene el contenido del texto combinado de todos los elementos que coinciden. |
+---------------------+------------------------------------------------------------------------------------------------------+
| text(valor) | Establece el contenido de texto a todos los elementos que coincidan. |
+---------------------+------------------------------------------------------------------------------------------------------+
| val() | Obtiene el valor de entrada del primer elemento que coincida. |
+---------------------+------------------------------------------------------------------------------------------------------+
| val(valor) | Establece el atributo de cada elemento que coincida. |
+---------------------+------------------------------------------------------------------------------------------------------+De manera similar a la sintaxis y ejemplos anteriores, los ejemplos siguientes son para que se dé entendimiento sobre el uso de diversos metodos de atributos en diferentes situaciones:
$("#mi_id").attr("personalizar") : Esto devolveria el valor del atributo personalizar para el primer elemento que coincida con mi_id.
$("img").attr("alt","Imagen Simple") : Esto establece al atributo alt un nuevo valor 'Imagen Simple' para todos los elementos de imagen.
$("input").attr({value: "", title : "Por favor ingrese un valor"}) : establece el valor a todos los elementos <input> como una cadena vacia, asi como tambien el title de todos los <input> como "Por favor ingrese un valor".
$("a[href^=http://]").attr("target","_blank") : selecciona todos los enlaces con el atributo href comenzando con http:// y que establezca el atributo target en _blank.
$("a").removeAttr("target") : Esto elimina el atributo target en todos los enlaces.
$("form").submit(function(){ $(":submit",this).attr("disabled","disabled") }) : Esto modifica el atributo disabled para el valor "disabled" mientras hace clic en el boton submit.
$("p:last").hasClass("seleccionado") : Esto devuelve true si la ultima etiqueta <p> tiene la clase 'seleccionado'.
$("p").text() : Devuelve todas las cadenas que contiene el texto combinado de todos los elementos <p> encontrados.
$("p").text("<i>Hola Mundo</i>") : Esto establece "<i>Hola Mundo</i>" como contenido a todos los elementos <p> encontrados.
$("p").html() : Esto devuelve el contenido de el HTML de todos los elementos <p> encontrados.
$("div").html("Hola Mundo") : Esto establece "Hola Mundo" como contenido en todos los elementos div.
$("input:checkbox:checked").val() : Obtiene el primer valor de una casilla de verificacion marcada.
$("input:radio[name=bar]:checked").val() : obtiene el primer valor de un conjunto de botones de radio.
$("button")val("Hola") : establece el atributo de valor a cada elemento que coincide con <button>.
$("input").val("activado") : esto checa todos los radio o checkbox cuyo valor sea "activado".
$("select").val("Naranja") : Esto selecciona el valor Naranja en un cuadro desplegable donde las opciones son Naranja, Mango y Platano.
$("select").val("Naranja", "Mango") : Esto selecciona el valor Naranja y Mango en un cuadro desplegable donde las opciones son Naranja, Mango y Platano.
Este texto ha sido traducido desde la pagina TutorialesPoint.
No hay comentarios:
Publicar un comentario