10.- Creación de Elementos HTML con Jquery – Curso Básico de #Jquery #10

En este capitulo (y el ultimo de este curso), veremos cómo crear elementos HTML de forma dinámica y con la ayuda de jquery (podría también ser de interés ver como se realiza esto sin jquery, con javascript puro en otro artículo que hice hace tiempo).

Para crear elementos HTML dinámicamente utilizaremos la función de nombre append() de jquery, esta función agrega contenido HTML o un Nodo Html al final de su contenido, y para el caso contrario (eliminar elementos) utilizaremos la función remove() la cual elimina un elemento del contenido de la pagina.

Para comprender estas funciones veremos cómo hacer un formulario detalle (como cuando vas a la tienda y ves como te agregan los productos  que vas a pagar a una tabla), y la manera que jquery con la ayuda de sus selectores y su catálogo de funciones lo hace demasiado fácil de hacer.

El código es el siguiente:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
         <script src="../scripts/jquery.js"></script>

           <style>
			#tutorial .bloque{
				float:left;
				width:110px;
			}
			#tutorial input,#tutorial label{
				font-size:11px;
				width:60px;
			}
			#tablaProductos,#tablaProductos td,#tablaProductos th{
				border:1px solid #333;
				border-collapse:collapse;
			}
			#tableProductos th{
				width:100px;
			}
			</style>
    </head>

    <body>
         <div id="tutorial">
            <div >
                <div class="bloque">
                    <label>Código</label>
                    <input class="texto" type="text" id="txtCodigo" value="" />
                </div>
                <div class="bloque">
                    <label>Nombre</label>
                    <input class="texto" type="text" id="txtNombre" value="" />
                </div>
                  <div class="bloque">
                    <label>Precio</label>
                    <input class="texto" type="text" id="txtPrecio" value="" />
                </div>
                <div class="bloque">
                    <input value="Agregar" type="button" onclick="Agrega()" />
                </div>
                <div style="clear:both"></div>
            </div>

            <div>
                <table style="width:400px;" id="tablaProductos">
                    <tr>
                        <th>Código</th>
                        <th>Nombre</th>
                        <th>Precio</th>
                        <th>X</th>
                    </tr>
                </table>
            </div>
         </div>
    </body>
</html>

Código Jquery

function Agrega(){

	//obtenemos los valores de nuestra caja de texto
	nodoAInsertar="&lt;tr&gt;"; //nodo en el cual obtendremos el codigo html nuevo a insertar en la tabla

	$(".texto").each(function(){ //selector por clase texto y un each para recorrer elementos

		nodoAInsertar+="&lt;td&gt;"; //abrimos td

		nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto

		nodoAInsertar+="&lt;/td&gt;" //cerramos td

		//limpiamos la caja de texto actual
		$(this).val("");
	});

	//agregamos el botpon para eliminar
	nodoAInsertar+="&lt;td&gt;&lt;input type='button' value='Eliminar' onclick='Elimina(this)'&gt;&lt;/td&gt;"
	nodoAInsertar+="&lt;/tr&gt;" //cerramos el tr

	//por ultimo insertamos el nodo tr a la tabla
	$("#tablaProductos").append(nodoAInsertar)

	//ponemos el foco en la caja de texto código
	$("#txtCodigo").focus()
}

function Elimina(NodoBoton){

	//recibimos el botón como parametro y lo transformamos a jquery
	var botonEliminar=$(NodoBoton);

	//obtenemos el padre tr del boton para asi eliminarlo, el primer padre es td, el segundo es tr
	var padreTRBoton=$(botonEliminar).parent().parent();

	padreTRBoton.remove();

	//todo esto puede funcionar con esta misma linea "$(NodBoton).parent().parent().remove();"
}

Código en ejecución

Tenemos tres cajas de texto y un botón, al presionar el botón invocamos la función Agrega() la cual realiza un each sobre los elementos de clase “texto” y les da un formato de celda (<td>) y concatenándolos a una variable de nombre nodoAInsertar, al finalizar el ciclo agregamos un botón, tal como lo haríamos con html, y en este botón agregamos la función Elimina() recibiendo como parámetro el mismo botón. Por último utilizando la función append() de jquery anexamos el nuevo código html a la tabla con el id tablaProductos, y así de sencillo se realiza la creación de elementos HTML de forma dinámica.

Para el caso de eliminar simplemente utilizamos la función remove() de jquery, relacionando al padre tr del botón recibido, y proseguimos a eliminar el tr junto a sus hijos.

Este fue el ultimo capitulo de este curso básico de jquery, después de ver estos 10 temas, ya eres capaz de utilizar jquery sin problemas y espero te sirva para que sea una herramienta que te ayude a realizar tus proyectos de manera rápida y estética.

Ir al  Capitulo Anterior (9.- La función Animate).

9.- La función Animate – Curso Básico de #Jquery #9

La función animate() de jquery nos sirve para crear animaciones, transformando los elementos HTML de nuestro sitio web. Su funcionalidad se basa en: realizar una transformación del elemento recibiendo el estilo final (CSS) que tendrá nuestro objeto, alguna acción (reducir de tamaño, desaparecerlo) y en que tiempo se realizara el efecto.

Algo que vale la pena recordar, es que siendo una función de jquery, esta función tiene un parámetro al final para ejecutar un callback, y así podemos realizar varias animaciones en secuencia.

Para comprender la función muestro el siguiente ejemplo, en el cual línea por línea explico que es lo que realiza:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>animate</title>
        <script src="../scripts/jquery.js"></script>
    </head>

    <body>
    	<input type="button" value="inicia" onclick="inicia();" />
        <div  style="width:100px; position:relative; height:100px; background:#060;"></div>
        <br />

    </body>
</html>

Código Jquery


$("div")
    .animate({ //seleccionamos el div
            opacity: 0.25, //dismunuye la opacidad del objeto
            left: "+=100", //aumenta la posicion en horizontal del objeto a 100 px
            height: "toggle" //oculta el objeto
        }, 2000 //la animación se realiza en 2 segundos
        ,
        function() { //ejecutamos un callback con función anonima para regresar a la normalidad el objeto
            $("div").animate({ //seleccionamos nuevamente el div
                    opacity: 1, //regresa la opacidad del objeto a normal
                    left: "-=100", //dismunuye la posicion del objeto menos 100 px
                    height: "toggle" //aparece el objeto
                }, 1000 //tiempo de 1 segundo
                , inicia //el callback ejecuta la funcion inica para volver a comenzar todo
            )
        })
}

Ejemplo en ejecución

El código anterior, al presionar el botón inicia, realiza una animación y ejecuta un callback para regresar el div a su estado original.

Utilizando animate() podemos realizar todo tipo de animaciones a nuestros elementos HTML, recomiendo que la utilicen e intenten realizar cosas por si solos en lugar de bajar cosas ya hechas, esto les ayudara a comprender como funcionan los plugins de jquery y les dará facilidad para modificarlos o crear los plugins propios (creación de plugins de jquery, el siguiente curso que estoy por hacer).

Ir al Capitulo Siguiente (10.- Creación de Elementos HTML con Jquery).

Ir al  Capitulo Anterior (8.- Callbacks).

8.- Callbacks – Curso Básico de #Jquery #8

Los callbacks sirven para hacer una pila de funciones, las cuales se ejecutaran en secuencia conforme termine cada una de ellas. Los callbacks son utilizados a menudo para efectos y animaciones de los componentes HTML. Con jquery tenemos la facilidad de utilizarlos, ya que todas las funciones de jquery tienen callback, y este siempre se envía como ultimo parámetro.

Como explique en el artículo de javascript sobre enviar funciones como parámetro, un callback puede ser una función anónima o una función ya existente, y para ello veamos un ejemplo a continuación.

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>callbacks</title>
        <script src="../scripts/jquery.js"></script>
    </head>

    <body>
    	<input type="button" value="inicia" onclick="funcionPrimera();" />
        <div id="div" style="width:100px; height:100px; background:#060;"></div>
    </body>
</html>

Código Jquery

function functionUltima(){	
   alert("hola");
}

function funcionPrimera(){	
   $("#div").fadeOut(1000,function(){ 
     //una función anónima puede servir tambien y se ejecuta como callback		
        $("#div").fadeIn(1000,functionUltima)//funcion ultima ejecuta una funcion existente	
   })
}

Ejemplo en ejecución

En el ejemplo anterior se ejecuta la función fadeOut() la cual desaparece un elemento HTML en un margen de tiempo siendo 1000 igual a 1 segundo, y la función fadeIn() sirve para el caso contrario; utilizo estas funciones para que sea notorio la ejecución de la pila de funciones anidadas.

Lo primero que se realiza se desaparece el div, y terminando de realizar esta acción se dispara la función anónima que procede a aparecerlo, y por último se ejecuta una función existente la cual muestra un alert().

Los callbacks son utilizados comúnmente y su enorme potencial nos permite realizar mucho dinamismo en nuestros sitios web.

Ir al Capitulo Siguiente (9.- La función Animate).

Ir al  Capitulo Anterior (7.- Las funciones Show y Hide).

7.- Las funciones Show y Hide – Curso Básico de #Jquery #7

En jquery existen dos funciones, las cuales utilizaremos continuamente, su nombre son hide() y show(), estas funciones como su nombre lo indica, ocultan y muestran un elemento.

La funcionalidad que se puede realizar, es ilimitada, basta con tener imaginación y podremos realizar cosas bastante estéticas; para utilizarla, seleccionamos el o los elementos que deseamos aplicar la función por medio de un selector y al igual que todas las funciones de jquery continuamos con punto y el nombre de la función, por ejemplo:

$("div").show();

Así de sencillo es su sintaxis, y esta linea ocultaría todos los divs de nuestra pagina; pero para sacarle jugo a estas funciones vamos a realizar algo mas interesante, realizaremos un acordeón, para ello tenemos el siguiente código:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show hide</title>
<script src="../scripts/jquery.js"></script>
</head>
<style>
#acordeon{
width:500px;
border:1px solid #777;
}

.titulo{
background:#CCC;
cursor:pointer;
padding:3px;
border-bottom:1px solid #666;
}

.texto{
padding:5px;
}
</style>
<div id="acordeon">
<div >
<div class="titulo">Sección 1</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 2</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 3</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 4</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
</div>

<body>

</body>
</html>

Código Jquery

$(document).ready(function(){
//agregamos evento clic a los titulos

$(".titulo").click(function(){
//obtenemos el objeto jquery que ejecuto el evento
divTitulo=$(this);

//ocultamos todos los div con clase texto
$(".texto").hide();

//mostramos el div correspondiente a la sección
divTitulo.parent().find(".texto").show();
});

//ocultamos todos los divs de clase texto al iniciar
$(".texto").hide();
});

En el código anterior, tenemos un conjunto de divs los cuales tienen una clase llamada sección y una llamada texto, los divs de clase sección realizaran la función que activa la sección del texto del acordeón el cual se encuentra en el div de clase texto.

En el código de jquery, agregamos un evento a los divs de clase sección para cuando den clic en ellos se muestre el div correspondiente y se oculten todos los demás, utilizando la función parent() y find() de jquery (las cuales explico en este articulo), accedemos a el elemento correspondiente a mostrar.

A continuación dejo el ejemplo funcionando, solo den clic a una sección y verán su funcionalidad:

En este capitulo vimos como podemos hacer un uso interesante por medio de las funciones hide() y show() de jquery.

Ir al Capitulo Siguiente (8.- Callbacks).

Ir al  Capitulo Anterior (6.- Eventos).

6.- Eventos – Curso Básico de #Jquery #6

Los eventos nos sirven para que nuestros elementos HTML tengan funcionalidad, ya sea al dar clic sobre ellos, pasar el puntero encima, o cuando escribimos en las cajas de texto, por medio de javascript existen los eventos para darle esa funcionalidad a nuestros objetos, pero con jquery también podemos hacerlo, de una forma más rápida, ya que por medio de los selectores podemos dar la funcionalidad a muchos elementos en pocas líneas de código.

Para ver la funcionalidad de los eventos, veamos el siguiente código.

Código HTML

<select id="combo">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
<input id="boton1"  type="button" value="click boton 1" /><input id="boton2"  type="button" value="click boton 2" />

Código Jquery

$(document).ready(function(){
	$("#combo").change(function(){
		alert($(this).val())
	});

	$("input").click(function(){
		alert("clic al botón: "+$(this).attr("id"))
	})
});

En el anterior código tenemos un combobox y un botón, a los cuales seleccionamos con los selectores de jquery, al primero por medio del evento change (el cual se invoca al cambiar la opción seleccionada en el combobox), le damos una funcionalidad que nos muestre la opción seleccionada en un alert(), y el segundo selector, seleccionamos todos los elementos input (que en este caso son dos botones), y en la misma línea le aplicamos el evento clic, no hay necesidad de hacer la funcionalidad botón por botón, gracias a los selectores nos ahorramos ese trabajo, y por medio de $(this), accedemos al botón presionado y a sus atributos (los cuales podemos acceder por las funciones de jquery).

Nota: Al utilizar la linea $(document) accedemos a el documento, y este tiene la función ready(), la cual recibe una función anónima, utilizando esta linea, hacemos que nuestro código interno en la función anónima se ejecute hasta que ya este cargado los objetos DOM, osea, cuando termine de cargar todos los elementos HTML, esta es una buena practica que debe ser realizada siempre.

Así de sencillo aplicamos los eventos por medio de jquery. Para ver todos los eventos que puede asignar a los elementos HTML pueden ir dando clic a esta liga http://api.jquery.com/category/events.

Por ultimo aqui el código en ejecución:

Ir al Capitulo Siguiente (7.- Las funciones Show y Hide).

Ir al  Capitulo Anterior (5.- La función Each).

5.- La función each – Curso Básico de #Jquery #5

En javascript como en cualquier lenguaje de programación, tenemos estructuras de control, entre las cuales tenemos estructuras iterativas para recorrer colecciones, listas o elementos. En jquery siendo una librería para javascript tenemos su semejanza, de nombre each().

La función each(), sirve para recorrer un conjunto de elementos y a estos aplicarles alguna operación, en jquery el conjunto de elementos son los que seleccionamos con nuestro selector.

La funcionalidad de la función each() la represento en el siguiente ejemplo:

Código HTML

<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<input type="text" value="4">
<input type="text" value="5">

Código Javascript

$("input").each(function(){
    var value=$(this).attr("value")
    alert(value)
});

Podemos apreciar que se utiliza la función each() como cualquier otra función de jquery, y dentro de sus parámetros recibe una función anónima de javascript, dentro de esta función anónima selecciono el valor de mis input y lo muestro en un alert(), en este mismo bloque de código podemos ver algo que quizá nos resulte nuevo (para algunos), y es esta linea $(this), esto sirve para representar el elemento actual de la iteración, y nos regresa un objeto tipo jquery, es decir, este objeto podemos utilizar las funciones de jquery en el (como yo utilizo la función attr()), y así facilitarnos las operaciones que deseemos realizar en toda la colección seleccionada.

Ir al Capitulo Siguiente (6.- Eventos).

Ir al  Capitulo Anterior (4.- La función Css).

4.- La función CSS – Curso Básico de #Jquery #4

Una de las cosas que más deseamos en nuestros sitios web, es poder modificar los valores visuales de los elementos DOM (elementos HTML), para crear animación, o efectos que le dan más estética a nuestro sitio, y para ello necesitamos manipular las propiedades de nuestra hoja de estilo, para este tipo de cosas jquery nos ofrece la función (método) de nombre css().

Para poder utilizarla, debemos utilizar el selector sobre el o los elementos que deseamos modificar sus propiedades de estilo, seguido de esta función. Esta función se puede utilizar de distintas formas, y comenzaremos por la forma más simple, obtener un valor en específico de un atributo de estilo, y es de la siguiente manera:

Código HTML

<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px'  />

Código Jquery

alert($('#imagen').css('width'));
//obtenemos en un alert el width de nuestra imagen

En este ejemplo podemos observar en una ventana alert, el ancho de nuestra imagen, ahora veamos como manipular la imagen con el siguiente código:

Código HTML

<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px'  />

<input type="button" value="aumentar tamaño imagen" onclick="aumentaTamano();" />

Código Jquery

function aumentaTamano(){
//obtenemos el viejo tamaño de ancho y alto
tamanoWidth=$('#imagen').css('width')
tamanoHeight=$('#imagen').css('height')

//aumentamos el tamaño obtenido mas 10 pixeles
tamanoWidth=parseInt(tamanoWidth)+parseInt(10);
tamanoHeight=parseInt(tamanoHeight)+parseInt(10);

//asignamos el nuevo tamaño
$('#imagen').css('width',tamanoWidth)
$('#imagen').css('height',tamanoHeight)
}

En este código vemos como utilizar la función para asignar un nuevo valor a las propiedades, invocando la función aumentaTamano(), la cual ejecuta al presionar el botón (<input>), otorgamos un nuevo ancho y un nuevo alto y lo asignamos a través de la función css(), recibiendo esta como argumento el nombre de la propiedad de estilo y el nuevo valor, pero aun así hay una manera más fácil de hacerlo; la función css() nos permite mandar varios valores a varias propiedades de estilo, recibiendo los atributos por el formato json; para los que no sepan que es json, simplemente es un formato que se utiliza en los lenguajes de programación para enviarse mensaje entre ellos (como lo venía haciendo el formato xml), jquery aprovecha esta característica, y también puede recibir sus atributos en este formato, facilitando poder enviar todo lo que deseamos modificar en la misma línea, como podemos ver a continuación.

Nota: Por si no conocen la función parseInt() de javascript, esta función convierte el valor de la variable a entero, si yo no utilizo esta función lo que obtendríamos al utilizar el operador “+” seria una concatenación, no una suma.

Código HTML

<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px'  />

<input type="button" value="disminuye tamaño imagen" onclick="disminuyeTamano();" />

Código Jquery

function disminuyeTamano(){
//obtenemos el viejo tamaño de ancho y alto
tamanoWidth=$('#imagen').css('width')
tamanoHeight=$('#imagen').css('height')

//aumentamos el tamaño obtenido mas 10 pixeles
tamanoWidth=parseInt(tamanoWidth)-parseInt(10);
tamanoHeight=parseInt(tamanoHeight)-parseInt(10);

//aplicamos los dos cambios en la misma linea, utilizando json
$('#imagen').css({'height':tamanoHeight,
'width':tamanoWidth})

}

En lugar de invocar dos veces la función css(), mando los dos atributos en la misma función utilizando json, y dentro de esta funcion se encuentra el formato json “{‘height’:tamanoHeight,’width’:tamanoWidth}”, poniendo las llaves de abertura y cerradora “{}” y dentro de estas los atributos en comillas (o sin ellas, en el caso de los atributos no los valores), seguido de dos puntos “:” que equivalen al igual (=) y separando cada atributo por coma.

Si desean ver este código en ejecución den clic aquí.

Ir al Capitulo Siguiente (5.- La función Each).

Ir al  Capitulo Anterior (3.- Atributos).

3.- Atributos – Curso Básico de #Jquery #3

Las funciones de jquery o métodos de jquery nos sirven para realizar manipulación de los atributos de los elementos DOM (elementos HTML), animaciones, agregar eventos y muchas otras cosas; en este capítulo nos enfocaremos a las funciones que sirven para modificar los atributos de los elementos DOM.

Para poder utilizar las funciones, basta con utilizar los selectores (que vimos en el capitulo anterior), seguido de un punto y el nombre de la función, por ejemplo:

Código HTML

<input type="text" value="un valor" id="txtTexto" />

Código Jquery

var valorDeCajaDeTexto=$("#txtTexto").val();
alert(valorDeCajaDeTexto)

//Nos mostraría "un valor" en el alert

En el ejemplo anterior utilizamos la función de nombre val(), la cual nos regresa el valor que tiene un elemento DOM en su atributo value. Pero qué pasa cuando no deseamos obtener el atributo value, por ejemplo obtener la liga a la que apunta un elemento link (<a> anchor), para ello utilizamos la función de nombre prop(), la cual se puede utilizar de dos formas, tanto para obtener el valor, como para otorgar el valor, en el ejemplo siguiente vemos como obtener el valor:

Código HTML

<a id="liga" href="www.google.com">ir a una pagina</a>

Código Jquery

alert($("#liga").prop("href"))

//Nos muestra www.google.com en un alert

Y si deseamos utilizar la misma función pero para otorgar un valor es de la siguiente manera:

$("#liga").prop("href","www.hdeleon.net")
//cambia la liga del link a www.hdeleon.net

Ahora vamos a ver una función con la cual podemos obtener el contenido HTML de un elemento, es decir, el contenido que contiene dentro de él (claro que no aplica con elementos input o elementos imágenes (<img>)  por el hecho que no tienen elementos HTML dentro), vamos a utilizar la función html(), igual que prop() esta función sirve para obtener y asignar un valor, solo que esta sirve para el contenido HTML, (tal como lo hace innerHTML de javascript); a continuación veamos un ejemplo:

Código HTML

<div id="contenido">
<ul>
<li>un elemento</li>
<li>un elemento</li>
<li>un elemento</li>
<li>un elemento</li>
<li>un elemento</li>
</ul>
</div>

Código Jquery

obtenemosHTML=$("#contenido").html();
alert(obtenemosHTML)

//El alert muestra el contenido del div con el id "contenido"

Por último, gracias a los selectores de jquery, podemos realizar una función a varios elementos, supongamos que deseamos poner un value a todos los inputs de nuestra pagina, simplemente lo haríamos de la siguiente manera.

Código HTML

<input type="text" value="un valor" id="txtTexto" />
<input type="text" value="un valor" id="txtTexto2" />
<input type="text" value="un valor" id="txtTexto3" />
<input type="text" value="un valor" id="txtTexto4" />

Código Jquery

$("input").prop("value","valor a todos los input")

En este capítulo vimos algunas de las funciones de jquery para manipular los atributos de los elementos DOM; existen algunas otras funciones que pueden ver en la siguiente liga y sin duda después de leer este capítulo, no tendrán ninguna dificultad en entender su funcionamiento.

Ir al Capitulo Siguiente (4.- La función Css).

Ir al  Capitulo Anterior (2.- Selectores).

2.- Selectores – Curso Básico de #Jquery #2

Los selectores en jquery son la herramienta que utilizaremos para seleccionar los elementos HTML a los cuales deseamos obtener o asignar alguna funcionalidad.

Para todos aquellos que ya saben utiliza CSS y como se le asigna un estilo a los elementos, ese tipo de selector es el mismo que se utiliza en jquery, pero para aquellos que no saben CSS, explicare brevemente como seleccionar elementos.

Para seleccionar los elementos de nuestra página HTML, podemos seleccionarlo ya sea por el nombre del tag (<input>, <table>, <a>, etc), la clase  (clase CSS) de los elementos, o por su id (atributo HTML), y basta con hacerlo de la siguiente manera:

//seleccionamos los inputs
inputs=$("input");

//seleccionamos los elementos de clase azul
claseAzul=$(".azul");

//seleccionamos el elemento de id idElemento
idElemento= $("#idElemento")

La primera línea selecciona todos los elementos tipo input(<input>) de nuestra página.

La  segunda línea selecciona todos los elementos que contienen la clase azul (clase CSS).

La tercer línea selecciona el elemento el cual tiene un id de nombre “idElemento”. Esta manera de utilizar el selector solo sirve para seleccionar un elemento, ya que por estándar solo debemos utilizar un id único y no puede repetirse en otro elemento.

De esta manera se utilizan los selectores y lo que sigue a esto es aplicar todas las funciones de jquery, que veremos en los siguientes capítulos.

Si deseas más información sobre selectores, visita mi artículo que escribí hace un tiempo de nombre: tutorial básico de selectores de jquery.

Ir al Capitulo Siguiente (3.- Atributos).

Ir al  Capitulo Anterior (1.- Introducción e Instalación de Jquery).

1.- Introducción e Instalación de Jquery. – Curso Básico de #Jquery #1

Para comenzar este tutorial, si no sabes nada de javascript te recomiendo te pases por el curso básico de javascript que realice, esto servirá para que puedas comprender mejor todo lo que veremos en este curso.

Introducción

Hablar de jquery hoy en día es hablar de ajax, pero más allá de la funcionalidad que tiene para las peticiones ajax, existe otro fin con el cual trabaja esta grandiosa librería y es la manipulación de elementos DOM. La manipulación de dichos objetos viene desde realizar sus funcionalidades por medio de eventos hasta realizar animaciones y efectos para hacer que nuestras páginas tengan estética y elegancia.

Jquery es la librería de javascript mas utilizada en el mundo (si no me creen den clic aquí), fue hecha por  John Resig y presentada el año 2006, y siendo la librería más utilizada, hay mucho material afuera con el cual se pueden abastecer para realizar cosas, entonces ¿por que nace este curso?, la mayoría del material es para personas que ya tienen nociones de programación avanzadas, o el material se encuentra en ingles, es por ello que realizo este curso básico, pensado en todas esas personas con el deseo de aprender y no tengan el conocimiento en ingles suficiente.

Instalación

Comenzaremos con la instalación de jquery, y para ello seguiremos los pasos siguientes:

  1. Entraremos a la página oficial de jquery dando clic al siguiente enlace www.jquery.com
  2. Descargamos la versión actual de Jquery, es fácil encontrar el botón de descarga, siempre es gigante y esta visible. Basta con dar clic y seleccionar una versión de la librería, ya sea comprimida o ya sea descomprimida, recomiendo descarga la comprimida (compressed), ya que pesa menos. Puede pasar que al dar clic en lugar de descargarse se abra en su navegador y se vea el código como tal, en tal caso lo copean y lo pegan en notepad y lo guardan con extensión de javascript (jquery.js)
  3. Una vez descargada la librería (que es un archivo con extensión js) la pueden pegar en el proyecto que la utilizaran en el lugar que deseen, para hacer una prueba a continuación yo recomiendo que antes creen un archivo con extensión html (miarchivo.html) y en la misma carpeta copien jquery, para que así puedan hacer una prueba (claro si es la primer vez que descargan jquery).
  4. Ahora solo basta con realizar la referencia a dicha librería desde su archivo con extensión html de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- asi hacemos referencia a jquery siempre y cuando se encuentre en la misma ubicación que este archivo -->
<script src="jquery.js"></script>

</head>

<body>
</body>
</html>

Y así de fácil se instala jquery, ahora ya podemos hacer uso de su funcionalidad, cabe resaltar que debe tener la referencia en todas las paginas en la cual necesitemos de él, así que deben agregar la referencia en todas para así poder utilizarlo. Para verificar que lo instalamos bien podemos copiar el siguiente código y correrlo en un navegador:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- asi hacemos referencia a jquery siempre y cuando se encuentre en la misma ubicación que este archivo -->
<script src="jquery.js"></script>

</head>

<body>

<!-- un div para poder usar jquery y ver su contenido -->
<div>Un contenido bien bonito en este div</div>

</body>
</html>

<script>
//codigo de jquery para verificar que este instalado bien

alert($("div").html())
</script>

Si nos muestra en una ventana alert() el mensaje “Un contenido bien bonito en este div“, jquery se instalo con éxito. Por el momento no importa que no entendamos lo que está dentro de la función alert(), en los siguientes capítulos explicare con detalle de que trata esa sintaxis.

Ir Capítulo Siguiente (2.- Selectores)