Opi luomaan elementti jQueryssä

Uuden elementin luominen on yksi perustehtävistä, jotka voit suorittaa jQuery JavaScript -kirjastolla. jQueryä käyttämällä tehtävä on paljon yksinkertaisempi kuin vastaava lähestymistapa Document Object Model (DOM) -mallissa. Tulet myös huomaamaan, että se on joustavampi ja ilmeisempi, mitä enemmän käytät jQueryä.

Jotta voit palvella tarkoitusta, sinun on voitava lisätä elementtisi 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 yleisiä JavaScript-toimintoja.
• Se käsittelee ristiinyhteensopivuuden JavaScript-ongelmia eri selainten välillä.

Toinen tavoite huomioi virheitä, mutta se käsittelee myös selainten välisiä toteutuseroja. Molemmat tavoitteet ovat vähemmän tarpeellisia kuin ennen, koska selaimet kehittyvät 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 vaihtokelpoisesti, niissä on hienovarainen ero. Tunniste viittaa kirjaimelliseen tai

 sisällytät HTML-tiedostoon tekstisisällön merkitsemiseksi. Elementti on kulissien takana oleva objekti, joka edustaa merkittyä tekstiä. Ajattele elementtiä DOM vastineeksi HTML-tageille.

Kuinka luoda uusi elementti jQuerylla

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

• Vastaa elementtejä, yleensä sellaisia, jotka ovat jo dokumentissa
• Luo uusia elementtejä
• Suorittaa takaisinsoittotoiminnon, kun DOM on valmis

Kun välität merkkijonon, joka sisältää HTML: n ensimmäisenä parametrina, tämä funktio luo uuden elementin:

$("")

Tämä palauttaa erityisen jQuery-objektin, joka sisältää kokoelman elementtejä. Tässä tapauksessa yksi objekti edustaa "a"-elementtiä, jonka juuri loimme.

Merkkijonon tulee näyttää HTML: ltä erottaakseen tämän toiminnon vastaavista elementeistä. Käytännössä tämä tarkoittaa, että merkkijonon tulee alkaa a: lla <. Et voi lisätä pelkkää tekstiä asiakirjaan tällä menetelmällä.

On tärkeää ymmärtää, että tämä ei lisää elementtiä dokumenttiin, vaan se luo vain uuden elementin, joka on valmis lisättäväksi. Elementti on "liittämätön", vie muistia, mutta ei itse asiassa osa viimeistä sivua – vielä.

Lisää monimutkaisempaa HTML: ää

Dollarifunktio voi itse asiassa luoda useamman kuin yhden elementin. Itse asiassa se voi rakentaa minkä tahansa puun haluamistasi HTML-elementeistä:

$("

yksi
kaksi
kolme
")

Voit myös käyttää tätä muotoa elementin luomiseen määritteillä:

$('')

Attribuuttien asettaminen uudelle elementille

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

kuva = uusi päivämäärä().getHours() > 12? "afternoon.jpg": "aamu.jpg";
$("", { src: valokuva });

Kuinka lisätä elementti

Kun olet luonut uuden elementin, voit lisätä sen dokumenttiin useilla eri tavoilla. jQuery-dokumentaatio kokoaa nämä menetelmät yhteen "manipulointi" -luokka.

Lisää olemassa olevan elementin lapseksi

$("body"). append($("
Hei maailma
"));
$(document.body).append($el);

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

Lisää se olemassa olevan elementin sisarukseksi

$("p.last").after("
Uusi kappale
")
$("ul li: ensimmäinen").before("
uusi kohde
")

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

Vaihda olemassa oleva elementti

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

$('#vanha').replaceWith("
Uusi kappale
");

Kääri olemassa olevan elementin ympärille

Tämä on melko harvinainen käyttötapaus, mutta saatat haluta sisällyttää olemassa olevan elementin uuteen. Sinulla voi olla esimerkiksi a koodi elementti, jonka haluat kääriä a pre:

$('koodi#n1').wrap("
")

Luomasi elementin käyttö

The $() funktio palauttaa jQuery-objektin. Tästä on hyötyä seurantatoimissa:

$el = $("p");
$('body'). append($el);

Huomaa, että jQuery-ohjelmoijat usein nimeävät jQuery-muuttujat johtavalla dollarimerkillä. Tämä on yksinkertaisesti nimeämisjärjestelmä, eikä se liity suoraan $() toiminto.

Elementtien luominen jQuerylla

Vaikka voit muokata DOM: ia käyttämällä alkuperäisiä JavaScript-toimintoja, jQuery tekee siitä paljon helpompaa. On edelleen erittäin hyödyllistä ymmärtää hyvä DOM, mutta jQuery tekee sen kanssa työskentelystä paljon miellyttävämpää.

Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen

Opitko web-suunnittelua ja haluat tietää lisää asiakirjaobjektimallista? Tässä on mitä sinun tulee tietää DOM: sta.

Lue Seuraava

Kirjailijasta