Manipulacja zawartością elementów

Zawartość elementu to inaczej wszystko, co znajduje się między jego znacznikiem otwierającym i zamykającym.

Aby pobrać zawartość elementu użyjemy metody text() bez żadnych parametrów:

1

    var zawartosc = $("p:first").text();

Chcąc zmienić zawartość elementu, możemy podać nową zawartość jako parametr metody text("zawartosc"):

1

    $("p:first").text("nowy <b>gruby</b> tekst");

Nie wszystkie elementy strony www przechowują wartość między znacznikiem otwierającym i zamykającym. Przykładem są elementy typu select lub input. Ich wartość, to wartość atrybutu value. Żeby ją pobrać, użyjemy metody val().

1
2
3
4
5

    <select id="opcje">
        <option value="1">pierwsza</option>
        <option value="2">druga</option>
        <option value="3">trzecia</option>
    </select>

1

    var wybrana_wartosc = $("#opcje").val();

1

    <input value="jakas" type="text">

1

    var wartosc = $("input").val();

Nadawanie wartości odbywa się w identyczny sposób jak w przypadku metody text(). Wartość podajemy jako parametr metody:

1

    $("input").val("jakas wartosc");

Wartość możemy też nadać polom typu select, radio, checkbox.
Nadanie wartości, to wybranie możliwych opcji i ich zaznaczenie.

Pola typu select i checkbox są polami wielokrotnego wyboru. Możemy więc zaznaczyć kilka pól o tej samej nazwie, w obrębie jednego selecta lub kilku chechkboxów. Jeśli chcemy wybrać kilka pól, to otaczamy je nawiasami kwadratowymi, rozdzielając kolejne wartości przecinkami:

1
2
3

    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio1" ]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>
 
    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select><br>
 
    <input name="checkboxname" value="check1" type="checkbox"> check1
    <input name="checkboxname" value="check2" type="checkbox"> check2
    <input name="r" value="radio1" type="radio"> radio1
    <input name="r" value="radio2" type="radio"> radio2

Do elementów możemy również dodawać zawartość. Posłużą nam do tego metody append("zawartosc") oraz prepend("zawartosc"). Argumentami tych metod będzie zawartość, jaką chcemy dodać do elementu.

- metoda append("zawartosc") dodaje zawartość na końcu zawartości elementu

- metoda prepend("zawartosc") dodaje zawartość na początku zawartości elementu:

1
2

    $("p").append("<b>Hello na końcu akapitu</b>");
    $("p").prepend("<b>Hello na początku akapitu</b>");

W jQuery występują też dwie inne odmiany tych metod – appendTo("selektor") i prependTo("selektor").
W ich przypadku, jako argument podajemy selektor elementu, do zawartości którego chcemy dodać zawartość elementu, na którym wywołujemy tę metodę.

1

    $("b").appendTo("p");

Metoda appendTo zwróci nam w wyniku:

1

jakiś tekst<p>to dodajemy</p>

zaś metoda prependTo zwróci nam:

1

    $("b").prependTo("p");

i wygeneruje:

1

<b>to dodajemy</b>jakiś tekst