jQuery DOM:n käsittely - 1
jQuery DOM:n käsittely
jQuery DOM:n käsittely - 1 on ilmainen jQuery Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/1. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu jQuery Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Metodien johdanto
Hei,
Tähän mennessä olemme nähneet, mihin JQuerya käytetään ja kuinka valitsinta käytetään.
Tutustutaan nyt metodeihin, joiden avulla voimme käsitellä DOM:ia.
text-metodi
text()-metodi
text()-metodilla pääsemme käsiksi HTML-elementin sisältöön.
Elementin sisältö luetaan käyttämällä komentoa $ (selector).text().
Lisäksi text-metodilla voidaan päivittää elementin sisältöä. Uusi sisältö tarvitsee vain välittää text-metodille argumenttina.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Kysymys
html-metodi
html()-metodi
Seuraava metodimme on html().
Kuten sen nimestä voi päätellä, se palauttaa koko elementin eikä vain valitsemamme elementin sisältöä.
Määritetään alle esimerkkinä HTML-elementti.
Määritetään kaksi HTML-elementtiä, joiden id:t ovat base ja target. Tämän jälkeen heti, kun DOM on ladattu.
Kaikki base-elementin HTML-sisältö kopioidaan ja lisätään elementtiin, jonka id on target.
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Attribuuttivalitsin
attr()-metodi
Attribuuttien avulla HTML-elementeille määritetään lisätoimintoja.
Usein haluamme käyttää näiden attribuuttien arvoja Javascript-koodia kirjoittaessamme.
Näissä tapauksissa käytetään attr-metodia.
Opitaan tämä metodi tekemällä alla oleva esimerkki.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Attribuutti
Uusien attribuuttien asettaminen muistuttaa aiemmin oppimiamme text()- ja html()-metodeja.
Välittämällä lukemiseen käyttämällemme attr()-metodille argumentin voimme määrittää kohde-elementille uuden attribuutin.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
Opimme, kuinka attribuutti lisätään;
katsotaan nyt, kuinka olemassa oleva attribuutti poistetaan.
Tähän käytämme removeAttr()-metodia.
Tarkastellaan esimerkkiämme.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));val-metodi
val()-metodi
Lomakkeet ovat välttämättömiä nykyaikaisissa verkkosovelluksissa. Val()-metodilla luemme käyttäjiemme lomake-elementteihin syöttämät tiedot.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Varoitus
Tapahtumien käsittelyä käsittelevässä oppitunnissa opimme kuuntelemaan kutakin syötettyä tietoa ja näyttämään sen span-elementissämme.
Lisätietoa
Input-kentän arvon päivittämiseksi välitämme val-metodille argumentteja, kuten ehkä arvasittekin.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Onnittelut
Onnittelut 🎉
Olemme aloittaneet DOM-manipulaatioiden opiskelun.
Seuraavassa osiossa jatkamme DOM-manipulaatioiden opiskelua jQueryn avulla.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”jQuery DOM:n käsittely - 1” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa jQuery Academy-oppimispolun 3 oppituntia, myös oppitunnin “jQuery DOM:n käsittely - 1”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Mitä opin oppitunnilla ”jQuery DOM:n käsittely - 1”?
jQuery DOM:n käsittely Harjoittelet jQuery Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni jQuery Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin jQuery Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/1.
Kuinka kauan ”jQuery DOM:n käsittely - 1”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä jQuery Academy-oppitunnilla?
Kyllä. Jokainen jQuery Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.