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

De WikiEducator
Saltar a: navegación, buscar
(→‎Efectos)
(→‎Ejemplos de uso del selector de jQuery)
Línea 29: Línea 29:
 
<source lang="javascript">
 
<source lang="javascript">
 
$("p")  //se seleccionan todos los elementos de tipo párrafo
 
$("p")  //se seleccionan todos los elementos de tipo párrafo
−
 
 
$("p.intro")  //todos los párrafos con class=intro
 
$("p.intro")  //todos los párrafos con class=intro
−
 
 
$("p#demo")  //todos los párrafos con id=demo
 
$("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="#"
 
$("[href='#']") //todos los elementos con atributo href="#"
−
 
 
$("[href!='#']")  //todos los elementos con atributo href diferente de "#"
 
$("[href!='#']")  //todos los elementos con atributo href diferente de "#"
−
 
 
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
 
$("[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").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"
 
$("p#intro:first") //El primer párrafo con id="intro"
−
 
 
$("ul li:first") El primer elemento <li> de cada <ul>
 
$("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"
 
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"
−
 
 
</source>
 
</source>
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
 +
 
=== Efectos ===
 
=== Efectos ===
 
* Utilizaremos las siguientes funciones:
 
* Utilizaremos las siguientes funciones:

Revisión de 07:09 29 oct 2012


Sintaxis de 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
  • Ejemplos: 
$(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

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