Obteniu informació sobre com es crea un element a jQuery

Obteniu informació sobre com es crea un element a jQuery

La creació d’un element nou és una de les tasques més bàsiques que podeu realitzar amb la biblioteca JavaScript de jQuery. Amb jQuery, la tasca és molt més senzilla que l'enfocament equivalent amb el Model d'objectes de document (DOM). També el trobareu més flexible i expressiu, com més utilitzeu jQuery.





Per complir un propòsit, haureu de poder afegir el vostre element a una pàgina web. Obteniu informació sobre com afegir un element de llista nou o substituir un paràgraf per contingut nou mitjançant jQuery.



Què és jQuery?

La biblioteca jQuery és una col·lecció de fitxers JavaScript codi amb dos objectius principals:





  • Simplifica les operacions JavaScript habituals.
  • Gestiona problemes de compatibilitat creuada amb JavaScript entre diversos navegadors.

El segon objectiu tracta d’errors, però també tracta les diferències d’implementació entre navegadors. Tots dos objectius són menys necessaris que abans, ja que els navegadors milloren amb el pas del temps. Però jQuery encara pot ser una eina valuosa.

Què és un element?

De vegades, es fa referència a un element com a etiqueta. Tot i que sovint s’utilitzen els dos indistintament, hi ha una subtil diferència. Una etiqueta fa referència al literal

o bé



incloeu en un fitxer HTML per marcar el contingut del text. Un element és l’objecte entre bastidors que representa el text marcat. Penseu en un element com la contrapartida DOM de les etiquetes HTML.

Com es crea un element nou mitjançant jQuery

Com la majoria d’operacions jQuery, la creació d’un element comença amb la funció dòlar, $ () . Aquesta és una drecera fins al nucli jQuery () funció. Aquesta funció té tres finalitats diferents:



  • Coincideix amb elements, normalment els que ja existeixen al document
  • Crea elements nous
  • Executa una funció de devolució de trucada quan el DOM estigui a punt

Quan passeu una cadena que contingui HTML com a primer paràmetre, aquesta funció crearà un element nou:

$(' ')

Això retorna un objecte jQuery especial que conté una col·lecció d'elements. En aquest cas, hi ha un sol objecte que representa un element 'a' que acabem de crear.



on puc imprimir alguna cosa?

La cadena ha de tenir aspecte HTML per distingir aquesta acció dels elements coincidents. A la pràctica, això significa que la cadena ha de començar per a < . No podeu afegir text pla al document mitjançant aquest mètode.

És important entendre que això no afegeix l’element al vostre document, només crea un element nou a punt per afegir-lo. L'element és 'sense connexió', ocupa memòria però no forma part de la pàgina final, encara.

Afegint HTML més complex

La funció dòlar realment pot crear més d’un element. De fet, pot crear qualsevol arbre d’elements HTML que vulgueu:

$('
  • one
  • two
  • three
')

També podeu utilitzar aquest format per crear un element amb atributs:

$(' my hometown')

Com definir atributs en un element nou

Podeu crear un element jQuery nou i establir-ne els atributs sense haver de crear la cadena HTML completa. Això és útil si esteu generant valors d'atribut de forma dinàmica. Per exemple:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

Com afegir un element

Un cop hàgiu creat un element nou, podeu afegir-lo al document de diverses maneres diferents. La documentació de jQuery reuneix aquests mètodes al fitxer Categoria ‘manipulació’ .

Afegeix com a fill d'un element existent

$('body').append($('

Hello, world

'));
$(document.body).append($el);

Podeu utilitzar aquest mètode, per exemple, per afegir un element de llista nou al final d’una llista.

Afegiu-lo com a germà d'un element existent

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    Aquesta és una bona opció si, per exemple, voleu afegir un paràgraf nou enmig d'altres dos.

    Substitueix un element existent

    Podeu canviar un element existent per un de nova creació mitjançant el fitxer substituirAmb () mètode:

    $('#old').replaceWith('

    New paragraph

    ');

    Envolta un element existent

    Es tracta d’un cas d’ús força rar, però és possible que vulgueu incloure un element existent en un de nou. Per exemple, podeu tenir un codi element que voleu embolicar en un fitxer per :

    $('code#n1').wrap('
    ')
    Accedir a l’element que heu creat
     
    El $ () La funció retorna un objecte jQuery. Això és útil per a les operacions de seguiment:
    $el = $('p');  
    $('body').append($el);
    Tingueu en compte que, per convenció, els programadors de jQuery solen anomenar variables jQuery amb un signe de dòlar principal. Això és simplement un esquema de denominació i no està directament relacionat amb el $ () funció.
     
    Creació d'elements mitjançant jQuery
     
    Tot i que podeu manipular el DOM mitjançant funcions natives de JavaScript, jQuery ho fa molt més fàcil. Encara és molt útil tenir una bona comprensió del DOM, però jQuery fa que sigui molt més agradable treballar amb ell.
      Compartir    Compartir      Tweet      Correu electrònic      L'heroi ocult dels llocs web: entendre el DOM  
    Voleu aprendre disseny web i necessiteu saber més sobre el model d’objectes de documents? Això és el que heu de saber sobre el DOM.
    Llegiu a continuació       Temes relacionats  
       
    • Programació
      •  
    • Desenvolupament web
      •  
    • jQuery
      •  
      Sobre l'autor   Bobby Jack(58 articles publicats)      
    Bobby és un entusiasta de la tecnologia que va treballar com a desenvolupador de programari durant gairebé dues dècades. És un apassionat dels jocs, treballa com a editor de ressenyes a Switch Player Magazine i està immers en tots els aspectes de la publicació en línia i el desenvolupament web.
    Més de Bobby Jack
    Subscriu-te al nostre butlletí
     
    Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
    Feu clic aquí per subscriure-us