4. Haz que tu html se mueva.
Puedes usar jQuery para hacer algunas animaciones y efectos básicos. El núcleo del efecto de animación es la función animate (), que puede cambiar el estilo CSS especificado en cualquier momento. Por ejemplo, puede cambiar la altura, el ancho, la transparencia o la posición. puede usar milisegundos al cambiar la velocidad (milisegundos), o puede usar valores de velocidad predeterminados: lento, normal o rápido.
Aquí hay una animación de ejemplo que cambia el ancho y el alto de un elemento al mismo tiempo. No hay un valor inicial, solo el valor final. El valor inicial se puede tomar directamente del elemento existente. Al mismo tiempo, también agregué una función de devolución de llamada:
$('#grow').animate({ height: 500). , width: 500 }, "slow", function() {alert('¡El elemento ha terminado de crecer!');});Usando estas funciones integradas de jQuery, es bastante fácil crear efectos de animación. la función show() y la función hide() para mostrar y ocultar elementos se pueden configurar para que se ejecuten inmediatamente o a una velocidad específica. También puede utilizar las funciones fadeIn() y fadeOut() o las funciones slideDown() y slideUp(). para mostrar u ocultar un elemento, según el efecto que desee. El siguiente es un ejemplo sencillo para mostrar el efecto de deslizamiento hacia abajo de la barra de navegación:
$('#nav').slideDown('slow'); scripting y manejo de eventos jQuery es probablemente el mejor para manipular DOM y se ha realizado el procesamiento de eventos. En realidad, es muy fácil atravesar y operar el DOM. Vincular, eliminar y llamar eventos también es muy natural y fácil de usar, en comparación con manualmente. Al escribir estos códigos, los errores se pueden reducir considerablemente. De hecho, jQuery simplifica el DOM. Varias operaciones. Puede crear un elemento y vincularlo a otros elementos usando la función append(), puede copiar el elemento usando clone(), puede. configure el contenido usando html (), puede eliminar contenido usando la función vacía () y eliminar usando la función () elimina elementos y contenido, e incluso puede usar la función wrap () para envolver este elemento con otro elemento. funciones que pueden cambiar el contenido del objeto jQuery atravesando el DOM. También puede obtener los hermanos() de un elemento, padres() o hijos(). También puede usar next() y prev(). find siblings. find() es quizás la más poderosa de estas funciones. Le permite usar un selector de jQuery para buscar dentro de su objeto jQuery y sus nodos descendientes. Estas funciones se vuelven aún más poderosas cuando se combinan con la función end(). La función end() actúa como un deshacer, lo que hace que su objeto jQuery vuelva al momento en que llamó a find() o parent() o cualquier otro estado antes de la función transversal. Si usa el método link que mencionamos anteriormente, son funciones muy complejas. Se puede implementar con un código simple. El Listado 7 muestra un ejemplo. Encontrará un formulario de inicio de sesión y realizará algunas operaciones en los elementos que contiene. Recorrer y manipular el DOM con facilidad$('form#login')// ocultar todo. las etiquetas dentro del formulario con el 'opcional' class.find( 'label.optional').hide().end()// agrega un borde rojo a cualquier campo de contraseña en form.find('input:password') .css('border', '1px solid red'). end()// agrega un controlador de envío al formulario.submit(function(){return confirm('¿Estás seguro de que deseas enviar?');}) ; Lo creas o no, este ejemplo en realidad solo tiene un enlace. Una línea de código con algunos espacios en el medio. Primero, seleccioné el formulario de inicio de sesión. Luego, encontré las etiquetas opcionales dentro, las oculté y luego llamé a end(. ) para volver al formulario. Encontré el cuadro de entrada de contraseña y cambié el borde a rojo, y luego llamé a end() nuevamente para regresar al formulario. Finalmente, agregué una función de procesamiento de tiempo de envío a este formulario. Lo interesante es que, además del código extremadamente conciso, jQuery también optimizó todas las operaciones por sí mismo para garantizar que cuando todo esté bien conectado, no sea necesario buscar un elemento dos veces. El manejo de eventos generales también es muy simple, al igual que. llamar a la función click(), submit() o mouseover() y luego pasarla a un detector de eventos. Las funciones son las mismas. Además, también puedes usar bind('eventname', function(){}) para. especifique la función de procesamiento de eventos. Puede usar unbind('eventname') para desvincular un evento, o usar unbind() para desvincular todos los eventos. Para obtener más información sobre esta serie de funciones y cómo usarlas, consulte la programación de aplicaciones de jQuery. documentación de interfaz (API) 6. Revelando el poder de los selectores de jQuery
Normalmente, usas ID para seleccionar elementos, como #myid; o usas nombres de clases para seleccionar, como div.myclass. Sin embargo, jQuery tiene un formato bastante complejo y completo. Sintaxis del selector que le permite usar un único selector para encontrar cualquier combinación de elementos. La
sintaxis del selector de jQuery se basa en gran medida en CSS3 y XPath. Cuanto más sepa sobre CSS3 y XPath, mejor podrá utilizar jQuery. , incluidos CSS3 y XPath, consulte los enlaces de recursos al final de este artículo.
CSS3 incluye algunas sintaxis que todos admiten, por lo que es posible que no lo vea con mucha frecuencia. Sin embargo, aún puede usarlo para seleccionar elementos en jQuery. porque jQuery tiene su propio motor de análisis de selectores personalizado. Por ejemplo, para agregar un guión a cada columna vacía de la tabla, puede usar el pseudooperador :empty:
$('td:empty').html('-. '); ¿Cómo encontrar cada elemento que no contiene un nombre de clase específico? CSS3 tiene una sintaxis específica para esta situación, utilizando el pseudooperador :not. El siguiente código ocultará todos los elementos del cuadro de entrada de texto que no contengan el requerido. nombre de clase. $('input:not(.required)').hide( ); También puede usar comas para conectar varios selectores, como en CSS. El siguiente código ocultará varios tipos de elementos de lista en la página. al mismo tiempo. $('ul, ol, dl' ).hide();XPath es una poderosa herramienta para buscar elementos en un documento. Es algo diferente de CSS y le permite encontrar muchas cosas que no se pueden encontrar usando CSS. Por ejemplo, si desea agregar un borde, puede hacer esto: $("input:checkbox/..").css('border', '1px solid #777'); jQuery también tiene algunos selectores adicionales. no se encuentran en CSS y XPath, por ejemplo. Para aumentar la legibilidad de una tabla, es posible que desee configurar filas pares e impares para usar diferentes nombres de clase. Esto se llama barras de cebra. Hacer esto con jQuery es pan comido. gracias al selector :odd Aquí está el código que demuestra el uso de la clase rayada para cambiar el color de fondo de las filas impares en una tabla: $('table.striped > tr:odd').css('background', '. #999999'); Mira, los potentes selectores de jQuery pueden simplificar tu código. No importa qué elemento quieras afectar, no importa cuán claro o borroso esté, siempre puedes encontrar una manera de orientarlo usando un simple selector de jQuery. Ampliar jQuery mediante complementos A diferencia de otros programas, usted puede escribir un complemento para jQuery de ninguna manera es una prueba dolorosa con un montón de API complicadas. De hecho, escribir un complemento para jQuery es tan simple que tal vez desee hacerlo. escribe un complemento más adelante para que tu código sea más conciso. Aquí está la parte más básica del complemento que vas a escribir: $.fn.donothing = function(){return this;}; , necesita una pequeña explicación. Primero, debe agregar una función a cada objeto jQuery. Debe asignarla a $.fn. En segundo lugar, la función debe devolver esto (objeto jQuery) para garantizar que no rompa el encadenamiento de métodos. reglas mencionadas anteriormente. Puede ampliar fácilmente el código anterior Para escribir un Para cambiar el color de fondo del complemento en lugar de usar css('fondo'), puede hacer esto: $.fn.background = function(bg). {return this.css('background', bg);}; Tenga en cuenta que puedo devolver directamente la función css (), porque ya es un objeto jQuey, por lo que el encadenamiento de métodos puede funcionar bien cuando utilice un complemento jQuery. Descubra que está repitiendo código constantemente. Por ejemplo, cuando usa cada función () para manejar lo mismo una y otra vez, puede considerar usar un complemento [Anotación: no muy claro desde los complementos de jQuery]. son muy fáciles de desarrollar, hay miles de complementos disponibles para su uso. jQuery tiene complementos para tablas, esquinas redondeadas, presentaciones de diapositivas, información sobre herramientas, selección de fechas y casi cualquier aplicación que pueda encontrar. una lista completa de complementos en la lista de recursos al final de este artículo. El complemento más complejo y ampliamente utilizado es Interface, un complemento de animación que maneja efectos de clasificación, arrastre, varios efectos especiales complejos y otros. efectos de interfaz de usuario interesantes y complejos La interfaz es para jQuery lo que Scriptaculous es para Prototype. Un complemento igualmente popular y útil es el complemento Form, que le permite simplemente enviar un formulario en segundo plano usando ajax. esta situación: cuando necesitas secuestrar el evento de envío del formulario, luego busca todos los diferentes campos de salida de texto y úsalos para construir la llamada ajax. 8. jQuery Después de eso, solo hablé sobre algunas cosas superficiales sobre jQuery. Es interesante de usar, porque las nuevas funciones y los nuevos métodos que aprende parecen muy naturales y lógicos. Una vez que use jQuery, se dará cuenta de que puede simplificar su trabajo en Javascript y Ajax. Cada vez que aprenda algo, el código se volverá más simple.
Después de aprender jQuery,
me divirtió mucho la programación en Javascript y todas las cosas aburridas se manejan bien, así que solo necesito concentrarme en la parte principal. Después de usar jQuery, apenas recuerdo la última vez que usé un for. loop. Incluso tengo miedo de usar otras bibliotecas de Javascript. jQuery cambió por completo mi visión sobre la programación de Javascript.