jQuery - Atributos

Algunos de los componentes más básicos que podemos manipular cuando se trata de elementos DOM son las propiedades y atributos asignados a esos elementos.

La mayoría de estos atributos están disponibles a través de JavaScript como propiedades del nodo DOM. Algunas de las propiedades más comunes son:

className
tagName
id
href
title
rel
src

Considere el siguiente marcado HTML para un elemento de imagen:

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

En el marcado de este elemento, el nombre de la etiqueta es img, y el marcado para id, src, alt, class y title representa los atributos del elemento, cada uno de los cuales consta de un nombre y un valor.

jQuery nos da los medios para manipular fácilmente los atributos de un elemento y nos da acceso al elemento para que también podamos cambiar sus propiedades.

Obtener valor de atributo

los attr() El método se puede utilizar para obtener el valor de un atributo del primer elemento del conjunto coincidente o para establecer valores de atributo en todos los elementos coincidentes.

Ejemplo

A continuación se muestra un ejemplo simple que obtiene el atributo de título de la etiqueta <em> y establece el valor <div id = "divid"> con el mismo valor:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer valor de atributo

los attr(name, value) El método se puede usar para establecer el atributo nombrado en todos los elementos del conjunto envuelto usando el valor pasado.

Ejemplo

A continuación se muestra un ejemplo sencillo que establece src atributo de una etiqueta de imagen a una ubicación correcta -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

Aplicar estilos

los addClass( classes )El método se puede utilizar para aplicar hojas de estilo definidas en todos los elementos coincidentes. Puede especificar varias clases separadas por espacios.

Ejemplo

A continuación se muestra un ejemplo sencillo que establece class atributo de una etiqueta para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Esto producirá el siguiente resultado:

Métodos de atributos

La siguiente tabla enumera algunos métodos útiles que puede utilizar para manipular atributos y propiedades:

No Señor.	Métodos y descripción
1	attr (propiedades) Establecer un objeto clave / valor como propiedades para todos los elementos coincidentes.
2	attr (clave, fn) Establezca una propiedad única en un valor calculado, en todos los elementos coincidentes.
3	removeAttr (nombre) Elimina un atributo de cada uno de los elementos coincidentes.
4	hasClass (clase) Devuelve verdadero si la clase especificada está presente en al menos uno del conjunto de elementos coincidentes.
5	removeClass (clase) Elimina todas o las clases especificadas del conjunto de elementos coincidentes.
6	toggleClass (clase) Agrega la clase especificada si no está presente, elimina la clase especificada si está presente.
7	html () Obtenga el contenido html (innerHTML) del primer elemento coincidente.
8	html (val) Establezca el contenido html de cada elemento coincidente.
9	texto () Obtenga el contenido de texto combinado de todos los elementos coincidentes.
10	texto (val) Establezca el contenido de texto de todos los elementos coincidentes.
11	val () Obtenga el valor de entrada del primer elemento coincidente.
12	val (val) Establezca el atributo de valor de cada elemento coincidente si se llama en <input> pero si se llama en <select> con el valor <option> pasado, la opción pasada se seleccionará, si se llama en la casilla de verificación o en la casilla de radio, entonces Se marcarían todas las casillas de verificación correspondientes y las casillas de radio.

Ejemplos

De manera similar a la sintaxis y los ejemplos anteriores, los siguientes ejemplos le ayudarán a comprender el uso de varios métodos de atributos en diferentes situaciones:

Aquí hay una lista completa de métodos de atributos en diferentes situaciones:

No Señor.	Selector y descripción
1	$("#myID").attr("custom") Esto devolvería el valor del atributo personalizado para el primer elemento que coincida con el ID myID.
2	$("img").attr("alt", "Sample Image") Esto establece el alt atributo de todas las imágenes a un nuevo valor "Imagen de muestra".
3	$("input").attr({ value: "", title: "Please enter a value" }); Establece el valor de todos los elementos <input> en la cadena vacía, así como establece el Ejemplo de jQuery en la cadena Por favor ingrese un valor .
4	$("a[href^=https://]").attr("target","_blank") Selecciona todos los enlaces con un atributo href que comienzan con https: // y establece su atributo de destino en _blank .
5	$("a").removeAttr("target") Esto eliminaría el atributo de destino de todos los enlaces.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Esto modificaría el atributo deshabilitado al valor "deshabilitado" al hacer clic en el botón Enviar.
7	$("p:last").hasClass("selected") Esto devuelve verdadero si la última etiqueta <p> tiene una clase asociada seleccionada .
8	$("p").text() Devuelve una cadena que contiene el contenido de texto combinado de todos los elementos <p> coincidentes.
9	$("p").text("<i>Hello World</i>") Esto establecería "<I> Hola mundo </I>" como contenido de texto de los elementos <p> coincidentes.
10	$("p").html() Esto devuelve el contenido HTML de todos los párrafos coincidentes.
11	$("div").html("Hello World") Esto establecería el contenido HTML de todos los <div> coincidentes en Hello World .
12	$("input:checkbox:checked").val() Obtenga el primer valor de una casilla de verificación marcada.
13	$("input:radio[name=bar]:checked").val() Obtenga el primer valor de un conjunto de botones de opción.
14	$("button").val("Hello") Establece el atributo de valor de cada elemento coincidente <botón>.
15	$("input").val("on") Esto marcaría toda la radio o el botón de casilla de verificación cuyo valor esté "activado".
dieciséis	$("select").val("Orange") Esto seleccionaría la opción Naranja en un cuadro desplegable con opciones Naranja, Mango y Plátano.
17	$("select").val("Orange", "Mango") Esto seleccionaría las opciones Naranja y Mango en un cuadro desplegable con las opciones Naranja, Mango y Plátano.