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

De WikiEducator
Saltar a: navegación, buscar
Línea 8: Línea 8:
  
 
<div class="slide">
 
<div class="slide">
−
=== Manipulación de 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 23: Línea 23:
 
$(selector).before(content)
 
$(selector).before(content)
 
</source>
 
</source>
 +
 +
</div>
 +
 +
<div class="slide">
 +
=== Manipulación de atributos de html ===
 +
*Método attr()
 +
<source lang="javascript">
 +
//obtenemos el valor del título del enlace:
 +
$("a").attr("title");
 +
//si hay varios los podemos recorrer mediante el método each:
 +
$("a").each(function(i){
 +
      var titulo = $(this).attr("title");
 +
      alert("Atributo title del enlace " + i + ": " + titulo);
 +
  });
 +
//modificamos el atributo title:
 +
$("a").attr("title", "Mi nuevo título");
 +
</source>
 +
 +
</div>
 +
<div class="slide">
 +
*Método prop()
 +
<source lang="javascript">
 +
$(elemento).prop("checked", true);
 +
</source>
 +
*¿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...
 +
</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 class="slide">
 
<div class="slide">
  
Línea 56: Línea 98:
 
$("#div2").width("300px");
 
$("#div2").width("300px");
 
</source>
 
</source>
 +
</div>
 
</div>
 
</div>

Revisión de 06:44 4 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 el valor del título del enlace:
$("a").attr("title");
//si hay varios los podemos recorrer mediante el método each:
$("a").each(function(i){
      var titulo = $(this).attr("title");
      alert("Atributo title del enlace " + i + ": " + titulo);
   });
//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...
  • 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 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");

</div>

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/html&oldid=10211»