Tag Archives: JavaScript

getElementById, getElementsByTagName, getElementsByClassName en jQuery

8 oct

Una de las grandes ventajas que tenemos en jQuery es la facilidad en seleccionar un elemento, obtener sus atributos, modificar sus atributos, modificar su contenido, etc.

En JavaScript teníamos que hacerlo así:

<script type="text/javascript">

// Seleccionamos el div con id "capa"
document.getElementById("capa");

// Seleccionamos todos los div
document.getElementsByTagName("div");

// Seleccionamos todos los div con la clase "capa"
document.getElementsByClassName("capa");

</script>

Con la llegada de jQuery se simplifica muchísimo, lo podemos hacer así:

<script type="text/javascript">
$(document).ready(function(){

// Seleccionamos el div con id "capa"
$("#capa");

// Seleccionamos todos los div
$("div");

// Seleccionamos todos los div con la clase "capa"
$(".capa");

});
</script>

Una vez que ya sabemos como seleccionar un elemento y administrarlo, vamos a hacer alguna prueba muy simple:

<script type="text/javascript">
$(document).ready(function(){

// Mostramos en un alert el contenido de la capa con id "capa"
alert($("#capa").html());

// Cambiamos el contenido de la capa con clase "capa"
$(".capa").html("Probando, probando..");

});
</script>

Comenzamos con jQuery y con Actualidad jQuery

7 oct

Para quien no conozca todavía jQuery, es una librería JavaScript muy rápida y ligera para simplificar el desarrollo de páginas web. En cuanto a la compatibilidad con los distintos navegadores no existe ningún problema, funciona correctamente con (Internet Explorer 6, 7, 8, Firefox, Opera, Safari, Chrome).

¿Qué podemos hacer con jQuery? Realmente la pregunta sería, ¿Qué no podemos hacer con jQuery? Personalmente destacaría la facilidad con la que podemos animar una página web, sin utilizar Flash. También habría que destacar la facilidad con la que podemos hacer páginas web dinámicas interactivas, contenidos actualizables sin tener que recargar la página.

Bueno vamos a dejarnos de rollos, y comenzaremos por lo básico y más simple. Para empezar a trabajar con jQuery deberíamos bajarnos la librería desde su página web. Nos encontraremos con 2 versiones, la (Minified version) y la (Source version). Ambas funcionan igual, la versión Minified es bastante más ligera, y sino tenemos intención de modificar el código fuente original de jQuery, la mejor opción será bajar esta versión.

A día de hoy tendríamos disponible la versión 1.4.2 Comenzamos incluyendo jQuery con una etiqueta <script> dentro del <head></head> de nuestro sitio web.

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

Una vez hecho esto, vamos a probar que hemos cargado la librería correctamente. Antiguamente cuando queríamos ejecutar un Script al cargar la página (onload) utilizabamos esto:

<script type="text/javascript">
window.onload = function() { alert("Probando, probando..."); }
</script>

Y ahora en jQuery lo haríamos así:

<script type="text/javascript">
$(document).ready(function(){
alert("Probando, probando...");
});
</script>

Si nos sale el alert diciendo "Probando, probando…" es que habremos cargado correctamente jQuery. Ya tendríamos nuestra librería cargada y lista para trabajar con ella.