Cómo Usar La Librería JQUERY en Un HTML

¿Cómo usar la librería JQUERY en un HTML?
El primer paso es tener la librería jquery.js , la cual se puede descargar desde la página
de https://jquery.com/ o solicitarla a una persona que la tenga.
Si ya lo hicieron entonces deberían importarlo de la siguiente forma:
<script type="text/javascript" src="js/jquery.js"></script>
El atributo src debería apuntar al archivo de la librería de Jquery.
Ahora bien, la sintaxis básica de Jquery se escribe más o menos de la siguiente forma:
$(elemento).metodoAEjecutar();
Cómo verán primero se utiliza el signo pesos $ seguido por paréntesis pondremos el
elemento que intentamos seleccionary luego mediante el punto llamamos al método que
vamos a ejecutar:
Para probar que todo ha salido bien y que Jquery está funcionando llamaremos al método
ready():
<!doctype html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
alert('Hola Jquery');
});
</script>
</head>
<body>
</body>
</html>
Si apareció un mensaje alert() con el mensaje ‘Hola Jquery’ entonces todo está
funcionando bien.
En caso de que ya tengan otra librería cargada que utilice el caracter $ entonces pueden
reemplazar este signo por jQuery de la siguiente forma:
jQuery(document).ready(function(){
alert('Hola Jquery');
});
Y tendrá el mismo efecto.
El método ready() es el equivalente a window.onload, pero sirve para comprobar que la

librería de Jquery está cargada. Como se muestra en el ejemplo este método recibirá un
parámetro que será una función en donde nosotros tendremos que escribir el código que
se ejecutará una vez que el código html se haya cargado en el navegador del usuario.
la sintaxis básica en Jquery es:
$(elemento).metodo();
Aquí vemos en el ejemplo cómo nosotros seleccionamos un elemento y a través del

mismo invocamos un método. A su vez estos métodos pueden ser comunes para todos
los elementos como ser propios de los mismos.
En el caso de los eventos, la sintaxis es muy parecida:
$(elemento).click(function(){
//Código a ejecutar.
});
Antes de seguir explicaré cómo seleccionar un elemento por su id. Existe algo llamado
selectores, los selectores nos permiten seleccionar una etiqueta por su nombre, id e
incluso por su class. Más adelante les mostraré a fondo los selectores, por el momento
aprenderemos cómo seleccionar un elemento por su id. Primero que nada cuando
usamos como en el ejemplo anterior:
//Código a ejecutar cuando se carga la página
});
Lo que estamos haciendo es elegir un objeto document que es el padre de todos los
elementos de html, ya sean h1, p, ul, div, span, etc. Lo que estamos diciendo con el
evento ready() es que cuando toda la página esté lista, cuando todas las etiquetas se
hayan cargado, ejecute el código que tiene dentro de la función.
En el caso de que queramos seleccionar un elemento por su id deberíamos usar el

caracter # seguido por el nombre del id de la siguiente forma:
$("#id_del_elemento")
Para probar cómo funciona tanto un método como un evento, haremos la siguiente
prueba. Crearemos un formulario con un campo de entrada y un botón y al pulsar el botón
nos mostrará por pantalla el valor del campo de entrada dentro de un div:
<!doctype html>
<html>
<head>
$("#boton").click(function(){
var nombre = $("#nombre").val();
$("#saludo").html('Hola ' + nombre);
});
});
</script>
</head>
<body>
<form action="javascript:void(0);">
<input type="text" id="nombre" />
<input type="button" id="boton" value="Mostrar nombre" />
<div id="saludo"></div>
</form>
</body>
</html>
Como vemos en primer lugar seleccionamos el botón por su id le aplicamos un evento

click(). Vale aclarar que al hacer clic sobre el elemento se ejecutará la función que recibe
como parámetro.
Luego seleccionamos, también por su id a la etiqueta con el id “nombre” que es un input

text, y al div por su id “saludo”. En el input text llamamos al método .val() que nos
devolverá el value del campo de entrada. Mientras que para el div utilizamos .html() lo
que nos permitirá insertar una cadena dentro del mismo.
Tanto .html() como .val() cumplen una función de métodos getters y setters.
Si usamos el método .html() sin un parámetro nos devolverá el valor de la cadena que se
encuentra dentro, pero en caso de usarlo con un parámetro cambiará el valor actual por el
de ese parámetro. Para ello veremos un ejemplo, copiaremos el contenido de un párrafo
dentro de otro con el mismo método:
<!doctype html>
<html>
<head>
$("#copiar").click(function(){
var parrafo = $("#parrafo1").html();
$("#parrafo2").html(parrafo);
});
});
</script>
</head>
<body>
<p id="parrafo1"> Soy un <strong> parrafo </strong> </p>
<a id="copiar" href="#"> Copiar </a>
<p id="parrafo2"> ... </p>
</body>
</html>
Como ven usamos el método .html() tanto para recuperar la cadena que está dentro de
un elemento como también para setear el valor de otro, eso obviamente dependiendo de
si tiene o no un parámetro.
Sin embargo, por si no notaron el párrafo 1 dentro suyo tiene una etiqueta strong que
también fue copiada, esto tiene sentido teniendo en cuenta el nombre del método: html,
esto significa que este método copiará toda la cadena, incluso el código. Si nosotros
quisiéramos recuperar solamente la cadena, deberíamos usar el método .text() de la
siguiente forma:
var parrafo = $("#parrafo1").text();

$("#parrafo2").html(parrafo);
Vale aclarar que el método .html() como .text() se aplican a etiquetas de apertura y cierre
como h1, p, ul, li, strong, div, span, etc.
En el caso del método .val() funciona muy parecido si no recibe parámetros nos devolverá
el value de la etiqueta y si recibe un parámetro lo cambiará. Además este método sólo se
aplica para elementos de formulario, input, textarea, select.
A continuación les mostraré un ejemplo de cómo el value de un elemento pasa a otro.

Además usaré un nuevo evento, el evento keyup() que sólo puede aplicarse a campos de
entrada como text input, text password y textarea, y se disparará en el momento en que
el usuario teclee sobre el mismo:
<!doctype html>
<html>
<head>
$("#value_1").keyup(function(){
var valor = $(this).val();
$("#value_2").val(valor);
});
});
</script>
</head>
<body>
Escribir algo
<input type="text" id="value_1" />
<br />
<textarea id="value_2" cols="50" rows="10"></textarea>
</form>
</body>
</html>
Nótese que dentro del evento keyup() en la función debemos usar:
$(this)
Para referirnos al elemento al que se le está aplicando el evento.
Como verán los eventos tienen el mismo nombre que Javascript sin Jquery sólo que sin el
“on” adelante. (onclick es click por ejemplo). Para consultar la lista de eventos pueden
A su vez hay eventos inventados por jquery como el evento hover() que en este caso
recibirá dos parámetros, el primero será una función que se disparará cuando el mouse se
posicione arriba del elemento y el segundo cuando lo abandone:
<!doctype html>
<html>
<head>
var texto = $("#caja").html();
$("#caja").hover(
function(){
$(this).html('');//Mouse arriba del elemento
},
function(){
$(this).html(texto);//Mouse fuera del elemento
}
);
});
</script>
</head>
<body>
<div id="caja" style="width: 80px; height: 80px; padding: 10px;
background-color: #ccc;"> Posicione el mouse arriba </div>
</body>
</html>
JQuery, parte 3: Método .attr()

Jquery tiene un método que nos permite recuperar y modificar el valor de cualquier
atributo de cualquier elemento. Por ejemplo, las etiquetas img e iframe tienen un atributo
en común llamado src, la etiqueta input tiene el atributo type que definirá su aspecto y
funcionalidad. También existen atributos como title que se puede aplicar a todas las
etiquetas.
El método .attr() nos permite recuperar el valor de un atributo o bien de modificarlo.

Podríamos tener una etiqueta como ésta:
<p id="parrafo" title="Soy el titulo del parrafo"> Yo amo a Javascript

</p>
Y recuperar su valor de esta forma:
var titulo = $("#parrafo").attr('title');

alert(titulo);
O bien modificarlo y mostrar su nuevo valor:
<!doctype html>
<html>
<head>
var titulo = $("#parrafo").attr('title');
alert(titulo);
$("#parrafo").attr('title', 'Soy un nuevo titulo del parrafo');
titulo = $("#parrafo").attr('title');
alert(titulo);
});
</script>
</head>
<body>
<p id="parrafo" title="Soy el titulo del parrafo"> Yo amo a
Javascript </p>
</body>
</html>
Como verán para recuperar el valor de un atributo debe usarse:
$(elemento).attr(atributo);
Y para modificar el valor de un atributo:
$(elemento).attr(atributo, valor);
De esta manera a continuación les mostraré un ejemplo muy básico para comprender un
poco el método .attr(): tendremos un campo de ingreso donde se deberá introducir la url
de una imagen y al presionar un botón debería mostrarse la imagen y más abajo el valor
del atributo src:
<!doctype html>
<html>
<head>
$("#cargar_imagen").click(function(){
var imagen_src = $("#imagen_src").val();
$("#imagen").attr('src', imagen_src);
});
});
</script>
</head>
<body>
<label> Url de imagen: </label>
<br />
<input type="text" id="imagen_src" />
<br />
<input type="button" id="cargar_imagen" value="Cargar imagen" />
</form>
<img id="imagen" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-
snc7/423982_10200453487325652_519658398_n.jpg" alt="" />
<div id="url_de_imagen"></div>
</body>
</html>
Cuando modificamos de a varios atributos podemos, por ejemplo tenemos una etiqueta:
<img id="imagen" src="" alt="" />
Y para modificar sus atributos podemos hacer esto:

var url =
'http://www.google.com.ar/intl/es_ALL/images/logos/images_logo_lg.gif';
$("#imagen").attr('src', url);
$("#imagen").attr('alt', 'Imagen no disponible');
$("#imagen").attr('title', 'Imagen de carga');
O bien, el método .attr() puede recibir un parámetro json con las propiedades y valores
correspondientes:
var url =
'http://www.google.com.ar/intl/es_ALL/images/logos/images_logo_lg.gif';
$("#imagen").attr({
src: url,
alt: 'Imagen no disponible',
title: 'Imagen de carga'
});
Se puede hacer de ambas formas. Como verán, usar un json es un poco más agradable
visualmente.
Otra posibilidad que nos da jquery a través de sus métodos es la de eliminar un atributo
mediante el método removeAttr():
Por ejemplo si tuviéramos esto:
<p id="parrafo" title="Saludo: 'Hola mundo'"> Hola mundo </p>
Y quisiéramos quitarle el atributo title, deberíamos hacerlo de esta manera:
$("#parrafo").removeAttr('title');
JQuery, parte 4: Método .css()

Como ya sabemos una de las principales funciones de Javascript es la de manipular el
contenido de la página. Cuando el desarrollador crea su página utiliza código html para
definir los elementos y css para darles el aspecto visual, Javascript en el encargado de
modificar todo esto dinamicamente.
Hasta ahora hemos visto cómo recuperar el valor de los atributos y de modificarlo con el
método .attr() y .val(), pero también existe un método llamado .css() que nos permite
recuperar y modificar los estilos, como por ejemplo el color de la letra.
Supongamos que nosotros tenemos un elemento como éste:

<p id="parrafo"> Lorem ipsum ad his scripta blandit partiendo, eum fastidi accumsan euripidis in, eum liber
hendrerit an. </p>
Podemos recuperar, por ejemplo, el valor de la propiedad de css text-decoration, de esta

forma:
var text_decoration = $("#parrafo").css('text-decoration');

alert(text_decoration);
Como la etiqueta no tiene definido ningún valor para la propiedad text-decoration

entonces debería devolvernos ‘none’.
Además así como podemos recuperar el valor de sus propiedades también podríamos
modificarlas:
$("#parrafo").css('text-decoration', 'underline');
Como vemos, si el método .css() recibe un parámetro nos devolverá el valor del mismo,
pero si recibe dos modifcará el valor del primer parámetro (propiedad) con el segundo
parámetro (valor)
Además al igual que el método .attr() si queremos modificar de a varias propiedades

podemos usar un json como parámetro.
Con Json:
$("#parrafo").css({
'text-decoration': 'underline',
'color': '#f00',
'font-weight': 'bold'
});
Sin Json:
$("#parrafo").css('text-decoration', 'underline');
$("#parrafo").css('color', '#f00');
$("#parrafo").css('font-weight', 'bold');
De ambas maneras es válida.
A continuación les mostraré un ejemplo en el que a través de dos select se podrá

modificar el color de letra y fondo de una caja div:
<!doctype html>
<html>
<head>
<style type="text/css">
#formato, #contenedor {
width: 500px;
border: solid 1px #000;
margin: 0px auto 0px auto;
padding: 10px;
}
</style>
$("#cambiar").click(function(){
var color_letra = $("#color_letra").val();
var color_fondo = $("#color_fondo").val();
$("#contenedor").css({
'color': color_letra,
'background-color': color_fondo
});
});
});
</script>
</head>
<body>
<form id="formato" action="javascript:void(0);">
<label> Color de letra </label>
<select id="color_letra">
<option value="white"> Blanco </option>
<option value="black"> Negro </option>
<option value="blue"> Azul </option>
<option value="red"> Rojo </option>
<option value="green"> Verde </option>
<option value="orange"> Naranja </option>
<option value="violet"> Violeta </option>
</select>
<label> Color de fondo </label>
<select id="color_fondo">
<option value="white"> Blanco </option>
<option value="black"> Negro </option>
<option value="blue"> Azul </option>
<option value="red"> Rojo </option>
<option value="green"> Verde </option>
<option value="orange"> Naranja </option>
<option value="violet"> Violeta </option>
</select>
<input type="button" value="Cambiar" id="cambiar" />
</form>
<div id="contenedor">
<p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii
accumsan euripidis in, eum liber hendrerit an. </p>
<p> Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint
id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an
eos. </p>
<p> Eu sit tincidunt incorrupte definitionem, vis mutat affert
percipit cu, eirmod consectetuer signiferumque eu per. </p>
<p> In usu latine equidem dolores. Quo no falli viris intellegam,
ut fugit veritus placerat per. </p>
<p> Ius id vidit volumus mandamus, vide veritus democritum te nec,
ei eos debet libris consulatu. </p>
</div>
</body>
</html>
JQuery, parte 5: Selectores

Hasta ahora hemos aprendido a tomar los elementos de un documento xhtml mediante
su id, esta es la forma más común, pero no la única.
Antes de continuar pensemos en una hoja de estilos, en un css. Existen tres formas de
acceder a una etiqueta, mediante su nombre, su id o su class. Si nosotros de pronto
tuviéramos algo como esto:
<p id="parrafo" class="parrafo"> Lorem ipsum ad his
Y quisiéramos aplicarle un estilo con css, podríamos hacerlo de tres formas diferentes:
Por su tipo de etiqueta:
p {color: #ccc; text-align: center; text-decoration: underline;}
Por su id:
#parrafo {color: #ccc; text-align: center; text-decoration: underline;}
O por su class:
.parrafo {color: #ccc; text-align: center; text-decoration: underline;}
Seleccionar una etiqueta por su nombre si bien no está mal, se usa poco en las hojas de
estilos ya que limita demasiado debido a que en el anterior ejemplo estaríamos indicando
que todos los párrafos deberían tener ese estilo. Sin embargo en las hojas css se suele
usar algunos estilos aplicados directamente a la etiqueta, por ejemplo si tuviéramos que
resetear varios tipos de elementos para que se vean igual en los distintos navegadores, o
bien agregar algún estilo al body, ya que este tipo de etiqueta no se repetirá.
Seleccionar una etiqueta por su id es otra forma, aunque como todos sabemos (y si no lo
sabés enterate ahora) un id puede aplicarse para una única etiqueta, no puede haber dos
etiquetas con el mismo id, ya que es un error y la W3 es el estándar de dicha
implementación.
Y finalmente tenemos las class que funcionan igual que los id con la gran diferencia que
varios elementos pueden tener el mismo nombre de clase.
La forma de acceder a los elementos con jquery es similar a css. Como habrás notado,
para seleccionar un id utilizamos numeral + el nombre del id:
$("#parrafo")
Tanto como los nombre como las clases funciona igual:
Con los nombres de etiqueta:
$("p")
Y con las clases punto + nombre de la class:
$(".parrafo")
El nombre para levanta los elementos y el punto para hacerlo por class.
Por lo tanto siguiendo nuestro anterior ejemplo con la etiqueta párrafo:
<p id="parrafo" class="parrafo"> Lorem ipsum ad his scripta blandit

partiendo</p>
Para aplicarle estilos pero desde Javascript y Jquery lo haríamos de las siguientes
formas:
Con nombre de etiqueta:
$("p").css({
'color': '#ccc',
'text-align': 'center',
'text-decoration': 'underline'
});
Con id:
$("#parrafo").css({
'color': '#ccc',
});
Con Class:
$(".parrafo").css({
'color': '#ccc',
});
A continuación les mostraré un ejemplo muy básico. Habrá una lista de categorías con un
checkbox cada una, y uno más para seleccionar y quitar selección a todos:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend> Seleccione sus productos </legend>
<ul id="lista_productos">
<li> <input type="checkbox" class="producto" value="1" />
XBox 360 </li>
Wii </li>
Ps3 </li>
<li> <input type="checkbox" class="producto" value="4" /> Ps
Vita </li>
Atari </li>
</ul>
<input type="checkbox" id="seleccionar_todo" /> Seleccionar
todo
</fieldset>
</form>
</body>
</html>
Ahora lo que nosotros tenemos que lograr es que al chequear el input con el id
“seleccionar_todo” todos los checkbox de los productos se seleccionen o
desseleccionen dependiendo del estado de dicho elemento, al cual tendremos que
aplicarle un evento change() y verifica si está selecionado:
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
});
});
Ok, ahora que sabemos cómo guardar el estado del checked del input checkbox,
utilizando el método is() aplicaremos ese mismo estado a los demás. Hay varias formas,
una de ellas es levantarlos por su nombre de etiqueta, input:
$("input").attr('checked', checkeado);
});
$("input").attr('checked', checkeado);
});
});
El problema es que si bien en el ejemplo funciona en la vida real nuestra página tendrá
muchas etiquetas input, y nosotros sólo se lo queremos aplicárselo a ese grupo de
checkbox.
Otra forma sería seleccionar todos los input que sean checkbox:
$("input[type='checkbox']").attr('checked', checkeado);
});
});
Pero es casi lo mismo que la anterior, si bien no levantará todos los input, sí lo hará con
todos aquellos que sean checkbox y no tengan nada que ver. Así que la forma correcta,
desde mi punto de vista, sería seleccionados por su class, ya que estos elementos
deberían ser los únicos que tienen esa clase:
$(".producto").attr('checked', checkeado);
});
});
U otra forma casi igual también podría ser:
$("#lista_productos .producto").attr('checked', checkeado);
});
});
En la anterior forma le aplicamos la acción de checked a todos los elementos con la clase
“producto” mientras que en esta última se la aplicamos a todos los elementos con la
misma clase pero que estén dentro del elemento con el id “lista_productos“.
Todas las formas logran el mismo resultado pero sólo las últimas son las que deberían
aplicarse.
El código finalmente quedaría así:
<!DOCTYPE html>
<html>
<head>
$(".producto").attr('checked', checkeado);
});
});
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend> Seleccione sus productos </legend>
<ul id="lista_productos">
XBox 360 </li>
Wii </li>
Ps3 </li>
<li> <input type="checkbox" class="producto" value="4" /> Ps
Vita </li>
Atari </li>
</ul>
<input type="checkbox" id="seleccionar_todo" /> Seleccionar
todo
</fieldset>
</form>
</body>
</html>
Como vemos en Jquery la forma de seleccionar los elementos es igual a css, como lo
dije al principio, lo que lo hace más fácil y rápido para nosotros.
Funciones utiles para utilizar en jQuery
addClass()
$("#contenido").addClass("nombreclase");
Con la función addClass() lo que hacemos añadir una clase ya establecida en nuestro CSS
al contenedor con id=”contenido”. En este caso le estamos añadiendo los estilos de la clase
“nombreclase”.
after()
$("#contenido").after("<p>hola!</p>");
El método after() añade contenido html delante de lo que haya dentro del contenedor con
id=”contenido”.
ajax()
var dataString = 'id='+service;
$.ajax({
type: "POST",
url: "archivo.php",
data: dataString,
success: function() {
...
}
});
Con el método ajax() lo que conseguimos es realizar una llamada a un archivo php sin tener
que recargar la página ni hacer una petición al servidor.
append()
$("#contenido").append("<p>hola!</p>");
El método append() añade contenido html al contenedor con id=”contenido”.
appendTo()
$("#contenido2").appendTo("#contenido1");
El método appendTo() copia o mueve el contenedor con id=”cotenedor2″ al contenedor con

id=”contenido1″.
attr()
$("#contenido").attr("data");
$("#contenido").attr("title");
Con la función attr() retorna el valor del atributo que le pases como parámetro de un
elemento o contenedor.
before()
$("#contenido").before("<p>hola!</p>");
El método before() añade contenido html detrás de lo que haya dentro del contenedor con
id=”contenido”.
blur()
$("input").blur(function(){
...
});
Al salirse de en un campo o input de un formulario ejecutaríamos el código de dentro de la

función.
change()
$("select#languages").change(function(){
...
});
Al cambiar de opción en un selector de opciones ejecutaríamos el código de dentro de la

función.
click()
$("#button").click(function(){
...
});
Al hacer click en el evento o contenedor con id=”button” ejecutaríamos el código de dentro

de la función.
css()
$("#contenido").css("background-color","yellow");
Con la función css() podemos cambiar estilos al contenedor con id=”contenido”. En el

ejemplo estamos cambiando el color de fondo.
dblclick()
$("#button").dblclick(function(){
...
});
Al hacer doble click en el evento o contenedor con id=”button” ejecutaríamos el código de

dentro de la función.
delay(time)
$("#contenido").slideUp(300).delay(800).fadeIn(400);
Esta función permite retrasar la ejecución de las siguientes que estén en la cola. Es útil para
añadir retrasos en una serie de animaciones. En el caso del código de ejemplo, primero
hacemos slideup, hacemos una espera y seguidamente hacemos fadein.
each()
$("li").each(function(){
$(this).toggleClass("nombreclase");
});
Con la función each() lo que hacemos es iterar una serie de elementos. En el ejemplo
estamos iterando una lista a la que a cada elemento le estamos cambiando el estilo o css
utlizando la función toggleClass().
empty()
$("#contenido").empty();
Con empty() lo que conseguimos es vaciar el contenido de un contenedor antes de volverlo

a rellenar.
fadeIn()
$("#contenido").fadeIn();
El método fadeIn() hace que el elemento que lo recibe aparezca en la página a través del
cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de
opacity 1. Este método sólo podremos observarlo si el elemento sobre el que lo invocamos
era total o parcialmente transparente, porque si era opaco al hacer un fadeIn() no se
advertirá ningún cambio de opacidad.
fadeOut()
$("#contenido").fadeOut();
Este método hace que el elemento que lo recibe desaparezca de la página a través del
cambio de su opacidad, haciendo una transición suavizada que acaba con el valor de
opacity cero.
fadeTo()
$("#contenido").fadeTo("slow", 0.33);
El método fadeTo() es bastante más versátil, como ya se había adelantado. Para hacer un
ejemplo interesante con este método tenemos que ver cómo se le pueden pasar distintos
valores de opacidad y para ello hemos creado un campo select con distintos valores.
focus()
$("input").focus(function(){
...
});
Al situarte en un campo o input de un formulario ejecutaríamos el código de dentro de la

función.
focusout()
$("input").focusout(function(){
...
});
Al salirse de en un campo o input de un formulario ejecutaríamos el código de dentro de la

función.
hasClass()
$("#contenido").hasClass("nombreclase");
Con la función removeClass() comprobamos si el contenedor con id=”contenido” tiene la

clase “nombreclase”. Devuelve True si la tiene.
height()
$("#contenido").height("200px");
Con la función height() modificamos el alto del contenedor con id=”contenido”.
hide()
$("#contenido").hide();
Con la función hide() lo que hacemos es ocultar el contenido del contenedor con
id=”contenido”.
hover()
$('#element').hover(function(){
...
});
Con la función hover() lo que hacemos es ejecutar un código tras pasar el ratón por encima
del contenedor con id=”element”.
html()
$("#contenido").html("<p>hola!</p>");
El método html() reemplaza el contenido html que haya dentro del contenedor con
id=”contenido” por el que le pasas como parámetro.
load()
$("#contenido").load("archivo.php");
Función muy útil para cargar contenidos sin necesidad de recargar la página. En el caso del
ejemplo, lo que haríamos es cargar el contenido html del “archivo.php” en el contenedor
con id=”contenido”.
keyup()
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
Con keyup() capturamos los eventos del teclado. En el ejemplo lo que se escriba en el input
se va escribiendo también en el párrafo.
mouseleave()
$("#contenido").mouseleave(function(){
...
});
Al sacar el ratón de encima del contenedor o elemento con id=”contenido” ejecutaríamos el

código de dentro de la función.
mouseout()
$("#contenido").mouseout(function(){
...
});
Al sacar el ratón de encima del contenedor o elemento con id=”contenido” ejecutaríamos el

código de dentro de la función.
mouseover()
$("#contenido").mouseover(function(){
...
});
Al pasar el ratón por encima del contenedor o elemento con id=”contenido” ejecutaríamos
el código de dentro de la función.
nextAll()
$("#contenido").nextAll().remove();
El método nextAll() selecciona todos los contenedores siguientes al que tiene

id=”contenido”. En el caso del ejemplo, se eliminarán todos los contenedores siguientes a
“#contenido”.
next()
$("#contenido").next().remove();
El método next() selecciona el contenedor siguiente al que tiene id=”contenido”. En el caso

del ejemplo, se eliminará el contenedor siguiente a “#contenido”.
parent()
$("#contenido").parent();
El método parent() retorna un objeto que contiene información del contenedor padre del
contenedor con id=”contenido”.
position()
$("#contenido").position().top;
$("#contenido").position().left;
La función position() permite obtener la posición de un elemento en relación a su “padre”.
ready()
//Aqui tu codigo
});
Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más
util que el window.onload, pues este debe esperar a que todos los elementos de la pagina
esten cargados (como scripts e imagenes) paa ejecutar. El “ready”, en cambio, espera solo a
la estructura.
removeClass()
$("#contenido").removeClass("nombreclase");
Con la función removeClass() lo que hacemos quitar una clase o estilo CSS al contenedor
con id=”contenido”. En e este caso le estamos quitando los estilos de la clase
“nombreclase”.
slideDown()
$("#contenido").slideDown();
Con la función slideDown() lo que hacemos es mostrar hacia abajo el contenido del
contenedor con id=”contenido” que inicialmente o no podría estar oculto.
slideToggle()
$("#contenido").slideToggle();
Con la función slideToggle() lo que hacemos es mostrar y ocultar el contenido del

slideUp()
$("#contenido").slideUp();
Con la función slideUp() lo que hacemos es mostrar hacia arriba el contenido del
show()
$("#contenido").show();
Con la función show() lo que hacemos es mostrar el contenido del contenedor con
id=”contenido” que inicialmente o no podría estar oculto.
size()
$("li").size();
La función size() en este caso retorna el número de elementos que hay en la lista.
submit()
$("#formulario").submit(function() {
if ($("#code").val() == "correct") {
$.ajax({
type: "POST",
url: "archivo.php",
data: dataString,
success: function() {
$("#message").empty();
$("#message").append('<div>Hemos recibido su codigo
correctamente</div>');
$(this).remove();
}
});
}
$("#message").empty();
$("#message").append('<div>Codigo no valido!</div>');
return false;
});
La función submit() se suele utilizar para obtener la información de formularios. En el

código anterior vemos un ejemplo de lo que se podría hacer. El formulario debe tener
id=”formulario” y método POST.
remove()
$("#contenido").remove();
Con la función remove() lo que hacemos es quitar de la visat el contenido del contenedor
removeAttr()
$("#image").removeAttr("width");
Con la función removeAttr() lo que hacemos es quitar un atributo del elemento con
id=”image”.
text()
$("#contenido").text();
Con la función text() obtiene el contenido textual del elemento o contenedor con
id=”contenido”.
toggle()
$("#contenido").toggle();
Con la función toggle() mostramos y ocultamos con efecto el contenedor con

id=”contenido”.
toggleClass()
$("#contenido").toggleClass("nombreclase");
Con la función toggleClass() podemos añadir y quitar la clase “nombreclase” al contenedor

val()
$("input").val();
$('select.foo option:selected').val(); // get the value from a
dropdown select
$('select.foo').val(); // get the value from a
dropdown select even easier
$('input:checkbox:checked').val(); // get the value from a checked
checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of
radio buttons
Con la función val() obtenemos el valor de los inputs, selects, textareas de nuestros
formularios.
width()
$("#contenido").width("200px");
Con la función width() modificamos el ancho del contenedor con id=”contenido”.
La ventaja y/o utilidad de estas funciones es añadir contenidos en tiempo real, una vez que
ya se ha cargado completamente nuestro sitio web.
La función append() añade el contenido al final del elemento/capa que nosotros le

especifiquemos.
En cambio la función prepend() funciona exactamente igual, pero el contenido se añade al

principio del elemento/capa que nosotros le especifiquemos. Ejemplo:
1. $('.capa1').append("Actualidad jQuery");
En el ejemplo, añadimos el texto "Actualidad jQuery" dentro de la capa con la clase

"capa1", al final.
Al igual que hemos añadido un texto, podríamos añadir código HTML, una imagen, etc.
Y la función prepend() funcionaría igual, como vemos en el ejemplo:
1. $('.capa1').prepend("Actualidad jQuery");
Añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", pero al
principio.
Ejemplo del metodo attr()

Este es un ejemplo en el cual se hace uso del metodo attr() con un checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Adding Attribute to HTML Element</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
$(".add-attr").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>
</head>
<body>
<button type="button" class="add-attr">Select Checkbox</button>
<input type="checkbox">
</body>
</html>
Ejemplo del metodo removeAttr()
Este ejemplo remueve el atributo de un elemento de ancla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Removing Attribute from HTML Element</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
$(document).ready(function() {
$(".remove-attr").click(function(){
$("a").removeAttr("href");
});
});
</script>
</head>
<body>
<button type="button" class="remove-attr">Remove Link</button>
<a href="#">Demo Link</a>
</body>
</html>

Cómo Usar La Librería JQUERY en Un HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cómo Usar La Librería JQUERY en Un HTML

Cargado por

Copyright:

Formatos disponibles

¿Cómo usar la librería JQUERY en un HTML?

Si ya lo hicieron entonces deberían importarlo de la siguiente forma:

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

El atributo src debería apuntar al archivo de la librería de Jquery.

Y tendrá el mismo efecto.

El método ready() es el equivalente a window.onload, pero sirve para comprobar que la

la sintaxis básica en Jquery es:

Aquí vemos en el ejemplo cómo nosotros seleccionamos un elemento y a través del

En el caso de los eventos, la sintaxis es muy parecida:

En el caso de que queramos seleccionar un elemento por su id deberíamos usar el

Como vemos en primer lugar seleccionamos el botón por su id le aplicamos un evento

Luego seleccionamos, también por su id a la etiqueta con el id “nombre” que es un input

var parrafo = $("#parrafo1").text();

A continuación les mostraré un ejemplo de cómo el value de un elemento pasa a otro.

Nótese que dentro del evento keyup() en la función debemos usar:

Para referirnos al elemento al que se le está aplicando el evento.

JQuery, parte 3: Método .attr()

El método .attr() nos permite recuperar el valor de un atributo o bien de modificarlo.

<p id="parrafo" title="Soy el titulo del parrafo"> Yo amo a Javascript

Y recuperar su valor de esta forma:

var titulo = $("#parrafo").attr('title');

O bien modificarlo y mostrar su nuevo valor:

Como verán para recuperar el valor de un atributo debe usarse:

Y para modificar el valor de un atributo:

<img id="imagen" src="" alt="" />

Y para modificar sus atributos podemos hacer esto:

Por ejemplo si tuviéramos esto:

<p id="parrafo" title="Saludo: 'Hola mundo'"> Hola mundo </p>

Y quisiéramos quitarle el atributo title, deberíamos hacerlo de esta manera:

JQuery, parte 4: Método .css()

Supongamos que nosotros tenemos un elemento como éste:

Podemos recuperar, por ejemplo, el valor de la propiedad de css text-decoration, de esta

var text_decoration = $("#parrafo").css('text-decoration');

Como la etiqueta no tiene definido ningún valor para la propiedad text-decoration

Además al igual que el método .attr() si queremos modificar de a varias propiedades

De ambas maneras es válida.

A continuación les mostraré un ejemplo en el que a través de dos select se podrá

JQuery, parte 5: Selectores

<p id="parrafo" class="parrafo"> Lorem ipsum ad his

Por su tipo de etiqueta:

p {color: #ccc; text-align: center; text-decoration: underline;}

#parrafo {color: #ccc; text-align: center; text-decoration: underline;}

.parrafo {color: #ccc; text-align: center; text-decoration: underline;}

Tanto como los nombre como las clases funciona igual:

Con los nombres de etiqueta:

Por lo tanto siguiendo nuestro anterior ejemplo con la etiqueta párrafo:

<p id="parrafo" class="parrafo"> Lorem ipsum ad his scripta blandit

Con nombre de etiqueta:

U otra forma casi igual también podría ser:

El código finalmente quedaría así:

Funciones utiles para utilizar en jQuery

var dataString = 'id='+service;

El método append() añade contenido html al contenedor con id=”contenido”.

El método appendTo() copia o mueve el contenedor con id=”cotenedor2″ al contenedor con

Al salirse de en un campo o input de un formulario ejecutaríamos el código de dentro de la

Al cambiar de opción en un selector de opciones ejecutaríamos el código de dentro de la

Al hacer click en el evento o contenedor con id=”button” ejecutaríamos el código de dentro

Con la función css() podemos cambiar estilos al contenedor con id=”contenido”. En el

Al hacer doble click en el evento o contenedor con id=”button” ejecutaríamos el código de

Con empty() lo que conseguimos es vaciar el contenido de un contenedor antes de volverlo

Al situarte en un campo o input de un formulario ejecutaríamos el código de dentro de la

Al salirse de en un campo o input de un formulario ejecutaríamos el código de dentro de la

Con la función removeClass() comprobamos si el contenedor con id=”contenido” tiene la