jQuery - Establecer contenido y atributos
Establecer contenido: texto (), html () y val ()
Usaremos los mismos tres métodos de la página anterior para configurar el contenido :
text()- Establece o devuelve el contenido de texto de los elementos seleccionadoshtml()- 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 demuestra cómo establecer contenido con los métodos jQuery text(), html()y :val()
Ejemplo
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Una función de devolución de llamada para text(), html() y val()
Los tres métodos jQuery anteriores: text(), html()y val(), también vienen 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 original (antiguo). Luego devuelve la cadena que desea usar como el nuevo valor de la función.
El siguiente ejemplo demuestra text()y html()con una función de devolución de llamada:
Ejemplo
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Establecer atributos - attr()
El método jQuery attr()también se usa para establecer/cambiar valores de atributos.
El siguiente ejemplo muestra cómo cambiar (establecer) el valor del atributo href en un enlace:
Ejemplo
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
El attr()método también le permite establecer múltiples atributos al mismo tiempo.
El siguiente ejemplo muestra cómo configurar los atributos href y title al mismo tiempo:
Ejemplo
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Una 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). Luego devuelve la cadena que desea usar como el nuevo valor de atributo de la función.
El siguiente ejemplo demuestra attr()con una función de devolución de llamada:
Ejemplo
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Ejercicios de jQuery
Referencia HTML de jQuery
Para obtener una descripción general completa de todos los métodos HTML de jQuery, vaya a nuestra Referencia de HTML/CSS de jQuery .