Zistite, ako vytvoriť prvok v jQuery

Zistite, ako vytvoriť prvok v jQuery

Vytvorenie nového prvku je jednou z najzákladnejších úloh, ktoré môžete s knižnicou JavaScript jQuery vykonať. Pomocou jQuery je úloha oveľa jednoduchšia ako ekvivalentný prístup s Document Object Model (DOM). Tiež vám príde flexibilnejšie a expresívnejšie, čím viac budete používať jQuery.





Aby váš účel slúžil, budete musieť byť schopní pridať svoj prvok na webovú stránku. Naučte sa, ako pridať novú položku zoznamu alebo nahradiť odsek novým obsahom pomocou jQuery.



Čo je jQuery?

Knižnica jQuery je zbierka JavaScript kód s dvoma primárnymi cieľmi:





  • Zjednodušuje bežné operácie JavaScriptu.
  • Rieši problémy s krížovou kompatibilitou JavaScript medzi rôznymi prehliadačmi.

Druhý cieľ rieši chyby, ale zaoberá sa aj rozdielmi v implementácii medzi prehliadačmi. Oba ciele sú menej potrebné, ako bývali, pretože sa prehliadače časom zlepšujú. JQuery však môže byť stále cenným nástrojom.

Čo je prvok?

Prvok sa niekedy označuje ako značka. Aj keď sa tieto dva často používajú zameniteľne, existuje jemný rozdiel. Značka odkazuje na doslovné

alebo



vložíte do súboru HTML na označenie textového obsahu. Prvkom je objekt zo zákulisia, ktorý predstavuje označený text. Predstavte si prvok ako náprotivok DOM k značkám HTML.

Ako vytvoriť nový prvok pomocou jQuery

Rovnako ako väčšina operácií jQuery, vytváranie prvku začína funkciou dolára, $ () . Toto je skratka k jadru jQuery () funkciu. Táto funkcia má tri rôzne účely:



  • Zodpovedá prvkom, zvyčajne tým, ktoré už v dokumente existujú
  • Vytvára nové prvky
  • Keď je DOM pripravený, spustí funkciu spätného volania

Keď ako prvý parameter zadáte reťazec obsahujúci HTML, táto funkcia vytvorí nový prvok:

$(' ')

Tým sa vráti špeciálny objekt jQuery, ktorý obsahuje zbierku prvkov. V tomto prípade existuje jeden objekt predstavujúci prvok „a“, ktorý sme práve vytvorili.



preposielanie e -mailov z Outlooku do Gmailu

Na rozlíšenie tejto akcie od zodpovedajúcich prvkov musí reťazec vyzerať ako HTML. V praxi to znamená, že reťazec musí začínať a < . Touto metódou nemôžete do dokumentu pridať obyčajný text.

Je dôležité pochopiť, že týmto sa do dokumentu nepridá prvok, ale iba sa vytvorí nový prvok pripravený na pridanie. Prvok je „nepripojený“, zaberá pamäť, ale v skutočnosti nie je súčasťou konečnej stránky - zatiaľ.

Pridanie komplexnejšieho HTML

Dolárová funkcia môže v skutočnosti vytvárať viac ako jeden prvok. V skutočnosti môže vytvoriť ľubovoľný strom prvkov HTML, ktoré chcete:

$('
  • one
  • two
  • three
')

Tento formát môžete použiť aj na vytvorenie prvku s atribútmi:

$(' my hometown')

Ako nastaviť atribúty na nový prvok

Môžete vytvoriť nový prvok jQuery a nastaviť jeho atribúty bez toho, aby ste museli celý reťazec HTML vytvárať sami. Je to užitočné, ak dynamicky generujete hodnoty atribútov. Napríklad:

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

Ako pridať prvok

Keď vytvoríte nový prvok, môžete ho pridať do dokumentu niekoľkými rôznymi spôsobmi. Dokumentácia jQuery zhromažďuje tieto metódy spoločne pod príponou „Manipulačná“ kategória .

Pridať ako podriadené dieťa existujúceho prvku

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

Hello, world

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

Túto metódu môžete použiť napríklad na pridanie novej položky zoznamu na koniec zoznamu.

Pridajte ho ako súrodenca existujúceho prvku

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

A new paragraph

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

    Je to dobrá voľba, ak napríklad chcete pridať nový odsek uprostred dvoch ďalších.

    Nahradiť existujúci prvok

    Existujúci prvok môžete vymeniť za novovytvorený pomocou nahradiť s() metóda:

    $('#old').replaceWith('

    New paragraph

    ');

    Obtočte existujúci prvok

    Toto je veľmi zriedkavý prípad použitia, ale možno budete chcieť existujúci prvok uzavrieť do nového. Môžete mať napríklad a kód prvok, ktorý chcete zabaliť do súboru pre :

    $('code#n1').wrap('
    ')
    Prístup k prvku, ktorý ste vytvorili
     
    The $ () funkcia vracia objekt jQuery. To je užitočné pre následné operácie:
    $el = $('p');  
    $('body').append($el);
    Všimnite si toho, že programátori jQuery podľa konvencie často pomenovávajú premenné jQuery úvodným znakom dolára. Toto je jednoducho schéma pomenovania, ktorá priamo nesúvisí s príponou $ () funkciu.
     
    Vytváranie prvkov pomocou jQuery
     
    Aj keď môžete s DOM manipulovať pomocou natívnych funkcií JavaScriptu, jQuery to robí oveľa jednoduchšie. Je stále veľmi užitočné dobre porozumieť DOM, ale jQuery prácu s ním robí oveľa príjemnejšou.
      zdieľam    zdieľam      Tweet      E -mail      Skrytý hrdina webových stránok: Pochopenie DOM  
    Učíte sa webdizajnu a potrebujete vedieť viac o objektovom modeli dokumentu? Tu je to, čo potrebujete vedieť o DOM.
    Čítajte ďalej       Súvisiace témy  
       
    • Programovanie
      •  
    • Vývoj webových aplikácií
      •  
    • jQuery
      •  
      O autorovi   Bobby Jack(58 publikovaných článkov)      
    Bobby je technologický nadšenec, ktorý pracoval ako vývojár softvéru väčšinu dvoch desaťročí. Má nadšenie pre hry, pracuje ako editor recenzií v časopise Switch Player a je ponorený do všetkých aspektov online publikovania a webového vývoja.
    Viac od Bobbyho Jacka
    prihlásiť sa ku odberu noviniek
     
    Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
    Kliknutím sem sa prihlásite na odber