IT TUTORIJALI | jQuery

jQuery - Selektori

Odabir elemenata pomoću jQuery-ja

JavaScript se najčešće koristi za dobijanje ili izmjenu sadržaja ili vrijednosti HTML elemenata na stranici, kao i za primjenu nekih efekata poput prikaza, skrivanja, animacija itd. ali, prije nego što možete izvršiti bilo koju radnju potrebno je pronaći ili odabrati ciljni HTML element. Odabir elemenata kroz tipični JavaScript pristup mogao bi biti vrlo bolan, ali jQuery ovdje djeluje poput čarolije. Sposobnost jednostavnog i lakog odabira DOM elemenata jedna je od najsnažnijih karakteristika jQuery-ja.

Savjet!

jQuery podržava gotovo sve selektore definisane u najnovijim CSS3 specifikacijama, kao i da ima vlastite prilagođene selektore. Ovi prilagođeni selektori uveliko poboljšavaju mogućnosti odabira HTML elemenata na stranici.

U narednim lekcijama vidjećete neke od uobičajenih načina odabira elemenata na stranici i kako da učinite nešto s njima pomoću jQuery-a.

Odabir elemenata prema ID-u

Pomoću ID selektora možete odabrati jedan element s jedinstvenim ID-ijem na stranici. Na primjer, sljedeći jQuery kod će odabrati i istaknuti element koji ima ID atribut id="mark", kada je dokument spreman za manipulaciju.

<script>
$(document).ready(function(){
    // Istakni elemente koji ima id mark
    $("#mark").css("background", "yellow");
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Selektovanje elementa na osnovu ID-a</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Istakni elemente koji ima id mark
    $("#mark").css("background", "yellow");
});
</script> 
</head>
<body>
    <p id="mark">Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
    <p>Ovo je treći paragraf.</p>
    <p><strong>Napomena:</strong> Vrijednost atributa id mora biti jedinstvena u HTML dokumentu.</p>
</body>
</html>

U gornjem primjeru, $(document).ready() je događaj koji se koristi za sigurnu manipulaciju stranicom pomoću jQuery-a. Kod uključen u ovaj događaj pokrenuće se tek kada DOM stranice bude spreman. O događajima ćete saznati više u narednoj lekciji.

Odabir elemenata prema nazivu klase

Birač klase može se koristiti za odabir elemenata određene klase. Na primjer, sljedeći jQuery kod će odabrati i istaknuti elemente koji imaju atribut klase class="mark".

<script>
$(document).ready(function(){
    // Istakni elemente koji ima klasu mark
    $(".mark").css("background", "yellow");
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Selektovanje elementa na osnovu class-e</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Istakni elemente koji ima klasu mark
    $(".mark").css("background", "yellow");
});
</script>
</head>
<body>
    <p class="mark">Ovo je paragraf.</p>
    <p class="mark">Ovo je drugi paragraf.</p>
    <p>Ovo je treći paragraf.</p>
</body>
</html>

Odabir elemenata po imenu

Birač elemenata može se koristiti za odabir elemenata na osnovu imena elementa. Na primjer, sljedeći jQuery kod će odabrati i istaknuti sve paragrafe, tj. <p> elemente dokumenta.

<script>
$(document).ready(function(){
    // Istakni paragrafe elemenata p
    $("p").css("background", "yellow");
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Selektovanje elementa po imenu</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Istakni paragrafe elemenata p
    $("p").css("background", "yellow");
});
</script>
</head>
<body>
    <h1>Ovo je naslov</h1>
    <p>Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
    <div>Ovo je neki div element.</div>
</body>
</html>

Odabir elemenata prema atributu

Selektor atributa možete koristiti za odabir elementa pomoću jednog od njegovih HTML atributa, kao što je ciljni atribut linka ili atribut tipa unosa itd. Sljedeći jQuery kod će odabrati i istaknuti sve unose teksta, tj. </p>input> elemente koji sadrže type="text".

<script>
$(document).ready(function(){
    // Istakni paragrafe elemenata
    $('input[type="text"]').css("background", "yellow");
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Selektovanje elmenata na osnovu atributa</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Istakni paragrafe elemenata
    $('input[type="text"]').css("background", "yellow");
});
</script>
</head>
<body>
    <form>
        <label>Ime: <input type="text"></label>
        <label>Lozinka: <input type="password"></label>
        <input type="submit" value="Prijavi se">
    </form>
</body>
</html>

Odabir elemenata pomoću CSS selektora

Takođe možete kombiniovati CSS selektore kako biste svoj izbor učinili još preciznijim. Na primjer, možete kombinovati selektor klase sa selektorom elemenata da biste pronašli elemente u dokumentu koji ima određeni tip i klasu.

<script>
$(document).ready(function(){
    // Označite samo elemente paragrafa sa klasom mark
    $("p.mark").css("background", "yellow");
  
    // Označi sam span elemente unutra elemenata sa atributom ID mark
    $("#mark span").css("background", "yellow");
  
    // Označi elemente unutar ul elemenata
    $("ul li").css("background", "red");
  
    // Označi li elemente samo unutar ul elemeta sa id oznakom mark
    $("ul#mark li").css("background", "yellow");
  
    // Označi li elemente iunutar ul elementa sa klasom mark
    $("ul.mark li").css("background", "green");
  
    // Označi sve elemente sa (target blank) oznakom
    $('a[target="_blank"]').css("background", "yellow");
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Odabir elemenata pomoću CSS selektora</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Označite samo elemente paragrafa sa klasom mark
    $("p.mark").css("background", "yellow");
  
    // Označi sam span elemente unutra elemenata sa atributom ID mark
    $("#mark span").css("background", "yellow");
  
    // Označi elemente unutar ul elemenata
    $("ul li").css("background", "red");
  
    // Označi li elemente samo unutar ul elemeta sa id oznakom mark
    $("ul#mark li").css("background", "yellow");
  
    // Označi li elemente iunutar ul elementa sa klasom mark
    $("ul.mark li").css("background", "green");
  
    // Označi sve elemente sa (target blank) oznakom
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
</head>
<body>
    <p>Ovo je paragraf.</p>
    <p class="mark">Ovo je drugi paragraf.</p>
    <p>Ovo je treći paragraf.</p>
    <ul>
        <li>Prvi element liste.</li>
        <li>Drugi element liste.</li>
        <li>Treći element liste.</li>
    </ul>
    <ul id="mark">
        <li>Prvi element liste</li>
        <li>Drugi <span>element liste</span></li>
        <li>Treći element liste.</li>
    </ul>
    <ul class="mark">
        <li>Prvi element liste</li>
        <li>Drugi element liste</li>
        <li>Treći element liste</li>
    </ul>
    <p>Idi na sajt: <a href="https://www.ittutorijali.net/" target="_blank">Početna strana</a></p>
</body>
</html>

jQuery Prilagođeni selektor

Pored CSS definisanih selektora, jQuery nudi vlastiti prilagođeni selektor za dalje poboljšanje mogućnosti odabira elemenata na stranici.

<script>
$(document).ready(function(){
    // Označite redove tabele koji se pojavljuju na neparnim mjestima
    $("tr:odd").css("background", "yellow");
  
    // Označite redove tabele koji se pojavljuju na parnim mjestima
    $("tr:even").css("background", "orange");
  
    // Istaknite element prvog paragrafa
    $("p:first").css("background", "red");
  
    // Istaknite element zadnjeg paragrafa
    $("p:last").css("background", "green");
  
    // Označi sve input elemente sa type text unutar forme
    $("form :text").css("background", "purple");
  
    // Označi sve input elemente sa type password unutar forme
    $("form :password").css("background", "blue");
  
    // Označi sve input elemente sa type submit unutar forme
    $("form :submit").css("background", "violet");
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Prilagođeni selektor</title>
<style>
    /* Neki prilagođeni stil */
    *{
        padding: 5px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Označite redove tabele koji se pojavljuju na neparnim mjestima
    $("tr:odd").css("background", "yellow");
  
    // Označite redove tabele koji se pojavljuju na parnim mjestima
    $("tr:even").css("background", "orange");
  
    // Istaknite element prvog paragrafa
    $("p:first").css("background", "red");
  
    // Istaknite element zadnjeg paragrafa
    $("p:last").css("background", "green");
  
    // Označi sve input elemente sa type text unutar forme
    $("form :text").css("background", "purple");
  
    // Označi sve input elemente sa type password unutar forme
    $("form :password").css("background", "blue");
  
    // Označi sve input elemente sa type submit unutar forme
    $("form :submit").css("background", "violet");
});
</script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>No.</th>
                <th>Ime</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Miloš Mihaljica</td>
                <td>milosmihaljica@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Marko Marković</td>
                <td>markomarkovic@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ivana Jović</td>
                <td>ivanajovic@mail.com</td>
            </tr>
        </tbody>
    </table>
    <p>Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf</p>
    <p>Ovo je treći paragraf.</p>
    <form>
        <label>Ime: <input type="text"></label>
        <label>Lozinka: <input type="password"></label>
        <input type="submit" value="Prijavi se">
    </form>
</body>
</html>