Contenido Set - text(), html() , y val()
Vamos a utilizar los mismos tres métodos de la página anterior paraestablecer el contenido:
- text() - Establece o devuelve el contenido de texto de los elementos seleccionados
- html() - Establece o devuelve el contenido de los elementos seleccionados (incluyendo el formato HTML)
- val() - Establece o devuelve el valor de los campos de formulario
El siguiente ejemplo muestra cómo establecer el contenido con el jQuery text(), html() , y val() métodos:
Ejemplo
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Inténtalo tú mismo " Una llamada de retorno para text(), html() , y val()
Todos los tres métodos anteriores jQuery: 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 de la lista de elementos seleccionados y el valor original (antigua). A continuación, retornar la cadena que desea utilizar como el nuevo valor de la función.
El siguiente ejemplo muestra 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 + ")";
});
});
Inténtalo tú mismo " - Establecer los atributos attr()
El jQuery attr() método también se utiliza para ajustar / cambiar los valores de atributos.
El siguiente ejemplo muestra cómo cambiar (set) el valor de la href atributo en un enlace:
Ejemplo
$("button").click(function(){
$("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
Inténtalo tú mismo " El attr() método también permite definir múltiples atributos al mismo tiempo.
El siguiente ejemplo muestra cómo establecer tanto el href y el título atributos al mismo tiempo:
Ejemplo
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3ii.com/jquery",
"title" : "w3ii jQuery Tutorial"
});
});
Inténtalo tú mismo " Una llamada de retorno para attr()
El método jQuery attr() , 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 de la lista de elementos seleccionados y el original (antigua) el valor de atributo. A continuación, retornar la cadena que desea utilizar como el nuevo valor del 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";
});
});
Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
jQuery Referencia HTML
Para una visión completa de todos los métodos de jQuery HTML, por favor vaya a nuestro / CSS de referencia jQuery HTML .