Cómo utilizar el objeto ajax jquery para la programación html5 y css3

El objeto jQuery en AJAX es interesante porque es fácil de crear a partir de una variedad de elementos DOM para la programación HTML5 y CSS3, y porque añade nuevas características maravillosas, a estos elementos.

Video: Tutorial jQuery 23 - AJAX método $.post

Cómo cambiar el estilo de un elemento

Si dinámica puede cambiar el CSS de un elemento, se puede hacer mucho a ella. jQuery hace que este proceso bastante fácil. Después de tener un objeto jQuery, puede utilizar la css () método para agregar o cambiar los atributos de CSS del objeto.

El código muestra una concisión común al código jQuery:

styleElements.html

Soy una sola rúbrica nivel

Soy un párrafo con el id "myParagraph."

Tengo una frontera

Tengo una frontera también.

A encontrar algunas cosas interesantes en este programa. En primer lugar, echar un vistazo al código HTML:

  • Contiene una etiqueta H1. Eso no es demasiado emocionante, pero se puede utilizar para mostrar cómo dirigirse a los elementos por tipo DOM.

  • Hay un párrafo con el ID myParagraph. Esto se utilizará para ilustrar cómo orientar un elemento por ID.

  • Hay dos elementos con la clase. Que no hay manera fácil en la obra DOM ordinaria para aplicar el código a todos los elementos de una clase particular, pero jQuery hace que sea fácil.

  • Varios elementos tienen CSS personalizado, pero no se define ningún CSS. El código jQuery cambia todo el CSS dinámicamente.

    Video: Tutorial jQuery 30: Peticiones con el método 'ajax'

los en eso() la función se identifica como la función que se ejecuta cuando el documento esté listo. En esta función, el método CSS de gran alcance se utiliza para cambiar el CSS de cada elemento de forma dinámica. Observe cómo se dirigen los diversos elementos.

Cómo seleccionar objetos jQuery

jQuery le ofrece varias alternativas para la creación de objetos jQuery de los elementos DOM. En general, se utilizan las mismas reglas para seleccionar objetos en jQuery como lo hace en CSS:

elementos DOM están dirigidos de inmediato. Puede incluir cualquier elemento DOM en el interior del ps mecanismo para dirigirse a todos los elementos similares. Por ejemplo, utilice $ ( “H1”) para referirse a todos los objetos H1 o $ ( “P”)para referirse a todos los párrafos.

  • Utilizar el identificador para dirigirse a un ID particular. Esto funciona exactamente igual que en el CSS. Si usted tiene un elemento con el ID mi cosa, Utilizando este código $ ( “MYTHing”).

  • Utilizar el . identificador para apuntar miembros de una clase. Una vez más, este es el mismo mecanismo que se utiliza en el CSS, por lo que todos los elementos con la clase bordeado unido a ellos puede ser modificado con el código $ ( “Bordeado”).

  • Incluso puede utilizar identificadores complejas. Incluso puede utilizar identificadores CSS complejos como $ ( “Img li”). Este identificador sólo se refiere a las imágenes dentro de un elemento de la lista.

  • Estos métodos de selección (todos tomados de la notación CSS familiarizado) añaden una flexibilidad increíble a su código. Ahora puede seleccionar fácilmente los elementos en el código javascript de acuerdo con las mismas reglas que se utilizan para identificar los elementos en CSS.

    Cómo modificar el estilo

    Después de haber identificado un objeto o un conjunto de objetos, puede aplicar métodos de jQuery. Un método muy potente y fácil es el método. La forma básica de este css () método toma dos parámetros: una regla de estilo y valor.

    Por ejemplo, para hacer que el color de fondo de todos los objetos de color amarillo H1, utilice el siguiente código:

     ps"h1") .css ("color de fondo", "amarillo") -

    Si se aplica una regla de estilo para una colección de objetos (como todos los objetos H1 o todos los objetos con el bordeado clase), la misma regla se aplica al instante a todos los objetos.

    A más potente variante de la regla de estilo que existe le permite aplicar varios estilos CSS a la vez. Se necesita un solo objeto en la notación JSON como su argumento:

     ps"#myParagraph") .css ({"color de fondo":"negro","color":"blanco"}) -

    Este ejemplo utiliza un objeto JSON definido como una serie de pares regla / valor.

    Artículos Relacionados