Las posibilidades del Javascript fácil con JQuery
jQuery es un una biblioteca o framework de Javascript que permite manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.
Martes, 17 Febrero 2009 | por Luis A. Serrano | Categoría: Herramientas
jQuery es un una biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.
JQueryW ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código (menús animados, pestañas, calendarios, slideShows, efectos de imagen, transiciones, etc). Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.
jQuery consiste en un único archivo JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y funciones AJAX, las cuales pueden ser incluidas dentro de cualquier página web usando la siguiente instrucción:
<script type="text/javascript" src="path/to/jQuery.js"></script>
La gran ventaja de jQuery es que permite cambiar el contenido de nuestra página web sin necesidad de recargarla, utilizando DOM y AJAX de manera extremadamente sencilla gracias a su sintaxis. La forma básica de una sentencia es la siguiente:
$(elemento).evento(funcion-o-parametro);
donde elemento puede ser una etiqueta (tag) del lenguaje HTML, por ejemplo un identificador (que se define con un id=”xxx”) o un atributo CSS. La manera de diferenciarlos es la siguiente:
$(elemento) para etiquetas html $(#elemento) para identificadores (id="") de etiquetas html $(.elemento) para atributos CSS.
Por ejemplo, para que nuestra página web cambie el texto que se encuentra dentro de todos sus párrafos “p” pondríamos:
$("p").html("nuevo texto");
Si quisiéramos que sólo cambiase el texto de un párrafo concreto deberíamos darle una identificación a dicha etiqueta:
<p id="miparrafo">Este es un texto de prueba </p>
La instrucción jQuery sería:
$("#miparrafo").html("nuevo texto");
También se puede cargar el contenido o resultado de una página .htm o .php con una sola línea de código:
$("#miparrafo").load("pagina.php");
La manera de inicializar jQuery es muy útil:
$(document).ready(function(){ //tu codigo aqui !! });
Ejemplo de utilización de jQuery en una página web:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Prueba de jQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function (){ //Aqui asignamos el click al elemento <a> $("a").click(function (){ alert("Presionaste un <a>"); }); }); </script> </head> <body> <a href="#"> Presioname! </a> </body> </html>
- Un buen tutorial para empezar con JQuery puedes verlo aquí.
- Más de 50 ejemplos elaborados con JQuery.
- Tutoriales para mejorar menús de sitios Web.
También puede interesarte ...
Subir imágenes optimizadas a una Web o a nuestra Tienda Virtual es una tarea que deberemos t ...
Siempre apostamos por facilitar el trabajo a los spiders y en este ejercicio vamos a intentar or ...
No se trata de una herramienta SEO al uso pero es especialmente útil para diseñadores Web que de ...
Y es que la Dirección General de Tráfico pone al servicio de los ciudadanos una Tienda Virtual p ...
Para algunos diseñadores, sobre todo los que se dedican a trabajar en proyectos Web para la Admi ...
