IT TUTORIJALI | jQuery

jQuery - Getters & Setter

jQuery dobijanje ili postavljanje (Get or Set) sadržaja i vrijednosti

Neke jQuery metode mogu se koristiti za dodjeljivanje ili čitanje neke vrijednosti na odabiru. Neke od ovih metoda su: text(), html(), attr() i val(). Kada se te metode pozivaju bez argumenta, to se naziva getter-om, jer dobija (ili čita) vrijednost elementa. Kada se ove metode pozivaju s vrijednošću kao argumentom, naziva se setter, jer postavlja (ili dodjeljuje) tu vrijednost.

jQuery text() metoda

jQuery metoda text() koristi se za dobijanje kombinovanog tekstualnog sadržaja odabranih elemenata, uključujući njihove potomke, ili postavlja tekstualni sadržaj odabranih elemenata.

Dobijanje (Get) sadržaja pomoću metode text()

Sljedeći primjer će vam pokazati kako doći do tekstualnog sadržaja paragrafa:

<script>
$(document).ready(function(){
    // Dobijanje kombinovanih tekstualnih sadržaja svih paragrafa
    $(".btn-one").click(function(){
        var str = $("p").text();
        alert(str);
    });
    
    // Dohvatite tekstualni sadržaj prvog paragrafa
    $(".btn-two").click(function(){
       var str = $("p:first").text();
       alert(str);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dohvatanje (Get) sadržaja teksta elemenata</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn-one").click(function(){
        var str = $("p").text();
        alert(str);
    });
    $(".btn-two").click(function(){
       var str = $("p:first").text();
       alert(str);
    });
    $(".btn-three").click(function(){
       var str = $("p.extra").text();
       alert(str);
    });
});
</script>
</head>
<body>
    <button type="button" class="btn-one">Dohvati tekst svih paragrafa</button>
    <button type="button" class="btn-two">Dohvati tekst prvog paragrafa</button>
    <button type="button" class="btn-three">Dohvati tekst zadnjeg paragrafa</button>
    <p>Ovo je prvi paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
    <p class="extra">Ovo je zadnji paragraf.</p>
</body>
</html>

Napomena!

jQuery metoda text() dohvata vrijednosti svih odabranih elemenata (tj. kombinovani tekst), dok ostali getter-i poput html(), attr() i val() vraća vrijednost samo iz prvog elementa u odabiru.

Postavljanje (Set) sadržaja pomoću metode text()

Sljedeći primjer će vam pokazati kako postaviti tekstualni sadržaj paragrafa:

<script>
$(document).ready(function(){
    // Postavljanje tekstualnog sadržaja na sve paragrafe
    $(".btn-one").click(function(){
        $("p").text("Ovo je neki demo tekst.");
    });
    
    // Postavljanje tekstualnog sadržaja prvog paragrafa
    $(".btn-two").click(function(){
        $("p:first").text("Ovo je neki drugi demo tekst.");
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje (Set) sadržaja na sve elemente</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn-one").click(function(){
        $("p").text("Ovo je neki demo tekst.");
    });
    $(".btn-two").click(function(){
        $("p:first").text("Ovo je neki drugi demo tekst.");
    });
    $(".btn-three").click(function(){
        $("p.empty").text("Ovo je još jedan demo tekst.");
    });
});
</script>
</head>
<body>
    <button type="button" class="btn-one">Postavljanje teksta svih paragrafa</button>
    <button type="button" class="btn-two">Postavljanje teksta prvog paragrafa</button>
    <button type="button" class="btn-three">Postavljanje prazanog tekst paragrafa</button>
    <p>Ovo je prvi testni paragraf.</p>
    <p>Ovo je drugi testni paragraf.</p>
    <p class="empty"></p>
</body>
</html>

Napomena!

Kada se jQuery metode text(), html(), attr() i val() pozovu s vrijednošću kao argumentom, on postavlja tu vrijednost na svaki podudarni element.

jQuery html() metoda

jQuery metoda html() koristi se za dobijanje ili postavljanje HTML sadržaja elemenata.

Dohvatanje (Get) HTML sadržaj pomoću html() metode

Sljedeći primjer će vam pokazat kako dobiti HTML sadržaj elemenata paragrafa kao i kontejner elementa <div>:

<script>
$(document).ready(function(){
    // Dohvatanje HTML sadržaj prvog odabranog paragrafa
    $(".btn-one").click(function(){
        var str = $("p").html();
        alert(str);
    });
    
    // Dohvatanje HTML sadržaj s elementa ID kontejnera
    $(".btn-two").click(function(){
        var str = $("#container").html();
        alert(str);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dohvatanje (Get) sadržaja HTML elementa</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn-one").click(function(){
        var str = $("p").html();
        alert(str);
    });
    $(".btn-two").click(function(){
        var str = $("#container").html();
        alert(str);
    });
});
</script>
</head>
<body>
    <button type="button" class="btn-one">Dohvatiti HTML paragraf</button>
    <button type="button" class="btn-two">Dohvati sadržaj HTML kontejnera</button>
    <div id="container">
        <h1>IT TUTORIJALI!</h1>
        <p>Volim da učim <b>jQuery</b> uz IT TUTORIJALE.</p>
    </div>
</body>
</html>

Napomena!

Ako je odabrano više elemenata html() metoda vraća samo HTML sadržaj prvog elementa iz skupa podudarnih elemenata.

Postavljanje (Set) HTML sadržaj pomoću metode html()

Sljedeći primjer će vam pokazati kako postaviti HTML sadržaj elementa <body>:

<script>
$(document).ready(function(){
    // Postavljanje HTML sadržaj za tijelo dokumenta
    $("button").click(function(){
        $("body").html("<p>IT TUTORIJALI!</p>");
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje (Set) sadržaja  HTML elementa</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("body").html("<p>IT TUTORIJALI!</p>");
    });
});
</script>
</head>
<body>
    <button type="button">Ispiši poruku</button>
</body>
</html>

jQuery attr() metoda

Možete koristiti jQuery metodu attr() da biste dobili vrijednost atributa elementa ili da postavite jedan ili više atributa za odabrani element.

Dobijanje (Get) vrijednosti atributa metodom attr()

Sljedeći primjer će vam pokazati kako dobiti href atribut hiperveze (linka), tj. element <a>, kao i alt atributa elementa <img>:

<script>
$(document).ready(function(){
    // Dobijanje vrijednost atributa href prve odabrane hiperveze (linka)
    $(".btn-one").click(function(){
        var str = $("a").attr("href");
        alert(str);
    });
    
    // Dobijanje vrijednost alt atributa slike s ID-jem sky
    $(".btn-two").click(function(){
        var str = $("img#sky").attr("alt");
        alert(str);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dobijanje (Get) vrijednost atributa elementa</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn-one").click(function(){
        var str = $("a").attr("href");
        alert(str);
    });
    $(".btn-two").click(function(){
        var str = $("img#sky").attr("alt");
        alert(str);
    });
});
</script>
</head>
<body>
    <button type="button" class="btn-one">Dobijanje HREF atributa linka</button>
    <button type="button" class="btn-two">Dobijanje atribut ALT slike </button>
    <p><a href="https://www.ittutorijali.net/">IT TUTORIJALI</a></p>
    <img id="sky" src="/examples/images/sky.jpg" alt="Sunce, nebo, ptice">
</body>
</html>

Napomena!

Ako je odabrano više elemenata, metoda attr() vraća vrijednost atributa prvog elementa iz skupa podudarnih elemenata.

Postavljanje atributa metodom attr()

Sljedeći primjer će vam pokazati kako postaviti označeni atribut potvrdnog okvira (eng. checkbox).

<script>
$(document).ready(function(){
    // Provjeri sve checkboxes
    $("button").click(function(){
        $('input[type="checkbox"]').attr("checked", "checked");
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje (Set) vrijednost atributa elementa</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $('input[type="checkbox"]').attr("checked", "checked");
    });
});
</script>
</head>
<body>
    <p><label><input type="checkbox"></label>Slažem se s uslovima korištenja.</p>
    <button type="button">Potvrdi</button>
</body>
</html>

Metoda attr() takođe vam omogućava istovremeno postavljanje više atributa. Sljedeći primjer će vam pokazati kako postaviti atribut klase i naslova za elemente <img>.

<script>
$(document).ready(function(){
    // Dodavanje atributa klase i naslova svim slikama
    $("button").click(function(){
        $("img").attr({
            "class" : "ram",
            "title" : "IT TUTORIJALI"
        });
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje (Set) višestruki atribut za elemente</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr({
            "class" : "ram",
            "title" : "IT TUTORIJALI"
        });
    });
});
</script>
<style>
    .ram{
        border: 6px solid #000;
    }
</style>
</head>
<body>
    <button type="button">Postavite atribute za sliku</button>
    <p>
        <img src="/examples/images/balloons.jpg" alt="IT TUTORIJALI">
    </p>
</body>
</html>

jQuery metoda val()

jQuery metoda val() uglavnom se koristi za dobijanje ili postavljanje trenutne vrijednosti elemenata HTML obrazca kao što su: <input>, <select> i <textarea>.

Dohvatanje vrijednosti polja obrazaca pomoću metode val()

Sljedeći primjer će vam pokazati kako dobiti vrijednosti kontrola obrazca:

<script>
$(document).ready(function(){
    // Dobijanje vrijednost unosa teksta (text input) s ID-em name
    $("button.get-name").click(function(){
        var name = $('input[type="text"]#name').val();
        alert(name);
    });
    
    // Dobijanje vrijednost textarea s ID-ijem comment
    $("button.get-comment").click(function(){
        var comment = $("textarea#comment").val();
        alert(comment);
    });
    
    // Dobijanje vrijednost okvira (select box) za odabir s ID city
    $("button.get-city").click(function(){
        var city = $("select#city").val();
        alert(city);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dobijanje (Get) vrijednost polja obrazca</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button.get-name").click(function(){
        var name = $("#name").val();
        alert(name);
    });
    $("button.get-comment").click(function(){
        var comment = $("#comment").val();
        alert(comment);
    });
    $("button.get-city").click(function(){
        var city = $("#city").val();
        alert(city);
    });
});
</script>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>Ime:</td>
                <td>
                    <input type="text" id="name">
                </td>
            </tr>
            <tr>
                <td>Komentar:</td>
                <td>
                    <textarea rows="4" cols="30" id="comment"></textarea>
                </td>
            </tr>
            <tr>
                <td>Grad:</td>
                <td>
                    <select id="city">
                        <option>Banja Luka</option>
                        <option>Beograd</option>
                        <option>Zagreb</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
    <p><strong>Note:</strong> Ispunite obrazac i kliknite na dugme da biste dobili vrijednosti.</p>
    <button type="button" class="get-name">Prikaži imena</button>
    <button type="button" class="get-comment">Prikaži komentara</button>
    <button type="button" class="get-city">Prikaži grada</button>
</body>
</html>

Napomena!

Ako je odabrano više elemenata obrazca, metoda val() vraća samo vrijednost prvog elementa iz skupa podudarnih elemenata.

Postavljanje (Set) vrijednosti polja obrazca metodom val()

Sljedeći primjer će vam pokazati kako postaviti vrijednosti kontrola obrazca:

<script>
$(document).ready(function(){
    // Postavljanje vrijednosti svih unosa teksta (text inputs)
    $("button").click(function(){
        var text = $(this).text();
        $('input[type="text"]').val(text);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje vrijednosti polja obrazca</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var text = $(this).text();
        $('input[type="text"]').val(text);
    });
});
</script>
</head>
<body>
    <button type="button">Banja Luka</button>
    <button type="button">Beograd</button>
    <button type="button">Zagreb</button>
    <p><strong>Napomena:</strong> Kliknite dugme da biste postavili vrijednost sljedećeg okvira za unos.</p>
    <p>
        <input type="text">
    </p>
</body>
</html>