|
|
| Línea 93: |
Línea 93: |
| | <div class="slide"> | | <div class="slide"> |
| | *Con la función animate, podemos hacer efectos más complejos: | | *Con la función animate, podemos hacer efectos más complejos: |
| | + | *Con valores absolutos o relativos |
| | + | *Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior). |
| | <source lang="javascript"> | | <source lang="javascript"> |
| | $(selector).animate({ | | $(selector).animate({ |
| Línea 100: |
Línea 102: |
| | width:'150px' | | width:'150px' |
| | }); | | }); |
| | + | |
| | + | $("button").click(function(){ |
| | + | $("div").animate({ |
| | + | left:'250px', |
| | + | height:'+=150px', |
| | + | width:'+=150px' |
| | + | }); |
| | + | }); |
| | </source> | | </source> |
| | </div> | | </div> |
Revisión de 10:49 29 oct 2012
jQuery
Tutorial para desarrollar en Web mediante jQuery.
Sintaxis
$(selector).action()
- $: Simbolo para definir JQuery (podríamos usar también JQuery)
- selector: Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
- action: Acción que se ejecuta sobre los elementos
$(this).hide() //oculta el elemento actual
$("p").hide() //oculta todos los elementos de tipo párrafo
$("p.test").hide() //oculta todos los párrafos con class=test
$("#test").hide() //oculta todos los elementos con id=test
Ejemplos de uso del selector de jQuery
$("p") //se seleccionan todos los elementos de tipo párrafo
$("p.intro") //todos los párrafos con class=intro
$("p#demo") //todos los párrafos con id=demo
$("[href]") //todos los elementos con atributo href
$("[href='#']") //todos los elementos con atributo href="#"
$("[href!='#']") //todos los elementos con atributo href diferente de "#"
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
$("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo
$("p#intro:first") //El primer párrafo con id="intro"
$("ul li:first") El primer elemento <li> de cada <ul>
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"
jQuery.noConflict()
- Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
</script>
</head>
<body>
<p>Esto es un párrafo.</p>
<button>Pulsa aquí</button>
</body>
</html>
Efectos
- Utilizaremos las siguientes funciones:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).toggle(speed,callback)
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
- El primer parámetro nos indica la velocidad y puede tener los valores: slow, fast, normal o milisegundos.
- El segundo parámetro es la función que hay que ejecutar en el momento en que se complete la acción de hide o show.
- Los parámetros son opcionales
- Con la función animate, podemos hacer efectos más complejos:
- Con valores absolutos o relativos
- Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior).
$(selector).animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
Callback functions
- En JavaScript se ejecutan las sentencias línea a línea. Puede ser que una sentencia no haya terminado su ejecución y ya haya comenzado la siguiente.
- Ejemplo:
$("p").hide(1000);
alert("The paragraph is now hidden");
- Para evitar esto, pasamos la función como parámetro, y evitamos que se ejecute hasta que termina la animación. Esto se conoce como callback functions:
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
Manipulación de 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 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");
