jquery (1)

49
Día 4 Curso de Entrenamiento HTML, CSS & jQuery Instructor Mario Rivera Ángeles

Upload: alejandro-hernandez

Post on 31-Dec-2015

46 views

Category:

Documents


2 download

TRANSCRIPT

Día 4Curso de Entrenamiento HTML, CSS & jQuery

InstructorMario Rivera Ángeles

Objetivo del curso de entrenamiento

1. Desarrollar en el alumno la habilidad necesaria paraimplementar un sitio web con funcionalidades atractivas através de CSS y jQuery

2. Que el alumno use tecnologías que simplifiquen su procesode desarrollo de software

3. Que el alumno mejore el rendimiento de las aplicaciones enweb

4. Ampliar el panorama del alumno para utilizar recursos quele permitan resolver problemas de implementación de sitiosweb

Agenda

1. CSS Básico

Herramientas1. Sitio en línea para ejecutar las practicas HTML y CSS

http://jsfiddle.net/

2. Firebug

JQUERY BASICO

Curso de Entrenamiento Web

Que es jQuery?

Es una biblioteca de JavaScript muy ligera, esta permite “hacer mas y escribir menos”. Y fácil de aprender!!

Sus principales características son:

a) La selección de elementos HTML

b) La manipulación de elementos HTML

c) La manipulación de estilos CSS

d) El manejo de eventos HTML

e) El manejo de efectos y animaciones Java Scripts (muy fácil)

f) La modificación del árbol HTML DOM

g) AJAX (Asynchronous JavaScript and XML)

h) Utilerías

Agregando jQuery a paginas web

La biblioteca jQuery se almacena en un único archivo JavaScript. Que contiene todos los métodos y funciones jquery

Tiene que ser agregado se la siguiente manera:

<head>

<script

type="text/javascript"

src="jquery.js"></script>

</head>

Practica 1

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Click me</button>

</body>

</html>

Descargar jQuery

Para descargar jQuery existen dos versiones, una comprimida y la otra no comprimida (para lectura y debugueo del código)

Ambas versiones pueden ser descargadas desde la pagina oficial http://jquery.com

También es usual utilizar las versiones ubicadas desde los servidores de Google o Microsoft.

Microsoft

<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>

Google

<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script></head>

Sintaxis

jQuery permite seleccionar los elementos HTML y aplicar acciones sobre ellos

La sintaxis de jQuery esta hecha a la medida para la selección de elementos HTML y para la especificación de acciones sobre ellos.

La sintaxis básica es: $(selector).action()

El signo de dólar $ sirve para definir a la librería de jQuery

Un selector es la consulta o los elementos HTML a encontrar

La acción es la que se tiene llevar acabo sobre elemento o elementos HTML

Ejemplos:

$(this).hide() - Oculta el elemento actual$("p").hide() - Oculta todos los párrafos$("p.test").hide() - Oculta todos los párrafos con la clase test$("#test").hide() - Oculta el elemento con el id test

La función “ready” del documento HTML

Esta función se ejecuta cuando el documento HTML esta listo para iniciar la ejecución de cualquier sentencia jQuery.

$(document).ready(function(){

// Las funciones jQuery van aqui...

});

Si se ejecuta una sentencia jQuery antes de que el documento HMTL se encuentre listo… puede enviar los siguientes errores:

a) Al tratar de ocultar un elemento si no existeb) Al tratar de obtener el tamaño de una imagen cuando aun no se ha

cargado

Selectores jQueryLos selectores jQuery permiten seleccionar y manipular elementos HTML en grupo o individualmente.

Los selectores son el punto clave para aprender jQuery, seleccionar los elementos y aplicar correctamente las acciones o efectos.

Estos permiten seleccionar elementos HTML por nombre, atributo o por contenido.

Selectores de elementos

$(this).hide() - Oculta el elemento actual$("p").hide() - Oculta todos los parrafos$("p.test").hide() - Oculta todos los parrafos con la clase test$("#test").hide() - Oculta el elemento con el id test

Selectores de atributo

$("[href]") Selecciona todos los elementos con el atributo href

$("[href='#']") Seleccionar todos los elementos con atributo href y el valor #

$("[href!='#']") Seleccionar todos los elementos con el atribut href y que el valor sea diferente a #

$("[href$='.jpg']") Seleccinar todos los elementos con el atributo href y el valor .jpg

Selectores jQuery CSS

Los selectores CSS pueden ser usados para cambiar las propiedades de estilo de los elementos HTML

$("p").css("backg

round-

color","yellow");

Practica 2

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").css("background-

color","yellow");

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Click aqui</button>

</body>

</html>

Eventos jQuery

jQuery esta hecho a la medida para gestionar y manejar los eventos sobre los elementos HTML. Estas son las funciones básicas de la librería.

Los manejadores de eventos son llamados cuando “algo pasa” en los elementos HTML.

Es muy común que se coloquen los métodos e instrucciones dentro de la sección head. Ver practica anterior.

Pero si un sitio web tiene mas de una pagina es necesario incluir las funciones jquery dentro de un archivo .js separado.

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript"

src="mis_funciones_jquery.js"></script>

</head>

Eventos jQuery

$(documento).ready(function) - Esta función se une al elemento y se dispara cuando el elemento esta completamente preparado o cargado.

$(selector).click(function) - Esta función se une al elemento y se dispara cuando se ejecuta el evento click en el elemento.

$(selector).dbclick(function) - Esta función se une al elemento y se dispara cuando se ejecuta el evento doble click en el elemento.

$(selector).focus(function) - Esta función se une al elemento y se dispara cuando se establece el foco en el elemento.

$(selector).mouseover(function) - Esta función se une al elemento y se dispara cuando coloca el puntero sobre el elemento

Eventos jQuery

Conflictos de nombre

jQuery usa el signo $como nombre corto para referirse a la biblioteca. Y algunas otras funciones javascript usan este signo en sus funciones.

El método noConflict() especifica un nombre personalizado (ejemplo: JQ) en lugar de utilizar el signo de dólar.

Practica 3

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

var jq=jQuery.noConflict();

jq(document).ready(function(){

jq("button").click(function(){

jq("p").hide();

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Click aqui</button>

</body>

</html>

Efectos jQuery – hide & show (ocultar y mostrar)

Ambos métodos show() y hide(), pueden tener dos parámetros opcionales la velocidad(speed) y la devolución (callback).

Y su sintaxis es:

$(selector).hide(speed, callback)

$(selector).show(speed, callback)

Practica 4

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<button id="hide">Ocultar</button>

<button id="show">Mostrar</button>

</body>

</html>

Efectos jQuery – hide & show (ocultar y mostrar)

El parámetro de speedindica la velocidad para ocultar o mostrar el elemento. Además puede tomar los valores slow, fasty normal o en milisegundos

El parámetro de callback es el nombre de la función que tiene que ser ejecutada después de ejecutar completamente el método hide o show.

Practica 5

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide(1000);

});

});

</script>

</head>

<body>

<button>Oculto</button>

<p>Este es un parrafo con un pequeño

contenido</p>

<p>Este es otro parrafo</p>

</body>

</html>

Efectos jQuery – toggle

El método toggle alterna la visibilidad de los elementos HTML usando los métodos show() y hide(). Los elementos se muestran cuando están ocultos, o se ocultan cuando están mostrados en el documento HTML.

$(selector).toggle(speed, callback)

El parámetro de speed indica la velocidad para ocultar o mostrar el elemento, Además puede tomar los valores slow, fast y normal o en milisegundos

Practica 6

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").toggle();

});

});

</script>

</head>

<body>

<button>Alternar</button>

<p>Este es un parrafo con un poco de

contenido</p>

<p>Este es otro parrafo</p>

</body>

</html>

Efectos jQuery – Slide(slideDown, slideUp, slideToggle)

Estos métodos cambian gradualmente la altura de los elementos seleccionados

Sintaxis:

$(selector).slideDown(speed, callback)

$(selector).slideUp(speed, callback)

$(selector).slideToggle(speed, callback)

Practica 7

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideUp("slow");

});

});

</script>

<style type="text/css">

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div class="panel">

<p>Titulo</p>

<p>Neque porro quisquam est

qui dolorem ipsum quia dolor

sit amet, consectetur,

adipisci velit..</p>

</div>

<p class="flip">Ocultar

panel</p>

</body>

</html>

Efectos jQuery – Slide(slideDown, slideUp, slideToggle)

Practica 8

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");

});

});

</script>

<style type="text/css">

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div class="panel">

<p>Titulo</p>

<p>Neque porro quisquam est

qui dolorem ipsum quia dolor

sit amet, consectetur,

adipisci velit..</p>

</div>

<p

class="flip">Ocultar/Mostrar</

p>

</body>

</html>

Efectos jQuery – Fade(fadeIn, fadeOut, fadeTo)

Estos métodos cambian gradualmente la opacidad de los elementos seleccionados

Sintaxis:

$(selector).fadeIn(sp

eed, callback)

$(selector).fadeOut(s

peed, callback)

$(selector).fadeTo(sp

eed, opacity,

callback)

Practica 9

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("div").fadeTo("slow",0.25);

});

});

</script>

</head>

<body>

<div

style="background:yellow;width:300px;

height:300px">

<button>Click</button>

</div>

</body>

</html>

Efectos jQuery – Fade(fadeIn, fadeOut, fadeTo)

El parámetro de speedindica la velocidad para ocultar o mostrar el elemento, Además puede tomar los valores slow, fasty normal o en milisegundos

El parámetro opacity del método fadeTo permite establecer la opacidad del elemento.

Practica 10

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("div").click(function(){

$(this).fadeOut(4000);

});

});

</script>

</head>

<body>

<div

style="background:yellow;width:200px"

>HAZME CLICK</div>

<p>Este es un parrafo</p>

</body>

</html>

Efectos jQuery – Fade(fadeIn, fadeOut, fadeTo)

Practica 11

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".btn1").click(function(){

$("p").fadeOut()

});

$(".btn2").click(function(){

$("p").fadeIn();

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<button class="btn1">Fade out</button>

<button class="btn2">Fade in</button>

</body>

</html>

Animaciones personalizadas

La sintaxis para hacer animaciones personalizadas es:

$(selector).anima

te({params},

duration, easing,

callbak);

Practica 12

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("div").animate({height:300},"slow");

$("div").animate({width:300},"slow");

$("div").animate({height:100},"slow");

$("div").animate({width:100},"slow");

});

});

</script>

</head>

<body>

<button>Comenzar Animacion</button>

<br /><br />

<div

style="background:#98bf21;height:100px;width

:100px;position:relative">

</div>

</body>

</html>

Animaciones personalizadas

El parámetro de duration indica la velocidad para ocultar o mostrar el elemento, Además puede tomar los valores slow, fast y normal o en milisegundos

Practica 13<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("div").animate({left:"200px"},"slow");

$("div").animate({fontSize:"3em"},"slow");

});

});

</script>

</head>

<body>

<button>Comenzar Animacion</button>

<br /><br />

<div

style="background:#98bf21;height:200px;width

:200px;position:relative">Hola mundo</div>

</body>

</html>

Funciones callback jQuery

Una función callback es ejecutada después de que la animación en cuestión termina el 100%

Practica 14<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide(1000,function(){

alert("El parrafo esta oculto");

});

});

});

</script>

</head>

<body>

<button>Ocultar</button>

<p>Este es el contenido de un

parrafo</p>

</body>

</html>

Funciones callback jQueryPractica 15

<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide(1000);

alert("Este parrafo ahora esta

oculto");

});

});

</script>

</head>

<body>

<button>Ocultar</button>

<p>Este es un parrafo con un pequeño

contenido</p>

</body>

</html>

Manipulación de elementos HTML

jQuery tiene poderos métodos para cambiar y manipular el contenido de los elementos y atributos HTML

Cambiando el contenido HTML

El método html() cambia el contenido (innerHTML) del conjunto de elementos.

$("p").html("google");

Practica 16<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").html("Google, Inc.");

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Hazme click</button>

</body>

</html>

Agregando contenido HTML

$(selector).append(contenido) – Este método agrega contenido dentro del conjunto de elementos seleccionados.

$(selector).prepend(contenido) – Este método antepone contenido dentro del conjunto de elementos seleccionados.

Practica 17<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").append(" <b>n_n</b>.");

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Hazme Click</button>

</body>

</html>

Agregando contenido HTMLPractica 18<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").prepend(" <b>n_n</b>.");

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Hazme Click</button>

</body>

</html>

Agregando contenido HTML

$(selector).after(contenido) – Este método inserta contenido después de los elementos HTML

$(selector).before(contenido) – Este método inserta contenido antes de los elementos HTML

Practica 19<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").after("Google, Inc.");

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Hazme click</button>

</body>

</html>

Agregando contenido HTMLPractica 20<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").before("Google, Inc.");

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Hazme click</button>

</body>

</html>

Agregando contenido HTML

addClass() este método agrega una o mas clases de CSS a los elementos HTML

Practica 21<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p:first").addClass("intro");

});

});

</script>

<style type="text/css">

.intro

{

font-size:120%;

color:red;

}

</style>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Agrega una clase CSS</button>

</body>

</html>

Agregando contenido HTML

appendTo() inserta un elemento especifico al final, dentro de los elementos específicos

Practica 22<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("<b>Hola

Mundo!</b>").appendTo("p");

});

});

</script>

</head>

<body>

<h2>Este es un encabezado</h2>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Agrega elemento P</button>

</body>

</html>

Agregando contenido HTML

El método attr() establece o retorna el valor del atributo especificado.

Practica 23<html>

<head>

<base

href="http://www.w3schools.com/jquery/"/>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("img").attr("width","150");

});

});

</script>

</head>

<body>

<img src="img_pulpitrock.jpg" alt="Pulpit

Rock" width="284" height="213" />

<br />

<button>Establecar la propiedad de

ancho</button>

</body>

</html>

Agregando contenido HTML

El método detach() elimina los elementos seleccionados, pero mantiene una copia de ellos para reinsertarlos en algún momento.

Practica 24<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var elementos;

$("#btn1").click(function(){

elementos=$("p").detach();

});

$("#btn2").click(function(){

$("body").prepend(elementos);

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<button id="btn1">Quitar los P</button>

<button id="btn2">Restaurar los P</button>

</body>

</html>

Agregando contenido HTML

El método empty() elimina el contenido HTML de los elementos.

Practica 25<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").empty();

});

});

</script>

</head>

<body>

<p

style="width:200px;height:200px;backgro

und-color:yellow">This is a

paragraph.</p>

<button>Eliminar contenido</button>

</body>

</html>

Agregando contenido HTML

hasClass() este método indica si un elemento tiene la clase especificada como estilo

Practica 26<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

alert($("p").hasClass("intro"));

});

});

</script>

<style type="text/css">

.intro

{

font-size:120%;

color:red;

}

</style>

</head>

<body>

<h1>Este es un encabezado</h1>

<p class="intro">Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Alguno de los elemento tendra la clase

.intro???</button>

</body>

</html>

Agregando contenido HTML

El método html() establece o retorna el contenido de los elementos seleccionados

Practica 27<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").html("Hola <b>mundo!</b>");

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Agregando contenido HTML

El método insertAfter() Inserta elementos htmldespués de los elementos seleccionados

Practica 28<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("<span>Hola

Mundo!</span>").insertAfter("p");

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Agregando contenido HTML

El método insertBefore() Inserta elementos html antes de los elementos seleccionados

Practica 29<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("<span>Hola

Mundo!</span>").insertBefore("p");

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Agregando contenido HTML

El método prepend() Inserta contenido al principio. Pero dentro de los contenidos seleccionados

Practica 30<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").prepend("<b>Hola mundo!</b>

");

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Agregando contenido HTML

El método prependTo() Inserta contenido al principio. Pero dentro de los contenidos seleccionados

Practica 31<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("<b>Hola

mundo!</b>").prependTo("p");

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Agregando contenido HTML

El método remove() elimina los elementos seleccionados

Practica 32<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").remove();

});

});

</script>

</head>

<body>

<p>Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Agregando contenido HTML

El método removeAttr() elimina un atributo de los elementos seleccionados

Practica 33<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").removeAttr("style");

});

});

</script>

</head>

<body>

<h1>Este es un encabezado</h1>

<p style="font-size:120%;color:red">Este es

un parrafo</p>

<p>ThisEste es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Agregando contenido HTML

El método removeClass() elimina una o mas clases de los elementos seleccionados

Practica 34<html>

<head>

<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").removeClass("intro");

});

});

</script>

<style type="text/css">

.intro

{

font-size:120%;

color:red;

}

</style>

</head>

<body>

<h1>Este es un encabezado</h1>

<p class="intro">Este es un parrafo</p>

<p>Este es otro parrafo</p>

<button>Clic</button>

</body>

</html>

Método Descripción

addClass() Agrega una o mas clases en los elementos seleccionados

after() Inserta contenido después de los elementos seleccionados

append() Inserta contenido al final de los elementos seleccionados

appendTo() Inserta contenido al final de un elemento especificado

attr() Establece o regresa el valor de un atributo del elemento especificado

before() Inserta contenido antes de los elementos seleccinados

clone() Hace una copia de los elementos seleccionados

detach() Elimina los elementos, pero guarda una copia de ellos

empty() Elimina todos los elementos hijos y el contenido de los elementos seleccionados

hasClass() Checa si uno de los elementos seleccinados tiene una clase de estilo especifica

html() Establece o retorna el contenido de los elementos seleccionados

InsertAfter() Inserta elementos html despues de los elementos seleccionados

insertBefore() Inserta elementos html antes de los elementos seleccionados

prepend() Inserta contenido al principio. Pero dentro de los contenidos seleccionados

prependTo() Inserta contenido al principio. Pero dentro de los contenidos seleccionados

Métodos jQuery para HTML

remove() Elimina los elementos seleccionados

removeAttr() Elimina un atributo de los elementos seleccionados

removeClass() Elimina una o mas clases de los elementos seleccionados

replaceAll() Reemplaza los elementos seleccionados con nuevo contenido

replaceWith() Reemplaza los elementos seleccionados con nuevo contenido

text() Establece o retorna el texto de los elelmentos seleccionados

toggleClass() Alterna entre agregar y eliminar una clase de los elementos seleccionados

unWrap() Elimina el elemento padre de los elementos selecionados

val() Establece o retorna del atributo -value- de los elementos de formulario

wrap() Envuelve cada elemento seleccionado en un elemento especificado

wrapAll() Envuelve todos los elementos seleccionados en un elemento especificado

wrapInner() Envuelve cada uno de los contenidos de los elementos seleccionados con elemento especificado

Metodos jQuery para CSSMetodo Descripción

addClass() Agrega una o mas clases en los elementos seleccionados

css() Establace o retorna una o mas propiedades de estilo de los elementos seleccionados

hasClass() Checa si uno de los elementos seleccinados tiene una clase de estilo especifica

height() Establece o retorna la altura de los elementos seleccionados

offset() Establece o retorna la posicion relativa al documento para los elementos seleccionados

offsetParent() Devuelve el primer padre de elemento que este posicionado

position() Devuleve la posicion (relativa al elemento padre) del primer elemento seleccionado

removeClass() Elimina una o mas clases de los elementos seleccionados

scrollLeft() Establece o retorna la posicion horizontal de la barra de desplazamiento

scrollTop() Establece o retorna la posicion vertical de la barra de desplzamiento

toggleClass() Alterna entre agregar y eliminar una clase de los elementos seleccionados

width() Establece o retorna el ancho de los elementos seleccionados

Fin del día 4