jQuery sadrži moćne metode za promjenu i manipuliranje HTML elementima i atributima.

 

jQuery DOM Manipulacija

Jedan vrlo važan dio jQueryja je mogućnost manipulacije DOM-om.

jQuery dolazi s hrpom metoda povezanih s DOM-om koji olakšavaju pristup elementima i atributima i manipuliraju njima.

DOM = Document Object Model

DOM definira standard za pristup HTML i XML dokumentima:

 

Dohvat sadržaja - text (), html () i val ()

 

 

Tri jednostavne, ali korisne, jQuery metode za DOM manipulaciju su:

 

• text () - Postavlja ili vraća tekstualni sadržaj odabranih elemenata
• html () - Postavlja ili vraća sadržaj odabranih elemenata (uključujući HTML označavanje)
• val () - Postavlja ili vraća vrijednost polja obrasca

 

Sljedeći primjer pokazuje kako dobiti sadržaj pomoću metoda jQuery text () i html ():

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

 

 

Sljedeći primjer pokazuje kako dobiti vrijednost input polja metodom jQuery val ():

 

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

 

Dobivanje atributa - attr()

 

Za dobivanje vrijednosti atributa koristi se jQuery attr() metoda.

 

Sljedeći primjer pokazuje kako dobiti vrijednost atributa href u poveznici:

 

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

Postavljanje sadržaja - text (), html () i val ()

 

 

Za postavljanje sadržaja upotrijebit ćemo iste tri metode s prethodne stranice:

 

• text () - Postavlja ili vraća tekstualni sadržaj odabranih elemenata
• html () - Postavlja ili vraća sadržaj odabranih elemenata (uključujući HTML označavanje)
• val () - Postavlja ili vraća vrijednost polja obrasca

 

Sljedeći primjer pokazuje kako postaviti sadržaj pomoću metoda text (), html () i val ():

 

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

 

 

Povratna funkcija za text (), html () i val ()

Sve tri metode text (), html () i val () također dolaze s funkcijom povratnog poziva.

Funkcija povratnog poziva ima dva parametra: indeks trenutnog elementa na popisu selektiranih elemenata i izvornu (staru) vrijednost. 

Tada vraćate niz koji želite koristiti kao novu vrijednost iz funkcije.

 

 

Sljedeći primjer prikazuje text () i html () s funkcijom povratnog poziva:

 

$("#btn1").click(function(){
  $("#test1").text(function(i, origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i, origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

 

Postavi atribute - attr ()

JQuery attr () metoda se također koristi za postavljanje / promjenu vrijednosti atributa.

 

 

Sljedeći primjer prikazuje kako promijeniti (postaviti) vrijednost atributa href u poveznici:

 

$("button").click(function(){
  $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});

 

Metoda attr () također vam omogućuje postavljanje više atributa istovremeno.

 

Sljedeći primjer pokazuje kako postaviti istovremeno i atribute href i title:

 

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

 

Povratna funkcija za attr ()

Metoda attr () također dolazi s funkcijom povratnog poziva.

Funkcija povratnog poziva ima dva parametra: indeks trenutnog elementa na popisu selektiranih elemenata i vrijednost izvornog (starog) atributa.

Tada vraćate niz koji želite koristiti kao novu vrijednost atributa iz funkcije.

 

 

Sljedeći primjer prikazuje attr () s funkcijom povratnog poziva:

 

$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/";
  });
});