jQuery aseta ja ominaisuudet

Sisällön asettaminen - text(), html() ja val()

Käytämme kolmea samaa metodia edellisessä luvussa asettaaksemme sisällön:

  • 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 asettaa sisällön text(), html() ja val() -menetelmien avulla:

Esimerkki

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Kokeile itse

text(), html() ja val() -paluutoiminnot

Yllä olevat kolme jQuery-metodia: text(), html() ja val(), omistavat myös paluutoiminnot. Paluutoimintoja kutsutaan kahdella parametrilla: valitun elementtilistan nykyisen elementin indeksi ja alkuperäinen (vanha) arvo. Sitten palautetaan funktiolla uusi arvo, jota haluat käyttää merkkijonona.

Seuraava esimerkki näyttää paluutoiminnon sisältävän text() ja html():

Esimerkki

$("#btn1").click(function(){
  $("#test1").text(function(i, alkuperäinenTeksti){
    palauta "Vanha teksti: " + alkuperäinenTeksti + " Uusi teksti: Hello world!
    (indeksi: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i, alkuperäinenTeksti){
    palauta "Vanha html: " + alkuperäinenTeksti + " Uusi html: Hello <b>world!</b>
    (indeksi: " + i + ")";
  });
});

Kokeile itse

Aseta ominaisuus - attr()

jQuery attr() metodi käytetään myös ominaisuuden arvon asettamiseen tai muuttamiseen.

Seuraava esimerkki näyttää, miten voit muuttaa (asettaa) linkin href-ominaisuuden arvon:

Esimerkki

$("nappi").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Kokeile itse

attr() metodi sallii useiden ominaisuuksien asettamisen samanaikaisesti.

Seuraava esimerkki näyttää, miten voit asettaa href- ja title-ominaisuudet samanaikaisesti:

Esimerkki

$("nappi").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery oppitunti"
  });
});

Kokeile itse

attr() paluutoiminto

jQuery attr() metodi tarjoaa myös paluutoiminnon. Paluutoiminto sisältää kaksi parametria: valitun elementtilistan nykyisen elementin indeksi ja alkuperäinen (vanha) arvo. Sitten palauta funktiossa haluamasi merkkijono.

Seuraava esimerkki näyttää attr() metodin kutsun kanssa olevan paluutoiminnon:

Esimerkki

$("nappi").click(function(){
  $("#w3s").attr("href", function(i, alkuperäinenArvo){
    palauta alkuperäinenArvo + "/jquery";
  });
});

Kokeile itse

jQuery HTML viittauskäsikirja

Jos haluat tietää jQuery HTML-metodien täydellisen sisällön, vieraile seuraavassa viittauskäsikirjassa: