Traducción de Primeros pasos con jQuery
Este tutorial es una introducción a la biblioteca jQuery. Usted necesita conocimientos básicos de JavaScript y Document Object Model (DOM). Vamos a empezar desde el principio y explicar los detalles cuando sea necesario. Cubren un simple hola ejemplo del mundo, la selección y las bases de eventos, AJAX, FX, y la producción y el uso de plugins.
El tutorial no tiene ", haga clic aquÃ" para ver el funcionalides. La intención es que copia el código y probarlo usted mismo. Copiar, ver lo que hace, y modificar.
Para empezar, necesitamos una copia de la biblioteca jQuery, disponible en el sitio oficial . El Starterkit jQuery viene con algo de código CSS y para facilitar. Después de tirar y extraer el archivo seleccionado, coloque el archivo jquery.js el mismo directorio, y basta con abrir el correo custom.js starterkit.html en tu editor favorito, y starterkit.html con el navegador.
Tenemos todo para empezar con el ejemplo infame "Hello World".
Comenzamos con una página HTML esqueleto:
Esto sólo carga la página de la biblioteca jquery.js esqueleto (asegúrese de que la dirección, la parte interior de los puntos de atributo src de la copia local del archivo jquery.js! En este ejemplo vamos a suponer que está en el mismo directorio para esta página muestra). Ambos comentarios indicar dónde vamos a añadir nuevo código.
Como casi todo hecho con jQuery lee o manipula el modelo de objetos de documento (DOM), debemos estar seguros de que estamos agregando eventos (u otras acciones) para que el DOM está listo.
Para ello, se registró un caso en el documento preparado:
Sólo hay que poner un alert () función que no tiene mucho sentido, ya que el alert () no requiere cargar el DOM. Asà que vamos a intentar algo más sofisticado: Alerta de llamada () cuando se hace clic en un enlace.
Agregue lo siguiente en <body>:
Ahora modificar el $ (document). Ready:
Y por lo que deberÃa ver la alerta para que al hacer clic en el enlace.
Vamos a ver lo que estamos haciendo mejor: $ ("a") es un selector de jQuery, en cuyo caso, se selecciona todos los elementos. $ Es un alias para la función de jQuery, entonces $ () construye un nuevo objeto jQuery. haga clic en la función () llame a continuación, es un método del objeto jQuery. Mete un evento click a todos los elementos seleccionados (en el caso de nuestro ejemplo, un solo enlace / link) y realiza la función especificada cuando se produce el evento.
Todo esto es similar al código siguiente:
Pero nuestro camino, no necesitamos escribir onclick () para cada elemento. Nosotros estructura separada (HTML) el comportamiento (JS), asà como la estructura y la presentación por separado usando CSS.
Dicho esto, vamos a explorar más selectores y eventos.
jQuery nos ofrece dos formas de seleccionar elementos. El primero utiliza una combinación de selectores CSS y XPath pasa como texto al constructor de jQuery (por ejemplo: $ ("div> ul un")). El segundo enfoque utiliza diversos métodos del objeto jQuery. Y las dos maneras se pueden mezclar.
Para experimentar con algunos de estos selectores, que elegir y modificar la primera lista ordenada de Starterkit.
Para empezar, seleccione la lista en sÃ. La lista tiene el id "orderedlist. En puro JavaScript, puede seleccionar con document.getElementById ("orderedlist). Con jQuery, lo hacemos:
El Starterkit viene con una hoja de estilo (CSS) con una clase llamada "rojo", que sólo tiene que especificar un color de fondo rojo. Asà que cuando usted vuelva a cargar la página en el navegador, deberÃa ver la primera lista con un fondo de color rojo. Y la segunda lista, con modificaciones.
Ahora vamos a añadir algunos más clases a los elementos secundarios de esta lista:
El código anterior selecciona el elemento li niños todos con id orderedlist ellos y agrega la clase "azul".
Ahora algo un poco más sofisticado. Queremos agregar y quitar a la clase cuando el usuario se desplaza sobre el elemento li, pero sólo el último elemento de la lista.
Para cada onXYZ evento como onclick, onchange, onsubmit existe un equivalente de jQuery. Algunos otros elementos tales como preparados y revolotean, están disponibles como métodos convenientes para determinadas tareas.
Con estos selectores y eventos que ya se pueden hacer muchas cosas, pero hay más.
El método find () le permite buscar en los descendientes del elemento ya está seleccionado, entonces $ ("# orderedlist). Find (" LI ") es similar a $ (" # li orderedlist ").
El método de cada iteración () a través de cada elemento y permitir su posterior procesamiento. Muy métodos como addClass (), utilizando cada uno () ellos mismos.
En el ejemplo anterior, append () utiliza para concatenar texto en el elemento.
Otra de las tareas comúnmente encontrado es para llamar a métodos en los elementos DOM que no existen en jQuery. Imagine una forma que le gustarÃa que lo presentara de nuevo después de éxito a través de AJAX.
El código anterior selecciona el elemento del formulario primero y luego llama a reset () él. Si usted tiene más de un formulario en la página, también puedes hacer lo siguiente:
El ejemplo anterior selecciona todas las formas en el documento, reitera ellos y llamar a reset () para cada uno. Tenga en cuenta que dentro de cada una) función (, esto se refiere al elemento actual. También tenga en cuenta lo siguiente, desde el restablecimiento del function () pertenece al elemento de forma y no al objeto jQuery, simplemente no puede llamar a $ ("forma"). Restablecer () para reanudar todas las formas de la página.
Un desafÃo común es seleccionar sólo los componentes de un grupo de similares o idénticos. jQuery tiene filtro métodos () y no () para ello. Si bien el filtro () reduce la selección de elementos a los que se encuentran en la expresión de filtro utilizado, y no () hace lo contrario y elimina todos los elementos encontrados en la expresión. Imagine una lista desordenada en la que desea seleccionar todos los elementos li que no tienen hijos ul.
Este código selecciona todos los elementos li, eliminar a aquellos que tienen hijos ul, y aplicar un borde negro en ellos.
El] [expresión se deriva de la sintaxis XPath y se puede utilizar para filtrar por atributos. Es posible que desee seleccionar todos los vÃnculos que tienen el nombre del atributo:
Probablemente más común para seleccionar los enlaces por su nombre, los vÃnculos que desea seleccionar el atributo "href" ellos. Esto puede ser un problema, ya que los navegadores tratar lo que es incompatible "href" cada uno a su manera. Para seleccionar parte de un valor, podemos utilizar el selector contiene "*=" en lugar de igualdad "=":
Hasta ahora, todos los selectores se utilizaron para seleccionar a los niños o filtrar la opción actual. Hay situaciones en las que tiene que elegir los elementos siguientes o anteriores, conocidos como hermanos. Imagine una página de preguntas frecuentes cuando las cuestiones son inicialmente oculta, sino que se presentan cuando la pregunta se hace clic. El código de jQuery para esto es:
Aquà usamos la cascada para reducir el tamaño del código y mejorar el rendimiento, ya que '# faq' esté seleccionada una sola vez. Cuando se utiliza end (), el primer find () está roto, podemos mirar a otro find () sobre el elemento # faq lugar de los hijos de los DD.
Dentro de un click (), usamos $ (este). Siguiente () para encontrar el siguiente hermano de la actual dt. Esto nos permite seleccionar rápidamente la siguiente respuesta a la cuestión de hacer clic.
Además de los hermanos, también puede seleccionar los padres elementos. Tal vez usted quiere poner de relieve el párrafo vÃnculo de los padres de que el usuario pasa el ratón por encima. Pruebe lo siguiente:
Vamos a retroceder un paso antes de continuar: jQuery se enfoca en hacer el código más pequeño y por lo tanto más fáciles de leer y mantener. La siguiente lÃnea es una abreviatura de $ (document). Ready (de devolución de llamada):
Aplicando el ejemplo Hello World, tenemos esto:
Cubierto lo básico, vamos a explorar otros aspectos, comenzando con AJAX.
En esta parte se escribe una pequeña aplicación Ajax, para hacer notas sobre algo, como se hace con los videos en youtube.com.
No queremos que este ejemplo funcione sin Ajax, aunque es posible, entonces generamos el código y el texto con jQuery para concatenar en un div con id "de calificación.
Este fragmento de código genera los cinco elementos y concatenar ellos en el elemento con id "de calificación. Entonces, para cada eslabón de la div, también fue director, se añade. Cuando se hace clic en el enlace, una solicitud POST se envÃa a exemplo.php con el contenido de la relación como un parámetro. Los resultados devueltos como XML se agrega a la div, en sustitución de los enlaces.
Uno de los problemas encontrados con frecuencia cuando el contenido de carga a través de Ajax es el siguiente: Mediante la adición de controladores de eventos en ese documento también deberÃa ser emprendido en el contenido, usted debe aplicar después de cargar el contenido. Para evitar la duplicación de código, puede delegar a una función. Ejemplo:
Ahora addClickHandlers se llama sólo una vez cuando el DOM está listo y cada vez que el usuario hace clic en un vÃnculo con la clase a distancia y el contenido ha terminado de cargar.
La atención a los $ ("a.remote", este), se pasa como un contexto: En el caso de que el documento listo, esto se refiere al documento, y por lo tanto la demanda de todo el documento para los vÃnculos a la clase a distancia. Cuando addClickHandlers se utiliza como una devolución de llamada a load (), esto se refiere a un elemento diferente: En nuestro ejemplo, el elemento con id "objetivo". Esto evita que el evento de clic se aplica varias veces para los mismos enlaces.
Otro problema común con las devoluciones de llamada son parámetros. Se especifica su devolución de llamada, sino que debe pasar un parámetro adicional. La forma más sencilla de hacerlo es poner dentro de otra función de devolución de llamada:
Ahora que hemos visto un poco de Ajax, vamos a añadir algunos efectos simples y animaciones a la página.
animaciones simples se hacen con show () de jQuery y ocultar ():
[JavaScipt] $ (document). Ready (función () (
$ ("A"). Activar (función () (
$ (". Stuff".) Ocultar ('lento');
), Función () (
$ (". Stuff"). Mostrar ('rápido');
));
});[/] JavaScipt
Usted puede crear cualquier combinación de animaciones para animar (), por ejemplo, la diapositiva con la opacidad:
$ (Document). Ready (función () (
$ ("A"). Activar (función () (
$ (". Stuff"). Animar ((altura: 'hide', la opacidad: 'ocultar'), 'lento');
), Función () (
mostrar $ (". Stuff"). Animar ((altura: ", la opacidad: 'show'), 'lento');
));
));
Muchos otros efectos legales se pueden hacer con una colección de plugins interfaz . Aunque la interfaz de estar en la cima de la lista de plugins para jQuery, hay muchos otros. La siguiente parte utiliza el plugin tablesorter .
El plug-in permite tablesorter tablas tipo directamente en el navegador. ¿Incluye la biblioteca jQuery y el archivo del plugin, simplemente decir lo que las tablas que desea ordenar.
Por ejemplo, este trabajo tiene que tirar del enchufe tablesorter y añadir la siguiente lÃnea en starterkit.html (por debajo del cual incluye el jQuery):
Después de añadir el plug-in, usted puede llamar asÃ:
Intenta hacer clic en los encabezados de tabla del archivo de ejemplo y ver cómo se ordena hacia arriba y hacia abajo en la primera posición en la segunda.
Una tabla puede tener filas de relieve, y podemos hacer esto pasando algunas opciones:
La mayorÃa de plugins se puede utilizar también. Incluya el archivo de plugins y llamar a sus métodos en algunos elementos, pasando configuraciones adicionales de personalización.
Una lista actualizada de los plugins se puede encontrar en jQuery Plugin .
Cuando está utilizando jQuery con frecuencia, puede ser útil para envolver el código como un plugin, o para su reutilización usted o su empresa, o para compartir con la comunidad. El siguiente capÃtulo da algunos consejos sobre cómo estructurar un plugin.
Escriba su propio plugin para jQuery es muy fácil. Y yo respondo a las siguientes reglas, que sea más fácil para otras personas para integrar su plugin.
Buscar un nombre para él, vamos a llamar al nuestro "foobar". Crear un archivo llamado jquery.nomedoplugin.js, por ejemplo, jquery.foobar.js
Crear uno o más métodos de plugins ampliar el objeto jQuery, por ejemplo,
Que estará disponible la siguiente orden:
Crear valores predeterminados que pueden ser modificados por los usuarios, por ejemplo:
Usted puede llamar el plugin sin opciones, utilizando las normas:
O con algunas opciones:
Si usted proporciona su plug-in, puede dar algunos ejemplos y documentación. Hay varios plugins disponibles que puede utilizar como referencia.
Conocimientos básicos para escribir plugins que es. Vamos a escribir nuestro único.
Muchas personas, para manejar formularios con jQuery, signo de interrogación y anular la selección de botones de opción o casillas de verificación. El código es el siguiente:
Como un plugin es directa:
Y ahora se puede utilizar:
También puede escribir plugins para desactivar () y inverterCheck (). Pero en vez vamos a ampliar nuestros plugins para aceptar algunas de las opciones.
Teniendo en cuenta una opción estándar, el usuario puede omitir la opción o pasar a otro: "en la" u "off" y "cambiar", ej.:
Con más de una opción opcional, de esta manera se complica porque el usuario tendrÃa que pasar valores nulos en la que se quiere omitir.
El uso de tablesorter anteriormente demuestra la aplicación de un objeto de resolver este problema. Puede omitir todos los parámetros o pasar un objeto con la clave / valor para cada configuración a sobrescribir.
Como ejercicio, puede intentar volver a escribir el código como plugin nota anterior. El esqueleto del código serÃa el resultado: