Home-theater-designers
Crear un nuevo elemento es una de las tareas más básicas que puede realizar con la biblioteca jQuery JavaScript. Con jQuery, la tarea es mucho más simple que el enfoque equivalente con el Modelo de objetos de documento (DOM). También lo encontrará más flexible y expresivo cuanto más use jQuery.
Para cumplir un propósito, deberá poder agregar su elemento a una página web. Aprenda a agregar un nuevo elemento de lista o reemplazar un párrafo con contenido nuevo usando jQuery.
¿Qué es jQuery?
La biblioteca jQuery es una colección de JavaScript código con dos objetivos principales:
- Simplifica las operaciones comunes de JavaScript.
- Maneja problemas de JavaScript de compatibilidad cruzada entre varios navegadores.
El segundo objetivo se ocupa de los errores, pero también aborda las diferencias de implementación entre los navegadores. Ambos objetivos son menos necesarios de lo que solían ser, ya que los navegadores mejoran con el tiempo. Pero jQuery aún puede ser una herramienta valiosa.
¿Qué es un elemento?
En ocasiones, un elemento se denomina etiqueta. Aunque los dos a menudo se usan indistintamente, existe una sutil diferencia. Una etiqueta se refiere al literal o
incluye en un archivo HTML para marcar el contenido del texto. Un elemento es el objeto detrás de escena que representa el texto marcado. Piense en un elemento como la contraparte DOM de las etiquetas HTML.
Cómo crear un nuevo elemento usando jQuery
Como la mayoría de las operaciones de jQuery, la creación de un elemento comienza con la función dólar, $() . Este es un atajo al núcleo jQuery () función. Esta función tiene tres propósitos distintos:
cómo liberar memoria en la computadora
- Coincide con elementos, generalmente los que ya existen en el documento
- Crea nuevos elementos
- Ejecuta una función de devolución de llamada cuando el DOM está listo
Cuando pasa una cadena que contiene HTML como primer parámetro, esta función creará un nuevo elemento:
|_+_|Esto devuelve un objeto jQuery especial que contiene una colección de elementos. En este caso, hay un único objeto que representa un elemento 'a' que acabamos de crear.
La cadena debe verse como HTML para distinguir esta acción de los elementos coincidentes. En la práctica, esto significa que la cadena debe comenzar con un < . No puede agregar texto sin formato al documento con este método.
Es importante comprender que esto no agrega el elemento a su documento, solo crea un nuevo elemento listo para que lo agregue. El elemento está 'desapegado', ocupando memoria, pero en realidad no forma parte de la página final, todavía.
Agregar HTML más complejo
La función dólar puede crear más de un elemento. De hecho, puede construir cualquier árbol de elementos HTML que desee:
|_+_|También puede utilizar este formato para crear un elemento con atributos:
|_+_|Cómo establecer atributos en un elemento nuevo
Puede crear un nuevo elemento jQuery y establecer sus atributos sin tener que crear usted mismo la cadena HTML completa. Esto es útil si está generando valores de atributo de forma dinámica. Por ejemplo:
|_+_|Cómo agregar un elemento
Una vez que haya creado un nuevo elemento, puede agregarlo al documento de varias formas diferentes. La documentación de jQuery reúne estos métodos bajo el Categoría 'manipulación' .
Agregar como hijo de un elemento existente
|_+_|Puede utilizar este método, por ejemplo, para agregar un nuevo elemento de lista al final de una lista.
Agréguelo como hermano de un elemento existente
|_+_|Esta es una buena opción si, por ejemplo, desea agregar un nuevo párrafo en medio de otros dos.
Reemplazar un elemento existente
Puede intercambiar un elemento existente por uno recién creado utilizando el reemplazar con() método:
|_+_|Envolver alrededor de un elemento existente
Este es un caso de uso bastante raro, pero es posible que desee incluir un elemento existente en uno nuevo. Por ejemplo, puede tener un código elemento que desea envolver en un por :
|_+_|Acceder al elemento que ha creado
los $() La función devuelve un objeto jQuery. Esto es útil para operaciones de seguimiento:
|_+_|Tenga en cuenta que, por convención, los programadores de jQuery a menudo nombran las variables de jQuery con un signo de dólar inicial. Este es simplemente un esquema de nomenclatura y no está directamente relacionado con el $() función.
Creando elementos usando jQuery
Aunque puede manipular el DOM utilizando funciones nativas de JavaScript, jQuery lo hace mucho más fácil. Aún es muy útil tener una buena comprensión del DOM, pero jQuery hace que trabajar con él sea mucho más agradable.
Cuota Cuota Pío Correo electrónico El héroe oculto de los sitios web: comprensión del DOM¿Está aprendiendo diseño web y necesita saber más sobre el modelo de objetos de documento? Esto es lo que necesita saber sobre DOM.
Leer siguiente Temas relacionados- Programación
- Desarrollo web
- jQuery
Bobby es un entusiasta de la tecnología que trabajó como desarrollador de software durante la mayor parte de dos décadas. Es un apasionado de los juegos, trabaja como editor de reseñas en Switch Player Magazine y está inmerso en todos los aspectos de la publicación en línea y el desarrollo web.
Más de Bobby JackSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse