Curso de jQuery-Características

jQuery

Tutorial para desarrollar en Web mediante jQuery.

Introducción | Efectos | html | Eventos | Ajax | Plugins  | jQueryUI

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

• 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");