Kurssiesittely:

jQuery saavuttaa sisällön ja ominaisuudet

jQueryillä on voimakkaat menetelmät HTML-elementtien ja ominaisuuksien käsittelyyn.

jQuery DOM operaatio

jQuery:n erittäin tärkeä osa on kyky käsitellä DOM:ää.

jQuery tarjoaa sarjan DOM:n kanssa liittyviä menetelmiä, mikä helpottaa elementtien ja ominaisuuksien käsittelyä.Vinkki:

DOM = Document Object Model（Dokumenttiobjektipohjainen malli）

”W3C Document Object Model on alustariippumaton ja kielen riippumaton käyttöliittymä, joka mahdollistaa ohjelmien ja skriptien dynaamisen pääsyn ja päivittämisen dokumentin sisältöön, rakenteeseen ja ulkoasuun.”

Hae sisältö - text(), html() ja val()

Kolme yksinkertaista ja hyödyllistä jQuery-metodia DOM-käsittelemiseen:

  • text() - Aseta tai palauta valitun elementin tekstimateriaali
  • html() - Aseta tai palauta valitun elementin sisältö (mukaan lukien HTML-merkit)
  • val() - Aseta tai palauta lomakkeen kentän arvo

Seuraava esimerkki näyttää, miten voit saada sisältöä jQuery text() ja html()-metodeilla:

Esimerkki

$("#btn1").click(function(){
  alert("Teksti: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Kokeile itse

Seuraava esimerkki näyttää, miten voit saada syötteen arvon jQuery val()-metodilla:

Esimerkki

$("#btn1").click(function(){
  alert("Arvo: " + $("#test").val());
});

Kokeile itse

Hae ominaisuus - attr()

jQuery attr()-metodi käytetään ominaisuuksien arvojen saamiseen.

Seuraava esimerkki näyttää, miten voit saada linkin href-ominaisuuden arvon:

Esimerkki

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

Kokeile itse

Seuraavassa luvussa selitetään, miten voit asettaa (muuttaa) sisältöä ja ominaisuuksia.

jQuery HTML viite

Jos haluat tietää täydellisen sisällön jQuery HTML-metodeista, vieraile seuraavassa viitteessä: