Java

Jquery : Nuestra Primera Página Con jQuery

<div class="glpost"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsj_vCuJPuUfortx9zZkPH5ZBhrpgwj1_nl7BV_I3brCbs67wVBAAQECiNg-R7CqAB_zErw6KTxuAhuspe2nN_Ki2Di0EDYGFerqKqUz7tvNSIRKJw304_0ESuo59aKveTvzY1DkETuM/s1600/admin-parallax_slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsj_vCuJPuUfortx9zZkPH5ZBhrpgwj1_nl7BV_I3brCbs67wVBAAQECiNg-R7CqAB_zErw6KTxuAhuspe2nN_Ki2Di0EDYGFerqKqUz7tvNSIRKJw304_0ESuo59aKveTvzY1DkETuM/s640/admin-parallax_slider.jpg" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="MsoNormal"><span class="" id="result_box" lang="es"><span class="">Ahora que hemos cubierto la gama de funciones disponibles para nosotros con jQuery, podemos examinar cómo poner la biblioteca en acción. Para empezar, necesitamos una copia de jQuery.</span></span><br /><h2 style="text-align: center;"><span class="" id="result_box" lang="es"><span class=""><i><b>Descargando jQuery</b></i> </span></span></h2><span class="" id="result_box" lang="es"><span class="">No se requiere instalación. Para usar jQuery, solo necesitamos una copia pública del archivo, si esa copia está en un sitio externo o el nuestro. Como JavaScript es un lenguaje interpretado, no hay ninguna compilación o fase de construcción para la cual preocuparse. Siempre que necesitamos una página para tener jQuery disponible, simplemente nos referiremos a la ubicación del archivo desde un elemento <i><script></i> en el documento HTML.</span></span><br /><span class="" id="result_box" lang="es"><span class="">El sitio oficial de jQuery (<a href="http://jquery.com/">http://jquery.com/</a>) siempre tiene la versión más actualizada y estable de la biblioteca, que se puede descargar directamente desde la página principal del sitio. Varias versiones de jQuery pueden estar disponibles en cualquier momento; la versión más apropiada para nosotros como desarrolladores de sitios será la última versión sin comprimir de la biblioteca. Esta puede ser reemplazada por una versión comprimida en entornos de producción.</span></span><br /><span class="" id="result_box" lang="es"><span class="">Como la popularidad de jQuery ha crecido, las empresas han vuelto al archivo libremente disponible a través de sus redes de distribución de contenido (CDN). </span></span><br /><span class="" id="result_box" lang="es"><span class="">Lo más notable es que Google (<a href="http://code.google.com/apis/ajaxlibs/documentation/">http://code.google.com/apis/ajaxlibs/documentation/</a>) y Microsoft (<a href="http://www.asp.net/ajax/cdn">http://www.asp.net/ajax/cdn</a>) ofrecen el archivo en poderosos servidores de baja latencia distribuidos en todo el mundo para una descarga rápida independientemente de la ubicación del usuario. <br />Mientras que una copia CDNhosted de jQuery tiene ventajas de velocidad debido a la distribución del servidor y el almacenamiento en caché, el uso de una copia local  puede ser conveniente durante el desarrollo. A lo largo de este libro usaremos una copia del archivo almacenado en nuestro propio sistema, que nos permitirá ejecutar nuestro código, ya sea que esté conectado a Internet o no. </span></span><br /><h2 style="text-align: center;"><span class="" id="result_box" lang="es"><span class=""><span style="font-size: large;"><i><b>Configurando jQuery En Un Documento HTML</b></i></span> </span></span></h2><span class="" id="result_box" lang="es"><span class="">Hay tres piezas para la mayoría de los ejemplos de uso de jQuery: el documento HTML, archivos de estilo CSS y archivos JavaScript para actuar en él. Para nuestro primer ejemplo, utilizaremos una página con un extracto de uno de nuestro artículos que tiene varias clases aplicadas a partes de la misma. Esta página incluye una referencia a la última versión de la librería jQuery, que hemos descargado, renombrada jquery.js, y esta ubicada en nuestro directorio de proyectos local, de la siguiente manera:</span></span><br /><br /><span class="" id="result_box" lang="es"><span class="">ara mantener la amplia gama de características descritas anteriormente mientras se mantiene relativamente compacto, jQuery emplea varias estrategias:</span></span><br /><ul><li><i>Aprovechando el conocimiento de CSS</i>: basando el mecanismo para localizar elementos de página en los selectores CSS, jQuery hereda una forma concisa y legible de expresar la estructura de un documento. La biblioteca jQuery se convierte en un punto de entrada <br />para los diseñadores que quieren añadir comportamientos a sus páginas, ya que un requisito previo para hacer el desarrollo web profesional es tener conocimiento de la sintaxis CSS.</li></ul> <br /><ul><li><span class="" id="result_box" lang="es"><span class=""><i>Con las Extensiones de soporte: </i>Para evitar el deslizamiento de las funciones, jQuery relega los usos de <i>specialcase</i> a los complementos. El método para crear nuevos complementos es simple y bien documentado, lo que ha impulsado al desarrollo de una amplia variedad de módulos inventivos y útiles. La mayoría de las características de la descarga básica de jQuery se realizan internamente a través de la arquitectura del complemento, y se pueden quitar si se desea, <br />produciendo una biblioteca aún más enfocada a lo que se quiere si se desea.</span></span></li></ul> <br /><ul><li><i>Abstracción de las peculiaridades del navegador: </i>Una desafortunada realidad en el desarrollo web es que cada navegador tiene su propio conjunto de desviaciones de estándares publicados. Una porción significativa de cualquier aplicación web puede ser relegada para manejar características de forma diferente en cada plataforma. Mientras que el panorama del navegador  en constante evolución hace que una base de código completamente neutral para el navegador sea imposible para algunas características avanzadas, jQuery agrega una capa de abstracción que normaliza las tareas comunes, reduciendo el tamaño del código mientras que lo simplifica enormemente.</li></ul><ul><li><i>Siempre trabaja con sets: </i>Cuando instruimos a jQuery, a "Buscar todos los elementos con la clase plegable y ocultarlos", no hay necesidad de recorrer cada elemento devuelto. En su lugar, métodos como .hide () están diseñados para trabajar automáticamente en conjuntos de objetos en lugar de los individuales. Esta técnica, llamada iteración implícita, significa que muchas construcciones de bucle se vuelven innecesarias, reduciendo considerablemente el código.</li></ul> <br /><ul><li>Permitir múltiples acciones en una línea: Para evitar el uso excesivo de variables temporales o la repetición inútil, jQuery emplea un patrón de programación llamado encadenamiento <br />para la mayoría de sus métodos. Esto significa que el resultado de la mayoría de las operaciones en un objeto es el propio objeto, listo para la siguiente acción que se le aplicará.</li></ul>Estas estrategias han mantenido el paquete jQuery bastante leve (aproximadamente 30 KB comprimido), mientras que al mismo tiempo proporcionando técnicas para mantener nuestro código personalizado utilizando una biblioteca compacta. </div><div class="MsoNormal">La elegancia de la biblioteca se produce en parte por el diseño, y en parte debido al proceso evolutivo impulsado por la vibrante comunidad que ha surgido alrededor del proyecto. Los usuarios de jQuery se reúnen para discutir no sólo del desarrollo de complementos, sino también de las mejoras de la biblioteca central. Los usuarios y desarrolladores también ayudan a mejorar continuamente la documentación oficial del proyecto, que se puede encontrar en <a href="http://api.jquery.com/" target="_blank">Proyecto jQuery </a></div><div class="MsoNormal">A pesar de todos los esfuerzos necesarios para diseñar un sistema tan flexible y robusto, el producto final es gratuito para todos. Este proyecto de código abierto está licenciado bajo licencia MIT (que permite el uso gratuito de jQuery en cualquier sitio y facilita su uso dentro de cualquier software de propiedad) y la GNU Public License (apropiada para su inclusión en otros proyectos de código abierto con licencia GNU).<br /> <br /><div class="alert-message alert"><div style="text-align: center;"><span style="font-size: large;"><i><b><a class="button red" href="http://miscapu.blogspot.com.br/2016/11/primera-pagina-web-con-jquery.html" target="_blank">Siguiente Capítulo: Nuestra Primera Página Web Con jQuery</a></b></i></span>  </div><div class="alert-del-btn"></div></div></div>

Jquery : Nuestra Primera Página Con jQuery

Ahora que hemos cubierto la gama de funciones disponibles para nosotros con jQuery, podemos examinar cómo poner la biblioteca en acción. Par...

Mais informações »

Jquery : ¿Por Qué jQuery Funciona Tan Bien?

Jquery : ¿Por Qué jQuery Funciona Tan Bien?

Con el resurgimiento del interés en HTML dinámico llega una proliferación de Frameworks de JavaScript. Algunos son especializados, centrándo...

Mais informações »

Jquery : ¿Qué hace jQuery?

<div class="glpost"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyepJ6c0NV7j3yuVhoUKE7uWnfnC13iGytEn5EWRO7VNtLi8KH-SblQaPL1fEppIXuA1ZKreHKeCQxJlFCzLNke4OgTWAdPYBfF-RqeNiG0h2JUpCHCVlM_k-vLsi0GE7eyTF7BAa6WDk/s1600/eventos_jquery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyepJ6c0NV7j3yuVhoUKE7uWnfnC13iGytEn5EWRO7VNtLi8KH-SblQaPL1fEppIXuA1ZKreHKeCQxJlFCzLNke4OgTWAdPYBfF-RqeNiG0h2JUpCHCVlM_k-vLsi0GE7eyTF7BAa6WDk/s640/eventos_jquery.jpg" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="MsoNormal"><span class="" id="result_box" lang="es"><span class="">La biblioteca jQuery proporciona una capa de abstracción de propósito general para scripts web comunes y, por lo tanto, es útil en casi todas las situaciones de secuencias de comandos. Su naturaleza extensible significa que nunca podríamos cubrir todos los usos y funciones posibles en un solo libro, ya que los complementos se desarrollan constantemente para agregar nuevas habilidades. Sin embargo, las características principales nos ayudan a realizar las siguientes tareas:</span></span><br /><ul><li>Acceder a elementos en un documento: sin una biblioteca JavaScript, los desarrolladores web a menudo necesitan escribir muchas líneas de código para recorrer el árbol <i><b>Document Object Model (DOM) </b></i>y localizar porciones específicas de la estructura de un documento <i><b>HTML</b></i>. <br />Con <i>jQuery</i>, los desarrolladores tienen un mecanismo selector robusto y eficiente a su disposición, por lo que es fácil recuperar la pieza exacta del documento que necesita ser inspeccionado o manipulado.</li></ul><pre class="brush: js;" style="background: #fff; color: #3b3b3b;"><span style="color: #a535ae;">$</span>('<span style="color: #016cff;">div</span><span style="color: #963dff;">.content</span>').<span style="color: #45ae34; font-weight: 700;">find</span>('<span style="color: #016cff;">p</span>');</pre> <br /><ul><li><span class="" id="result_box" lang="es"><span class="">Modifica la apariencia de una página web: CSS ofrece un poderoso método para influir en la forma en que se representa un documento, pero se queda corto</span></span><span class="" id="result_box" lang="es"><span class=""> cuando los navegadores web no son compatibles con los mismos estándares. Con jQuery, los desarrolladores pueden salvar esta brecha, confiando en el mismo soporte</span></span><span class="" id="result_box" lang="es"><span class="">de estándares en todos los navegadores. Además, jQuery puede cambiar las clases o las propiedades de estilo individuales aplicadas a una parte del documento</span></span><span class="" id="result_box" lang="es"><span class="">incluso después de que la página se haya procesado.</span></span></li></ul><pre class="brush: js;" style="background: #fff; color: #3b3b3b;"><span style="color: #a535ae;">$</span>('<span style="color: #016cff;">ul</span> > <span style="color: #016cff;">li</span>:first')<span style="color: #45ae34; font-weight: 700;">.addClass</span>(<span style="color: #666666;">'active'</span>);</pre> <br /><ul><li>Alterar el contenido de un documento: No limitado a meros cambios cosméticos, jQuery puede modificar el contenido de un documento con pocas tecleadas. El texto puede ser cambiado, las imágenes pueden ser insertadas o intercambiadas, las listas pueden ser reordenadas, o toda la estructura del HTML puede ser reescrita y extendida, todo con una sola interfaz de programación de aplicaciones (API) fácil de usar.</li></ul><pre class="brush: js;" style="background: #fff; color: #3b3b3b;"><span style="color: #006699; font-weight: 700;">$</span> (<span style="color: #666666;">'#container'</span>) <span style="color: #45ae34; font-weight: 700;">.append</span>(<span style="color: #666666;">'<a herf="more.html">more</a>'</span>);</pre> <br /><br /><ul><li>Responder a la interacción de un usuario: Incluso los comportamientos más elaborados y poderosos no son útiles si no podemos controlar cuándo ellos ocurren. La biblioteca jQuery ofrece una manera elegante de interceptar una gran variedad de eventos(por ejemplo cuando un usuario hace clic en un enlace) sin la necesidad de enturbiar el código HTML en sí con los controladores de eventos. Al mismo tiempo, su API de gestión de eventos elimina las inconsistencias del navegador que a menudo afectan a los desarrolladores web.</li></ul> <br /><pre class="brush: js;" style="background: #fff; color: #3b3b3b;"><span style="color: #a535ae;">$</span>('<span style="color: #016cff;">button</span><span style="color: #963dff;">.show-details</span>')<span style="color: #45ae34; font-weight: 700;">.click</span>(<span style="color: #ff5600;">function</span>(){<br />   <span style="color: #a535ae;">$</span>('<span style="color: #016cff;">div</span><span style="color: #963dff;">.details</span>')<span style="color: #45ae34; font-weight: 700;">.show</span>();<br />});</pre> <br /><ul><li>Animar los cambios que se están realizando en un documento: Para implementar eficazmente estos comportamientos interactivos, el diseñador también debe proporcionar comentarios visuales al usuario. La biblioteca de jQuery facilita esto proporcionando una variedad de efectos como fades y wipes, así como un kit de herramientas para crear nuevas pantallas gráficas.</li></ul> <br /><pre class="brush: js;" style="background: #fff; color: #3b3b3b;"><span style="color: #a535ae;">$</span>('<span style="color: #016cff;">div</span><span style="color: #963dff;">.details</span>')<span style="color: #45ae34; font-weight: 700;">.slideDown</span>();</pre> <br /><ul><li>Recuperar información de un servidor sin actualizar una página: Este patrón de código se ha conocido como Ajax, que originalmente representaba JavaScript asíncrono y XML, pero desde entonces ha llegado a representar un conjunto mucho mayor de tecnologías para la comunicación entre el cliente y el servidor. La biblioteca jQuery elimina la complejidad específica del navegador de este proceso responsivo, lo que permite a los desarrolladores centrarse en la funcionalidad del servidor.</li></ul> <br /><pre class="brush: js;" style="background: #fff; color: #3b3b3b;"><span style="color: #a535ae;">$</span>('<span style="color: #016cff;">div</span><span style="color: #963dff;">.details</span>')<span style="color: #45ae34; font-weight: 700;">.load</span>(<span style="color: #666666;">'more.html #content'</span>);</pre> <br /><ul><li>Simplificar las tareas comunes de JavaScript: Además de todas las características específicas de documentos de jQuery, la biblioteca proporciona mejoras a las construcciones básicas de JavaScript, como la iteración y la manipulación de arrays.</li></ul> <br /><pre class="brush: js;" style="background: #fff; color: #3b3b3b;"><span style="color: #006699; font-weight: 700;">$</span><span style="color: #45ae34; font-weight: 700;">.each</span>(obj, <span style="color: #ff5600;">function</span>(key, value) {<br />   total <span style="color: #006699; font-weight: 700;">+</span><span style="color: #006699; font-weight: 700;">=</span> value;<br />});</pre> <br /><div class="alert-message alert"><div style="text-align: center;"><span style="font-size: large;"><i><b><a class="button red" href="http://miscapu.blogspot.com.br/2016/11/la-perfeccion-de-jquery.html" target="_blank">Siguiente Capítulo: ¿Por qué jQuery funciona tan bien?</a></b></i></span>  </div><div class="alert-del-btn"></div></div></div>