Opi luomaan elementti jQueryssä

Opi luomaan elementti jQueryssä

Uuden elementin luominen on yksi perustehtävistä, jonka voit suorittaa jQuery JavaScript -kirjastolla. JQueryn avulla tehtävä on paljon yksinkertaisempi kuin vastaava lähestymistapa asiakirjaobjektimalliin (DOM). Se on myös joustavampi ja ilmeikkäämpi, mitä enemmän käytät jQueryä.





Jotta voit palvella tarkoitusta, sinun on voitava lisätä elementti verkkosivulle. Opi lisäämään uusi luettelokohde tai korvaamaan kappale uudella sisällöllä jQueryn avulla.



Mikä on jQuery?

JQuery -kirjasto on kokoelma JavaScript koodi, jolla on kaksi päätavoitetta:





  • Se yksinkertaistaa tavallisia JavaScript -toimintoja.
  • Se käsittelee ristiriidassa olevat JavaScript-ongelmat eri selainten välillä.

Toinen tavoite koskee vikoja, mutta se käsittelee myös selainten välisiä toteutuseroja. Molemmat tavoitteet ovat vähemmän välttämättömiä kuin aiemmin, koska selaimet paranevat ajan myötä. Mutta jQuery voi silti olla arvokas työkalu.

Mikä on elementti?

Elementtiä kutsutaan joskus tunnisteeksi. Vaikka näitä kahta käytetään usein keskenään, niissä on hieno ero. Tunniste viittaa kirjaimeen

tai



lisäät HTML -tiedostoon tekstisisällön merkitsemiseksi. Elementti on kulissien takana oleva esine, joka edustaa merkittyä tekstiä. Ajattele elementtiä HTML -tagien DOM -vastineena.

Uuden elementin luominen jQueryn avulla

Kuten useimmat jQuery -toiminnot, elementin luominen alkaa dollarin funktiosta, $ () . Tämä on pikakuvake ytimeen jQuery () toiminto. Tällä toiminnolla on kolme eri tarkoitusta:



  • Vastaa elementtejä, yleensä niitä, jotka ovat jo asiakirjassa
  • Luo uusia elementtejä
  • Käynnistää soittotoiminnon, kun DOM on valmis

Kun välität merkkijonon, joka sisältää HTML -koodin ensimmäisenä parametrina, tämä toiminto luo uuden elementin:

$(' ')

Tämä palauttaa erityisen jQuery -objektin, joka sisältää elementtikokoelman. Tässä tapauksessa on vain yksi objekti, joka edustaa juuri luomaamme 'a' -elementtiä.



Voinko käyttää 4gb ja 8gb ram yhdessä

Merkkijonon on näytettävä HTML -muodossa, jotta tämä toiminto voidaan erottaa vastaavista elementeistä. Käytännössä tämä tarkoittaa, että merkkijonon on alettava a: lla < . Et voi lisätä asiakirjaan tavallista tekstiä tällä menetelmällä.

On tärkeää ymmärtää, että tämä ei lisää elementtiä asiakirjaasi, vaan luo vain uuden elementin, jonka voit lisätä. Elementti on 'irrallinen', se vie muistia, mutta ei itse asiassa ole osa viimeistä sivua - vielä.

Lisää monimutkaisempaa HTML -koodia

Dollarin funktio voi itse asiassa luoda useamman kuin yhden elementin. Itse asiassa se voi rakentaa minkä tahansa haluamasi HTML -elementtien puun:

$('
  • one
  • two
  • three
')

Voit myös käyttää tätä muotoa luodaksesi elementin, jolla on määritteet:

$(' my hometown')

Määritteiden asettaminen uudelle elementille

Voit luoda uuden jQuery -elementin ja määrittää sen määritteet ilman, että sinun tarvitsee rakentaa koko HTML -merkkijono itse. Tästä on hyötyä, jos luot attribuuttiarvoja dynaamisesti. Esimerkiksi:

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

Elementin lisääminen

Kun olet luonut uuden elementin, voit lisätä sen asiakirjaan useilla eri tavoilla. JQuery -dokumentaatio kokoaa nämä menetelmät yhteen 'Manipulointi' -luokka .

Lisää olemassa olevan elementin lapseksi

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

Hello, world

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

Voit käyttää tätä menetelmää esimerkiksi lisätäksesi uuden luettelokohteen luettelon loppuun.

Lisää se olemassa olevan elementin sisarukseksi

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

A new paragraph

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

    Tämä on hyvä valinta, jos haluat esimerkiksi lisätä uuden kappaleen kahden muun keskelle.

    Vaihda olemassa oleva elementti

    Voit vaihtaa olemassa olevan elementin äskettäin luotuun käyttämällä korvata() menetelmä:

    $('#old').replaceWith('

    New paragraph

    ');

    Kierrä olemassa olevan elementin ympärille

    Tämä on melko harvinainen käyttötapaus, mutta haluat ehkä liittää olemassa olevan elementin uuteen. Sinulla voi esimerkiksi olla a koodi elementti, jonka haluat kääriä a varten :

    $('code#n1').wrap('
    ')
    Luomasi elementin käyttäminen
     
    The $ () funktio palauttaa jQuery -objektin. Tästä on hyötyä seurantatoimissa:
    $el = $('p');  
    $('body').append($el);
    Huomaa, että sopimuksen mukaan jQuery -ohjelmoijat nimeävät usein jQuery -muuttujat johtavalla dollarimerkillä. Tämä on yksinkertaisesti nimeämismenetelmä, eikä se liity suoraan $ () toiminto.
     
    Elementtien luominen jQueryn avulla
     
    Vaikka voit käsitellä DOM: ää käyttämällä natiivia JavaScript -toimintoja, jQuery helpottaa sen tekemistä. On edelleen erittäin hyödyllistä ymmärtää hyvin DOM, mutta jQuery tekee työskentelystä sen kanssa paljon miellyttävämpää.
      Jaa    Jaa      Tweet      Sähköposti      Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen  
    Opitko web -suunnittelua ja haluat tietää enemmän asiakirjaobjektimallista? Tässä on mitä sinun tarvitsee tietää DOM: stä.
    Lue seuraava       Liittyvät aiheet  
       
    • Ohjelmointi
      •  
    • Verkkokehitys
      •  
    • jQuery
      •  
      Kirjailijasta   Bobby Jack(58 artikkelia julkaistu)      
    Bobby on teknologian harrastaja, joka työskenteli ohjelmistokehittäjänä lähes kaksi vuosikymmentä. Hän on intohimoinen pelaamisesta, työskentelee Switch Editor Magazine -lehden arvostelutoimittajana ja on upotettu kaikkeen verkkojulkaisemiseen ja -kehitykseen.
    Lisää Bobby Jackilta
    tilaa uutiskirjeemme
     
    Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!
    Klikkaa tästä tilataksesi