lunes, 27 de agosto de 2012

Que es JQuery ?


Que es JQuery ?
Por: Diógenes Amaury MS

JQuery es una biblioteca de JavaScript,o mejor dicho un FrameWork de javaScript, rápida y concisa que simplifica el recorrido documento HTML, manejo de eventos, animación, y las interacciones Ajax para el desarrollo web rápido.

Una de las ventajas de JQuery es su sencillez y su reducido tamaño.
Una gran parte del atractivo de jQuery es que le permite una elegante y eficiente forma de encontrar y manipular los elementos HTML con líneas mínimas de código. jQuery soporta esta vía un buen "selector" API que permite a los desarrolladores  consultar los elementos HTML, y luego aplicar comandos para ellos. Una de las características de los comandos de jQuery es que pueden ser encadenado juntos,  de modo que el resultado de un comando puede alimentar a otro. jQuery también incluye un conjunto integrado de animación API que pueden utilizarse como comandos.
JQuery  es open source, esto nos permite  descargar sus librerías, modificarlas o personalizarlas de acuerdo a nuestras necesidades.
Hoy  les presento un ejemplo, simulando un datepicker para los programadores que vienen de Microsoft, saben a que me refiero, para los que nos, se trata de un calendario que permite seleccionar una fecha y pasarla a un objeto, en nuestro ejemplo la pasaremos a un textbox.
A continuación les presento el ejemplo que pueden copiar  y pegar en blog de notas y probarlo en su hogar
Nota: pueden darle el nombre de ejemplo.html , y en la casilla salvar como ti seleccionar todos los archivos, de lo contrario se guarda como un texto y el navegador no lo puede interpretar.

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Uso de DatePiker Por Diógenes Martínez</title>
  <link type="text/css"rel="stylesheet"
     href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" />  
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
      $(document).ready(function() {
          $('#txtFechaSimple').datepicker();
      });
  </script>
</head>

<body>
  <form id="form1" runat="server">
    <div>
   <label id ="Fecha">Fecha</label>
   <input id="txtFechaSimple" type="text" />
</div>
  </form>
</body>
</html>


Explicación del código.
Primero es hacer referencia a las bibliotecas de estilos y de Jquery que necesitamos para el ejemplo anterior, en este caso esto haciendo link de la página oficial, pero  es recomendable bajar estos archivos para tenerlo físicamente y en caso de que el servidor dejara de funcionar no afecte nuestra aplicación.
  <link type="text/css"rel="stylesheet"
     href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" />  
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Segundo
Escribimos la función que mostrar el calendario cuando nos enfoquemos en el objeto.

  <script type="text/javascript">
      $(document).ready(function() {
          $('#txtFechaSimple').datepicker();
      });
  </script>

Tercero
Escribimos el cuerpo del document html.
</head>
<body>
  <form id="form1" runat="server">
    <div>
   <label id ="Fecha">Fecha</label>
   <input id="txtFechaSimple" type="text" />
</div>
  </form>
</body>
</html>


No hay comentarios:

Publicar un comentario