14-estabelecer atributos con jquery

Set Content and Attributes with Jquery

Jquery puede utilizar tres metodos para configurar el contenido

• text() - Establece o devuelve el contenido de texto de los elementos seleccionados
• html() - Establece o devuelve el contenido de los elementos seleccionados (incluido el marcado HTML)
• val() - Establece o devuelve el valor de los campos de formulario

El siguiente ejemplo muestra cómo configurar el contenido con jQuery text()

 $("#button1").click(function(){
     $("#test1").text("Hello world!");
   });

...

El siguiente ejemplo muestra cómo configurar el contenido con jQuery html()

 $("#button2").click(function(){
     $("#test2").html("Hello world!");
   });

El siguiente ejemplo muestra cómo configurar el contenido con jQuery val()

$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });

---

función de devolución de llamada para text(), html() y val()

Los tres métodos anteriores: text(), html(), y val(), también vienen con una función de devolución de llamada (callback). La función de devolución de llamada callback tiene dos parámetros: el índice del elemento actual en la lista de elementos seleccionados y el valor original (antiguo).

A continuación, devuelve la cadena que desea utilizar como el nuevo valor de la función.

El siguiente ejemplo demuestra text()y html()

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
      return "Old text: " + origText + " New text: Hello world!
      (index: " + i + ")";
    });
  });

El siguiente ejemplo demuestra text()y html() con una funcion de devolución de llamada

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
      return "Old html: " + origText + " New html: Hello world!
      (index: " + i + ")";
    });
  });

Establecer atributos - attr()

El método attr() también se utiliza para establecer/cambiar valores de atributos.

El siguiente ejemplo muestra cómo cambiar (establecer) el valor del atributo href en un enlace:

$("button").click(function(){
    $("#frio").attr("href", "https://frioyelectronica.blogspot.com");
  });
    

El método attr() también le permite establecer múltiples atributos al mismo tiempo

El siguiente ejemplo muestra cómo establecer los atributos href y title al mismo tiempo:

 $("button").click(function(){
     $("#frio").attr({
       "href" : "https://frioyelectronica.blogspot.com",
       "title" : "frioyelectronica jQuery Tutorial"
     });
   });
    

---

función de devolución de llamada para attr()

El método jQuery attr(), también viene con una función de devolución de llamada.

La función de devolución de llamada tiene dos parámetros: el índice del elemento actual en la lista de elementos seleccionados y el valor del atributo original (antiguo).

A continuación, devuelve la cadena que desea utilizar como el nuevo valor de atributo de la función.

ejemplo

El siguiente ejemplo demuestra la función attr()con una devolución de llamada :

            $("button").click(function(){
                $("#frio").attr("href", function(i, origValue){
                  return origValue + "/jquery/";
                });
              });
        

Ir al indice