Diferencia entre revisiones de «Usuario:Juanda/jQuery/html»

De WikiEducator
Saltar a: navegación, buscar
(→‎Manipulación de atributos de html)
 
(11 revisiones intermedias por el mismo usuario no mostrado)
Línea 7: Línea 7:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
=== Manipulación del contenido html ===
+
==== Manipulación del contenido html ====
 
*Cambia el contenido del elemento/s html seleccionado/s:
 
*Cambia el contenido del elemento/s html seleccionado/s:
 
<source lang="javascript">
 
<source lang="javascript">
Línea 26: Línea 26:
  
 
<div class="slide">
 
<div class="slide">
−
=== Manipulación de atributos de html ===
+
== Manipulación de atributos de html ==
−
*Método attr()
+
</div>
−
:Obtenemos los valores de los atributos de las etiquetas html:
+
<div class="slide">
 +
====Método attr()====
 +
*Obtenemos los valores de los atributos de las etiquetas html:
 
<source lang="javascript">
 
<source lang="javascript">
 
//obtenemos el valor del título del enlace:
 
//obtenemos el valor del título del enlace:
 
$("a").attr("title");
 
$("a").attr("title");
 
</source>
 
</source>
−
:Si hay varios atributos se pueden recorrer mediante el método each():
+
*Si hay varios atributos se pueden recorrer mediante el método each():
 
<source lang="javascript">
 
<source lang="javascript">
 
$("a").each(function(i){
 
$("a").each(function(i){
Línea 40: Línea 42:
 
   });
 
   });
 
</source>
 
</source>
−
:Podemos modificar también el valor de los atributos pasando un segundo parámetro:
+
</div>
−
 
+
<div class="slide">
 +
*Podemos modificar también el valor de los atributos pasando un segundo parámetro:
 +
<source lang="javascript">
 +
//modificamos el atributo title:
 +
$("a").attr("title", "Mi nuevo título");
 +
</source>
  
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Método prop()
+
====Método prop()====
 
<source lang="javascript">
 
<source lang="javascript">
 
$(elemento).prop("checked", true);
 
$(elemento).prop("checked", true);
Línea 52: Línea 59:
 
:Atributos que se modifican con attr(): class, id, href, label, src, title...
 
:Atributos que se modifican con attr(): class, id, href, label, src, title...
 
:Propiedades que se modifican con prop(): autofocus, checked, async, multiple, readOnly...
 
:Propiedades que se modifican con prop(): autofocus, checked, async, multiple, readOnly...
−
</div>
 
−
*Añaden contenido en el elemento HTML seleccionado:
 
−
<source lang="javascript">
 
−
$(selector).append(content)
 
−
$(selector).prepend(content)
 
−
</source>
 
−
*Añaden contenido después o antes del elemento HTML seleccionado:
 
−
<source lang="javascript">
 
−
$(selector).after(content)
 
−
$(selector).before(content)
 
−
</source>
 
−
 
 
</div>
 
</div>
  
Línea 69: Línea 64:
 
<div class="slide">
 
<div class="slide">
  
−
=== Manipulación de css ===
+
== Manipulación de css ==
−
 
+
</div>
 +
<div class="slide">
 
Obtiene la propiedad CSS del primer elemento seleccionado:
 
Obtiene la propiedad CSS del primer elemento seleccionado:
 
<source lang="javascript">
 
<source lang="javascript">
Línea 82: Línea 78:
 
$("p").css("background-color","yellow");  
 
$("p").css("background-color","yellow");  
 
</source>
 
</source>
−
 
+
</div>
 +
<div class="slide">
 
Establece varias propiedades CSS de los elementos seleccionados:
 
Establece varias propiedades CSS de los elementos seleccionados:
 
<source lang="javascript">
 
<source lang="javascript">
Línea 99: Línea 96:
 
//$(selector).width(value)
 
//$(selector).width(value)
 
$("#div2").width("300px");
 
$("#div2").width("300px");
 +
</source>
 +
</div>
 +
<div class="slide">
 +
== Formularios ==
 +
</div>
 +
<div class="slide">
 +
*Función val(): para obtener los valores de los elementos o inicializarlos.
 +
<source lang="javascript">
 +
/*Inicializamos la caja de texto y luego guardamos su contenido en una variable*/
 +
$("textarea").val("Esto es una caja de texto");
 +
var texto = $("textarea").val();
 +
</source>
 +
*En caso de inicializar varios valores a la vez (por ejemplo un select múltiple), los pondremos entre corchetes:
 +
<source lang="javascript">
 +
$("select").val(["Pedro", "Juan", "Miguel"]);
 +
</source>
 +
</div>
 +
<div class="slide">
 +
*Función text(): Obtiene o establece el contenido de los elementos seleccionados.
 +
*Es parecida a html(), pero obtendremos solo texto, sin etiquetas:
 +
<source lang="javascript">
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<script src="jquery.js"></script>
 +
<script>
 +
$(document).ready(function(){
 +
  $("#btn1").click(function(){
 +
    alert("Text: " + $("#test").text());
 +
  });
 +
  $("#btn2").click(function(){
 +
    alert("HTML: " + $("#test").html());
 +
  });
 +
});
 +
</script>
 +
</head>
 +
 +
<body>
 +
<p id="test">Texto con <b>negrita</b></p>
 +
<button id="btn1">Ver texto</button>
 +
<button id="btn2">Ver html</button>
 +
</body>
 +
</html>
 +
 
</source>
 
</source>
 
</div>
 
</div>
 
</div>
 
</div>

Última revisión de 08:58 9 nov 2012


html y jQuery

Manipulación del contenido html

  • Cambia el contenido del elemento/s html seleccionado/s: 
$(selector).html(contenido)
  • Añaden contenido en el elemento HTML seleccionado: 
$(selector).append(content)
$(selector).prepend(content)
  • Añaden contenido después o antes del elemento HTML seleccionado: 
$(selector).after(content)
$(selector).before(content)

Manipulación de atributos de html

Método attr()

  • Obtenemos los valores de los atributos de las etiquetas html: 
//obtenemos el valor del título del enlace:
$("a").attr("title");
  • Si hay varios atributos se pueden recorrer mediante el método each(): 
$("a").each(function(i){
      var titulo = $(this).attr("title");
      alert("Atributo title del enlace " + i + ": " + titulo);
   });
  • Podemos modificar también el valor de los atributos pasando un segundo parámetro: 
//modificamos el atributo title:
$("a").attr("title", "Mi nuevo título");

Método prop()

$(elemento).prop("checked", true);
  • ¿Cuándo usar attr() y cuando prop()?
Atributos que se modifican con attr(): class, id, href, label, src, title...
Propiedades que se modifican con prop(): autofocus, checked, async, multiple, readOnly...


Manipulación de css

Obtiene la propiedad CSS del primer elemento seleccionado: 

//$(selector).css(name) 	
$(this).css("background-color");

Establece el valor de una propiedad CSS de los elementos seleccionados: 

//$(selector).css(name,value) 	
$("p").css("background-color","yellow");

Establece varias propiedades CSS de los elementos seleccionados: 

//$(selector).css({properties}) 
$("p").css({"background-color":"yellow","font-size":"200%"});

Establece la altura de los elementos seleccionados: 

//$(selector).height(value) 	
$("#div1").height("200px");

Establece la anchura de los elementos seleccionados: 

//$(selector).width(value) 	
$("#div2").width("300px");

Formularios

  • Función val(): para obtener los valores de los elementos o inicializarlos. 
/*Inicializamos la caja de texto y luego guardamos su contenido en una variable*/
$("textarea").val("Esto es una caja de texto");
var texto = $("textarea").val();
  • En caso de inicializar varios valores a la vez (por ejemplo un select múltiple), los pondremos entre corchetes: 
$("select").val(["Pedro", "Juan", "Miguel"]);
  • Función text(): Obtiene o establece el contenido de los elementos seleccionados.
  • Es parecida a html(), pero obtendremos solo texto, sin etiquetas: 
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
 
<body>
<p id="test">Texto con <b>negrita</b></p>
<button id="btn1">Ver texto</button>
<button id="btn2">Ver html</button>
</body>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/html&oldid=10339»