|
|
| Línea 55: |
Línea 55: |
| | <div class="slide"> | | <div class="slide"> |
| | === Efectos === | | === Efectos === |
| | + | * Utilizaremos las siguientes funciones: |
| | + | <source lang="javascript"> |
| | + | $(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).fadeTo(speed,opacity,callback) |
| | + | </source> |
| | | | |
| | + | *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. |
| | | | |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| | + | |
| | === Callback functions === | | === Callback functions === |
| | | | |
Revisión de 07:09 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"
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).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.
Callback functions
Manipulación de html
Manipulación de css
