Uzziniet, kā izveidot elementu jQuery

Uzziniet, kā izveidot elementu jQuery

Jauna elementa izveide ir viens no pamata uzdevumiem, ko varat paveikt, izmantojot jQuery JavaScript bibliotēku. Izmantojot jQuery, uzdevums ir daudz vienkāršāks nekā līdzvērtīgā pieeja ar dokumenta objekta modeli (DOM). Jūs arī atradīsit to elastīgāku un izteiksmīgāku, jo vairāk izmantosit jQuery.





Lai kalpotu mērķim, jums ir jāspēj pievienot savu elementu tīmekļa lapai. Uzziniet, kā pievienot jaunu saraksta vienumu vai aizstāt rindkopu ar jaunu saturu, izmantojot jQuery.



Kas ir jQuery?

JQuery bibliotēka ir kolekcija JavaScript kods ar diviem galvenajiem mērķiem:





  • Tas vienkāršo parastās JavaScript darbības.
  • Tas risina savstarpējas saderības JavaScript problēmas starp dažādām pārlūkprogrammām.

Otrais mērķis ir kļūdu novēršana, taču tas arī risina atšķirības starp pārlūkprogrammām. Abi mērķi ir mazāk nepieciešami nekā agrāk, jo pārlūkprogrammas laika gaitā uzlabojas. Bet jQuery joprojām var būt vērtīgs rīks.

Kas ir elements?

Elementu dažreiz sauc par tagu. Lai gan abus bieži izmanto savstarpēji aizvietojami, pastāv neliela atšķirība. Tags attiecas uz burtu

vai



jūs iekļaujat HTML failā, lai iezīmētu teksta saturu. Elements ir aizkulišu objekts, kas attēlo iezīmēto tekstu. Iedomājieties elementu kā DOM ekvivalentu HTML tagiem.

Kā izveidot jaunu elementu, izmantojot jQuery

Tāpat kā vairums jQuery darbību, elementa izveide sākas ar dolāra funkciju, $ () . Šis ir īsceļš uz kodolu jQuery () funkciju. Šai funkcijai ir trīs atšķirīgi mērķi:



  • Atbilst elementiem, parasti tiem, kas jau ir dokumentā
  • Veido jaunus elementus
  • Palaiž atzvanīšanas funkciju, kad DOM ir gatavs

Ja nododat virkni, kuras pirmais parametrs ir HTML, šī funkcija izveidos jaunu elementu:

$(' ')

Tas atgriež īpašu jQuery objektu, kurā ir elementu kolekcija. Šajā gadījumā ir viens objekts, kas attēlo tikko izveidotu elementu “a”.



Vai varat skatīties netflix uz slēdža?

Virknei jāizskatās kā HTML, lai atšķirtu šo darbību no atbilstošajiem elementiem. Praksē tas nozīmē, ka virknei jāsākas ar a < . Izmantojot šo metodi, dokumentam nevar pievienot vienkāršu tekstu.

Ir svarīgi saprast, ka tas nepievieno elementu jūsu dokumentam, bet tikai izveido jaunu elementu, kas ir gatavs pievienošanai. Elements ir “nepievienots”, aizņem atmiņu, bet faktiski nav daļa no pēdējās lapas.

Sarežģītāka HTML pievienošana

Dolāra funkcija faktiski var izveidot vairāk nekā vienu elementu. Faktiski tas var izveidot jebkuru vēlamo HTML elementu koku:

$('
  • one
  • two
  • three
')

Varat arī izmantot šo formātu, lai izveidotu elementu ar atribūtiem:

$(' my hometown')

Kā iestatīt atribūtus jaunam elementam

Jūs varat izveidot jaunu jQuery elementu un iestatīt tā atribūtus, pats neizveidojot pilnu HTML virkni. Tas ir noderīgi, ja atribūtu vērtības ģenerējat dinamiski. Piemēram:

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

Kā pievienot elementu

Kad esat izveidojis jaunu elementu, varat to pievienot dokumentam vairākos dažādos veidos. JQuery dokumentācija apkopo šīs metodes sadaļā Kategorija “manipulācijas” .

Pievienot kā esoša elementa bērnu

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

Hello, world

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

Šo metodi varat izmantot, piemēram, lai saraksta beigās pievienotu jaunu saraksta vienumu.

Pievienojiet to kā esoša elementa brāli

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

A new paragraph

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

    Šī ir laba izvēle, ja, piemēram, vēlaties pievienot jaunu rindkopu divu citu vidū.

    Nomainiet esošo elementu

    Varat nomainīt esošu elementu pret jaunizveidotu, izmantojot aizvietot ar() metode:

    $('#old').replaceWith('

    New paragraph

    ');

    Aptiniet apkārt esošam elementam

    Tas ir diezgan reti sastopams gadījums, taču, iespējams, vēlēsities esošu elementu iekļaut jaunā. Piemēram, jums var būt a kods elements, kuru vēlaties ietīt a priekš :

    $('code#n1').wrap('
    ')
    Piekļuve jūsu izveidotajam elementam
     
    The $ () funkcija atgriež jQuery objektu. Tas ir noderīgi turpmākajām darbībām:
    $el = $('p');  
    $('body').append($el);
    Ņemiet vērā, ka pēc vienošanās jQuery programmētāji bieži nosauc jQuery mainīgos ar vadošo dolāra zīmi. Šī ir vienkārši nosaukšanas shēma un nav tieši saistīta ar $ () funkciju.
     
    Elementu izveide, izmantojot jQuery
     
    Lai gan jūs varat manipulēt ar DOM, izmantojot vietējās JavaScript funkcijas, jQuery atvieglo to. Joprojām ir ļoti noderīgi labi izprast DOM, taču jQuery padara darbu ar to daudz patīkamāku.
      Kopīgot    Kopīgot      Čivināt      E -pasts      Tīmekļa vietņu slēptais varonis: izpratne par DOM  
    Vai jūs apgūstat tīmekļa dizainu un vēlaties uzzināt vairāk par dokumenta objekta modeli? Lūk, kas jums jāzina par DOM.
    Lasīt Tālāk       Saistītās tēmas  
       
    • Programmēšana
      •  
    • Web izstrāde
      •  
    • jQuery
      •  
      Par autoru   Bobijs Džeks(58 raksti publicēti)      
    Bobijs ir tehnoloģiju entuziasts, kurš gandrīz divus gadu desmitus strādāja par programmatūras izstrādātāju. Viņš aizraujas ar spēlēm, strādā par atsauksmju redaktoru žurnālā Switch Player un ir iedziļinājies visos tiešsaistes publicēšanas un tīmekļa izstrādes aspektos.
    Vairāk no Bobija Džeka
    Abonējiet mūsu biļetenu
     
    Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
    Noklikšķiniet šeit, lai abonētu