Alamin Kung Paano Lumikha ng isang Elemento sa jQuery

Alamin Kung Paano Lumikha ng isang Elemento sa jQuery

Ang paglikha ng isang bagong elemento ay isa sa mga pangunahing gawain na maaari mong magawa sa jQuery JavaScript library. Gamit ang jQuery, ang gawain ay mas simple kaysa sa katumbas na diskarte sa Document Object Model (DOM). Mahahanap mo rin itong mas nababaluktot at nagpapahiwatig, mas ginagamit mo ang jQuery.





Upang maghatid ng isang layunin, kakailanganin mong maidagdag ang iyong elemento sa isang web page. Alamin kung paano magdagdag ng isang bagong item sa listahan o palitan ang isang talata ng bagong nilalaman gamit ang jQuery.



Ano ang jQuery?

Ang jQuery library ay isang koleksyon ng JavaScript code na may dalawang pangunahing layunin:





  • Pinapasimple nito ang mga karaniwang pagpapatakbo ng JavaScript.
  • Humahawak ito ng mga isyu sa cross-pagiging magkatugma sa JavaScript sa pagitan ng iba't ibang mga browser.

Ang pangalawang layunin ay nagbibigay ng pansin sa mga bug, ngunit tinutugunan din nito ang mga pagkakaiba sa pagpapatupad sa pagitan ng mga browser. Ang parehong mga layunin ay hindi gaanong kinakailangan kaysa sa dati, habang ang mga browser ay nagpapabuti sa paglipas ng panahon. Ngunit ang jQuery ay maaari pa ring maging isang mahalagang tool.

Ano ang Isang Elemento?

Ang isang elemento ay tinutukoy minsan bilang isang tag. Bagaman ang dalawa ay madalas na ginagamit na mapagpapalit, mayroong isang banayad na pagkakaiba. Ang isang tag ay tumutukoy sa literal

o



isasama mo sa isang HTML file upang markup ang nilalaman ng teksto. Ang isang elemento ay ang bagay na nasa likuran ng eksena na kumakatawan sa markadong teksto. Mag-isip ng isang elemento bilang katapat ng DOM sa mga HTML tag.

Paano Lumikha ng isang Bagong Elemento Gamit ang jQuery

Tulad ng karamihan sa mga pagpapatakbo ng jQuery, ang paglikha ng isang elemento ay nagsisimula sa pag-andar ng dolyar, $ () . Ito ay isang shortcut sa core jQuery () pagpapaandar Ang pagpapaandar na ito ay may tatlong magkakaibang mga layunin, ito:



  • Tumutugma sa mga elemento, karaniwang mga mayroon nang dokumento
  • Lumilikha ng mga bagong elemento
  • Nagpapatakbo ng isang function ng callback kapag handa na ang DOM

Kapag naipasa mo ang isang string na naglalaman ng HTML bilang unang parameter, ang pagpapaandar na ito ay lilikha ng isang bagong elemento:

$(' ')

Nagbabalik ito ng isang espesyal na object ng jQuery na naglalaman ng isang koleksyon ng mga elemento. Sa kasong ito, mayroong isang solong object na kumakatawan sa isang 'a' elemento na ngayon lang namin nilikha.



bakit hindi naihahatid ang aking mga text message

Ang string ay dapat magmukhang HTML upang makilala ang pagkilos na ito mula sa mga tumutugmang elemento. Sa pagsasagawa, nangangahulugan ito na ang string ay dapat magsimula sa a < . Hindi ka maaaring magdagdag ng simpleng teksto sa dokumento gamit ang pamamaraang ito.

Mahalagang maunawaan na hindi ito nagdaragdag ng elemento sa iyong dokumento, lumilikha lamang ito ng isang bagong elemento na handa mong idagdag. Ang elemento ay 'hindi nakakabit', kumukuha ng memorya ngunit hindi talaga bahagi ng panghuling pahina — ngayon pa.

Pagdaragdag ng Higit Pang Komplikadong HTML

Ang pag-andar ng dolyar ay maaaring lumikha ng higit sa isang elemento. Sa katunayan, maaari itong bumuo ng anumang puno ng mga elemento ng HTML na nais mo:

$('
  • one
  • two
  • three
')

Maaari mo ring gamitin ang format na ito upang lumikha ng isang elemento na may mga katangian:

$(' my hometown')

Paano Magtakda ng Mga Katangian sa isang Bagong Elemento

Maaari kang lumikha ng isang bagong elemento ng jQuery at itakda ang mga katangian nito nang hindi kinakailangang bumuo ng buong string ng iyong sarili. Kapaki-pakinabang ito kung bumubuo ka ng mga halaga ng katangian ng katangian. Halimbawa:

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

Paano Magdagdag ng isang Elemento

Kapag nakalikha ka ng isang bagong elemento, maaari mo itong idagdag sa dokumento sa maraming iba't ibang paraan. Ang dokumentasyong jQuery ay nagtitipon ng mga pamamaraang ito nang magkasama sa ilalim ng Kategoryang ‘manipulasyon’ .

Idagdag bilang Anak ng Umiiral na Elemento

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

Hello, world

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

Maaari mong gamitin ang pamamaraang ito, halimbawa, upang magdagdag ng isang bagong item sa listahan sa dulo ng isang listahan.

Idagdag Ito bilang Magkapatid ng Isang Umiiral na Elemento

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

A new paragraph

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

    Ito ay isang mahusay na pagpipilian kung, halimbawa, nais mong magdagdag ng isang bagong talata sa gitna ng dalawang iba pa.

    Palitan ang Umiiral na Elemento

    Maaari mong ipagpalit ang isang mayroon nang elemento para sa isang bagong nilikha gamit ang palitan ng() pamamaraan:

    $('#old').replaceWith('

    New paragraph

    ');

    Ibalot sa Isang Umiiral na Elemento

    Ito ay medyo isang bihirang kaso ng paggamit, ngunit baka gusto mong isama ang isang umiiral na elemento sa isang bago. Halimbawa, maaari kang magkaroon ng isang code elemento na nais mong balutin ng a para sa :

    $('code#n1').wrap('
    ')
    Pag-access sa Elementong Ginawa Nimo
     
    Ang $ () Ang function ay nagbabalik ng isang jQuery object. Kapaki-pakinabang ito para sa mga follow-up na operasyon:
    $el = $('p');  
    $('body').append($el);
    Tandaan na, sa pamamagitan ng kombensiyon, ang mga programmer ng jQuery ay madalas na nagngangalang variable ng jQuery na may nangungunang tanda ng dolyar. Ito ay simpleng pamamaraan ng pagbibigay ng pangalan at hindi direktang nauugnay sa $ () pagpapaandar
     
    Lumilikha ng Mga Elemento Gamit ang jQuery
     
    Bagaman maaari mong manipulahin ang DOM gamit ang mga katutubong pag-andar ng JavaScript, ginagawang mas madali ng jQuery na gawin ito. Napaka kapaki-pakinabang pa rin upang magkaroon ng isang mahusay na pag-unawa sa DOM, ngunit ang jQuery ay ginagawang mas kaaya-aya ang pagtatrabaho kasama nito.
      Magbahagi    Magbahagi      Mag-tweet      Email      Ang Nakatagong Bayani ng Mga Website: Pag-unawa sa DOM  
    Pag-aaral ng disenyo ng web at kailangang malaman nang higit pa tungkol sa Modelong Bagay ng Dokumento? Narito ang kailangan mong malaman tungkol sa DOM.
    Basahin Susunod       Mga Kaugnay na Paksa  
       
    • Programming
      •  
    • Pag-unlad sa Web
      •  
    • jQuery
      •  
      Tungkol sa May-akda   Bobby Jack(58 Mga Artikulo Na-publish)      
    Si Bobby ay isang mahilig sa teknolohiya na nagtrabaho bilang isang developer ng software sa loob ng halos dalawang dekada. Masigasig siya sa paglalaro, nagtatrabaho bilang Review Editor sa Switch Player Magazine, at nahuhulog sa lahat ng aspeto ng online na pag-publish at pag-unlad sa web.
    Higit pa Mula kay Bobby Jack
    Mag-subscribe sa aming newsletter
     
    Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
    Mag-click dito upang mag-subscribe