|
|
| Línea 28: |
Línea 28: |
| | === Manipulación de atributos de html === | | === Manipulación de atributos de html === |
| | *Método attr() | | *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"); |
| − | //si hay varios los podemos recorrer mediante el método each: | + | </source> |
| | + | :Si hay varios atributos se pueden recorrer mediante el método each(): |
| | + | <source lang="javascript"> |
| | $("a").each(function(i){ | | $("a").each(function(i){ |
| | var titulo = $(this).attr("title"); | | var titulo = $(this).attr("title"); |
| | alert("Atributo title del enlace " + i + ": " + titulo); | | alert("Atributo title del enlace " + i + ": " + titulo); |
| | }); | | }); |
| | + | </source> |
| | + | :Podemos modificar también el valor de los atributos pasando un segundo parámetro: |
| | + | <source lang="javascript" |
| | //modificamos el atributo title: | | //modificamos el atributo title: |
| | $("a").attr("title", "Mi nuevo título"); | | $("a").attr("title", "Mi nuevo título"); |
Revisión de 05:55 4 nov 2012
jQuery
Tutorial para desarrollar en Web mediante 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
- 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:
</div>
<div class="slide">
*Método prop()
<source lang="javascript">
$(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>
