jQuery es una biblioteca de Javascript que simplifica la programación de JavaScript™ y AJAX (JavaScript asincrónico + XML, Javascript asincrónico y XML). A diferencia de otras bibliotecas de Javascript, jQuery tiene su propia filosofía que facilita la escritura de código. Este artículo lo llevará a comprender la filosofía de jQuery, analizará sus características y funciones y le brindará algunos ejemplos de ajax y cómo usar complementos para extender jQuery.
1. ¿Qué es jQuery?
jQuery es una excelente biblioteca de Javascript. Nació en 2006 y fue creada por John Resig. Si eres un novato en JavaScript pero quieres probar la complejidad de DOM (Document Object Model) y Ajax, o si eres un experto en JavaScript pero estás cansado de repetir los aburridos scripts de DOM y Ajax, jQuery será tu mejor opción. Tu mejor opción. .
jQuery te ayudará a mantener tu código simple y conciso. Ya no tendrá que escribir muchos bucles repetitivos o scripts de llamadas DOM. Con jQuery encontrará rápidamente los puntos clave y expresará sus ideas con la menor cantidad de código.
La filosofía de jQuery es realmente muy simple: simple y reutilizable. Cuando entiendas y estés de acuerdo con esta idea, podrás empezar a darte cuenta de lo fácil y agradable que puede ser el uso de jQuery para tu programación.
2. Algunos conceptos simples
Aquí hay un ejemplo simple para mostrarle cómo jQuery afecta el código que escribe. En realidad, lo que debe hacer es muy simple, como agregar un evento de respuesta de clic a todos los enlaces en un área determinada de la página. Puede usar Javascript general y DOM para escribirlo. Consulte el Listado 1 para ver el código:
Listado 1. Secuencias de comandos DOM sin. jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i) ;link.onclick = function() {return confirm('Vas a visitar: ' + this.href);};} Si usas jQuery, la implementación es la siguiente: Listado 2. Scripting DOM con jQuery$(' #external_links a').click( function() {return confirm('Vas a visitar: ' + this.href);}); Sorprendido, ¿verdad? Con jQuery, puedes encontrar rápidamente los puntos clave y expresar solo lo que necesitas expresar sin muchas palabras. No es necesario recorrer estos elementos, la función click() se encarga de todo. Y no necesitas escribir demasiado código para manipular el DOM. Todo lo que necesitas es usar algunos caracteres para definir el elemento que estás buscando. Echemos un vistazo a cómo funciona este código, con algunos trucos. Primero, observe la función $(), una de las funciones más útiles y poderosas de jQuery. La mayoría de las veces, usa esta función para seleccionar elementos del documento. En este ejemplo, use esta función para pasar cadenas en cascada. Sintaxis de hojas de estilo (CSS), jQuery puede encontrar fácilmente este elemento. Si sabe un poco sobre los selectores CSS básicos, creo que esta sintaxis debería resultarle bastante familiar. En el Listado 2, # external_links se usa para buscar elementos con la identificación external_links. El siguiente espacio significa que jQuery necesita encontrar todos los elementos <a> dentro del elemento #external_links. Es un poco difícil expresarlo en lenguaje hablado; también es bastante problemático escribir en script DOM, sin embargo, en CSS, nada es más simple. que esto. La función $() devuelve un objeto jQuery que contiene todos los elementos que coinciden con el selector CSS. El concepto de un objeto jQuery es como una matriz, pero puede contener muchos objetos jQuery. Por ejemplo, puede llamar a la función click. Función para vincular una respuesta de evento de clic a cada elemento en un objeto jQuery.
También puede pasar un elemento o una matriz de elementos a la función $(), que agregará todos los elementos empaquetados en un objeto jQuery. esta característica a objetos como ventanas. Por ejemplo, puede usar esta función para cargar eventos, como este:
window.onload = function() {// haz esto cuando la página termine de cargarse}; si usas jQuery, puedes escribir así:
$(window).load(function() {// ejecuta esto cuando se haya descargado toda la página}); Imagen de la página. En algunos casos, primero debe cargar la imagen, pero la mayoría de las veces, es posible que solo necesite ver el marcado de hipertexto (HTML). jQuery resuelve este problema creando un evento muy especial listo en el documento. El método de uso es el siguiente: $(document).ready(function() {// haz esto cuando el HTML esté listo}); este código crea un objeto jQuery del elemento del documento y luego lo llama cuando el DOM html. El documento está listo. Esta instancia puede llamar a esta función un número ilimitado de veces.
En la codificación de verdadero estilo jQuery, también hay una forma abreviada de esta función. Simplemente pase una función a la función $():
$(function() {// ejecuta esto cuando el HTML haya terminado de descargarse}); Hasta ahora, te he mostrado tres formas diferentes de usar la función $(). La cuarta forma, puedes usar una cadena para crear un elemento. El resultado es un objeto jQuery que contiene este elemento. El Listado 3 muestra un ejemplo de cómo agregar un párrafo a la página:
Listado 3. Crear y agregar un párrafo simple
$('<p></p>'). !').css('fondo', 'amarillo').appendTo("body"); Como puede ver en el ejemplo anterior, otra característica muy poderosa de jQuery es el encadenamiento de métodos (encadenamiento de métodos), cada vez que llama a un método en un objeto jQuery, este método también devolverá un objeto jQuery. Esto significa que si necesita llamar a varios métodos en un objeto jQuery, no es necesario escribir selectores CSS repetidamente. Puede verse así:
$('#message').css('fondo', 'amarillo').html('¡Hola!').show();3.jQuery hace que Ajax sea extremadamente simple. Al usar jQuery, Ajax no puede volverse más simple. tiene una serie de funciones que pueden hacer que las cosas simples sean realmente simples y las complejas lo más simples posible. Un uso común de Ajax es cargar un fragmento de código html en un área determinada de la página. Para hacer esto, simplemente seleccione. el elemento y use la función load(). Aquí hay un ejemplo de cómo actualizar algunas estadísticas. $('#stats').load('stats.html'); página lateral. Como habrás adivinado, es muy sencillo usar jQuery. Puedes elegir usar $.post() o $.get(), por supuesto, dependiendo de tus necesidades específicas. Objeto de datos opcional y una función de devolución de llamada. El Listado 4 es un ejemplo simple de envío de datos y uso de una función de devolución de llamada:
Listado 4. Envío de datos a una página con Ajax
$.post('save.cgi', {text: 'my string'. ,número: 23}, function() {alert('Sus datos han sido guardados.');}); Si realmente desea algún código Ajax complejo, use la función $.ajax(). Puede especificar el tipo de datos como. xml, html, script o json, jQuery preparará automáticamente los resultados para usted y su función de devolución de llamada puede usar los datos inmediatamente. También puede configurar las funciones de devolución de llamada antes de enviar, error, éxito y completar para brindarle al usuario más sugerencias sobre ajax. experiencia Además, existen algunos parámetros que le permiten establecer el tiempo de espera para las solicitudes ajax o el estado de "último cambio" de una página. El Listado 5 muestra un ejemplo de cómo obtener un documento xml y utilizar el método que mencioné anteriormente. ejemplo de algunos parámetros:
Listado 5. Ajax complejo simplificado con $.ajax()
$.ajax({url: 'document.xml',tipo: 'GET',dataType: 'xml',timeout: 1000, error: función (){alert('Error al cargar el documento XML');},success: function(xml){// haz algo con xml}}); cuando obtengas comentarios xml correctamente, puedes usar jQuery para recorrer el documento xml, simplemente como lo hace con html. Esto hace que sea muy sencillo manipular un archivo xml e integrar el contenido en la página. El Listado
6
extiende la función de éxito, de acuerdo con cada <elemento> en el documento xml de la página. Se agregó un elemento de lista.Trabajar con XML usando jQuery con
éxito: function(xml){$(xml).find('item').each(function(){var item_text = $(this). text();$('<li><. /li>').html(item_text).appendTo('ol');});}