Jquery - elapache.com.ar

http://www.jquery.com

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.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación utilizado principalmente para crear páginas web dinámicas. Es un lenguaje interpretado directamente por el navegador que visualiza las páginas web sin necesidad de procesos intermedios de compilación.

<!-- en el heaqd agregamos esta etiqueta--> <script type="text/javascript"> alert("Hola Mundo!"); </script>

JQuery 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 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:

El objeto jQuery() $()

El núcleo de jQuery, la función jQuery()

Todas las instrucciones jQuery empiezan con la llamada a esta función ya que es la puerta de entrada al framework jQuery.
Esto es así para evitar que los nombres de las funciones entren en conflicto con otras funciones de otras bibliotecas enlazadas en nuestro proyecto. .

Casi toda la funcionalidad de jQuery está contenida en un objeto llamado también jQuery. Este objeto tiene un alias que es el símbolo $()
Como el símbolo $() es el estandar de este framework. Veamos la estructura de una típica sentencia jQuery:

Esta función es la encargada de buscar y seleccionar los elementos del DOM que coinciden con el selector pasado como parámetro

<script type="text/javascript"> $("selector").acción(parámetros); </script>

<script type="text/javascript"> $(“selector”); // selecciona, a partir del selector indicado, el conjunto del DOM identificado sobre el cual aplicamos la acción, pero el valor de retorno no es directamente un array de objetos, sino que es el propio objeto $ conteniendo los objetos en su interior. </script>

Cuando ejecutamos un método sobre el objeto $ que contiene los elementos que seleccionamos, este aplica dicha acción a cada uno de los objetos recuperados. Un ejemplo concreto:

<script type="text/javascript"> $(elemento).evento(funcion-o-parametro); </script>

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:

<script type="text/javascript"> $(etiqueta); // para etiquetas html </script>

<script type="text/javascript"> $(#elemento); //para identificadores (id="") de etiquetas html </script>

<script type="text/javascript"> $(.elemento); //para atributos CSS. </script>

Por ejemplo, para que nuestra página web cambie el texto que se encuentra dentro de todos sus párrafos “p” pondríamos:

<script type="text/javascript"> $("p").html("nuevo texto"); </script>

Si quisiéramos que sólo cambiase el texto de un párrafo concreto deberíamos darle una identificación a dicha etiqueta:

La instrucción jQuery sería:

<p id="miparrafo">Este es un texto de prueba </p> <script type="text/javascript"> $("#miparrafo").html("nuevo texto"); </script>

También se puede cargar el contenido o resultado de una página .htm o .php con una sola línea de código:

<script type="text/javascript"> $("#miparrafo").load("pagina.txt"); // .txt ,.html , .php, .etc </script>

La manera de inicializar jQuery es muy útil:

<script type="text/javascript"> $(document).ready(function(){ //tu codigo aqui !! }); </script>

Ejemplos:

jquery easy slider

Slider

Load Imagen

Panel desplegable

http://www.jquery.com