Download - jquery (1)
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
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>
<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