Existe una página de la página de jQuery que habla de los métodos Getters and Setters.
Podemos obtener el contenido (getters = captadores) de las selecciones que indiquemos y podemos establecer (setters =establecedores, colocadores) o escribir el contenido en esas misma selecciones (id, clases, etiquetas).
Consulte la página de atributos de la API de jQuery.
En esta página verá dos de los atributos con los que vamos a jugar haciendo ejemplos.
.html()
Permite obtener el contenido HTML del primer elemento en el conjunto de elementos coincidentes o establecer el contenido HTML de cada elemento coincidente..attr()
Permite obtener el valor de un atributo para el primer elemento del conjunto de elementos coincidentes o establecer uno o más atributos para cada elemento coincidente.El caso práctico que planteamos puede verse funcionando en el siguiente enlace.
HTML
 |
| Página antes de pulsar el botón |
 |
| Consola antes de pulsar el botón |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery seleccionando</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1 class="mititulo">Congreso</h1>
<p id="parrafo1">Párrafo uno.</p>
<h1 class="mititulo">Senado</h1>
<p id="parrafo2">Párrafo dos.</p>
<hr>
<h3 id="final"></h3>
<div id="final" class="div1">
El <span>senado</span> gobernaba <span>Roma</span> en la época republicana.
</div>
<div id="final" class="div2"></div>
<br>
<button id="boton">Púlsame</button>
</body>
</html>
JavaScript + jQuery
 |
| Página después de pulsar el botón |
 |
| Consola después de pulsar el botón |
'use strict'
$(function(){
//antes de pulsar el botón
var primerH1 = $('h1').html(); //consulto el valor del primer h1
console.log('Valor inicial del primer h1: '+primerH1);
var segundoH1=$('h1').eq(1).html(); //consulto el valor del segundo h1
console.log('Valor inicial del segundo h1: '+segundoH1);
$("#boton").click( function() { //pulsando el botón
//El método .html() establece todos los elementos h1 con el valor "Cámara legislativa"
$('h1').html("Cámara legislativa" ); //se cambio el valor de todos los h1
//El método .html() devuelve el html del primer elemento h1
var nuevosH1 = $("h1").html(); //así capturamos solo el valor del primer h1
console.log('Todos los h1 ahora son: '+nuevosH1); //da por consola "Cámara legislativa"
//Cambiamos el contenido del párrafo 1 con .html(valor)
$('#parrafo1').html('El Congreso es la cámara baja');//cambio el valor del id=parrafo1
//Cambiamos el contenido del párrafo 2 con .text(valor)
$('#parrafo2').text("El Senado es la cámara alta.");//text tb establece un texto
//con .attr tb hacemos lo mismo que con .html y además
//podemo obtener o modificar no solo texto sino todo lo demás,
//por ejemplo la clase
var clasePrimerH1 = $('h1').attr('class'); //obtenemos la clase del primer H1
console.log("La clase del primer h1 es: "+clasePrimerH1); //da por consola 'mititulo'
var claseSegundoDiv = $('div').eq(1).attr('class'); //obtenemos la clase del 2º Div
console.log("La clase del segundo Div es: "+claseSegundoDiv);
//attr permite cambiar atributos cosa que no puede hacer .html
//cambiamos el nombre de la clase de todos los Div
$('div').attr('class','midiv');
var k=$('div');
console.log("clase 1º div: "+k.eq(0).attr('class'));
console.log("clase 2º div: "+k.eq(1).attr('class'));
//cambiamos y obtenemos el id del primer párrafo
$('p').attr('id','primero'); //cambiamos el id del primer párrafo
var idPrimerP = $('p').attr('id'); //obtenemos el id del primer párrafo
console.log('El id del primer párrafo es: '+idPrimerP); //da 'primero'
//escribimos una frase en el segundo div que estaba vacío
$('div.midiv').eq(1).html("Algunos paises no tienen dos cámaras legislativas.");
//escribimos en el pimer id=final que resulta ser el h3
$('#final').eq(0).html("Conclusión");
$('div.midiv') //todos los div cuya clase es midiv
.eq(0) //de todos ellos elegimos el primero
.find('span') //buscamos todas las etiquetas span
.eq(0) //elegimos la primera etiqueta span que es 'senado'
.css('background','yellow') //ponemos el senado con fondo amarillo
.css('font-style','italic') //ponemos el senado con cursiva
.end() //salimos del 1er span hacia arriba, asi volvemos a la lista de los span
.eq(1) //elegimos la segunda etiqueta span que es 'Roma'
.css('background','pink') //ponemos el fondo de 'Roma' de color rosa
});
});
No hay comentarios:
Publicar un comentario