jQuery – atrybuty i manipulacja (cz. II)

02.12.2009 - Rafał Polito
TrudnośćTrudność

Zawartość możemy dodawać również przed i po jakimś elemencie. Służą do tego metody after("zawartosc") i before("zawartosc").

Po wywołaniu metod:

1
    $("p").after("<b>Hello</b>");

otrzymamy:

1
<p>jakiś tekst</p><b>Hello</b>

zaś w wyniku poniższego polecenia:

1
    $("p").before("<b>Hello</b>");

otrzymamy:

1
    <b>Hello</b><p>jakiś tekst</p>


Podobnie jak dla metod append("zawartosc") i prepend("zawartosc"), dla metod after i before również istnieją przeciążone metody, przyjmujące jako argument selektor.

Są to:

1
    $("p").insertAfter("b");

które zwróci nam:

1
    <b>Hello</b><p>jakiś tekst</p>


oraz:

1
    $("p").insertBefore("b");

dająca w wyniku:

1
    <p>jakiś tekst</p><b>Hello</b>


Pewnie sobie pomyślisz: "Ok, fajnie dodawać elementy przed i po, ale co, jeśli chcemy jakiś element otoczyć, wstawić w inny element?". Na to też istnieje rozwiązanie w jQuery. Są to metody z rodziny wrap("element").

Załóżmy, że na stronie www mamy kilka akapitów i chcemy je umieścić wewnątrz elementów (dodać akapitom ramkę, tło etc.). Posłużymy się tu metodą wrap("html"). Jako argument możemy podać już istniejący element (podajemy wtedy jego selektor) i zostanie on wtedy sklonowany:

1
    $("p").wrap( $(".okienko") );

otrzymamy wynik:

1
    <div class="okienko">tekst w akapicie</div>


Jako argument możemy też podać element, w którym zostanie osadzony element, który chcemy otoczyć:

1
    $("p").wrap("<div><b></b></div>");

w wyniku powyższego wywołania otrzymamy:

1
    <div><b><p>tekst w akapicie</p></b></div>


Metoda wrap("element") otacza nam każdy element, pasujący do naszego selektora. Możemy jednak zażyczyć sobie, aby wszystkie pasujące elementy zostały otoczone jednym elementem. Na przykład wszystkie newsy na stronie wrzucamy do jednego elementu. Użyjemy w tym celu metody wrapAll("element").

1
    $("div[class=’news’]").wrapAll("<div id='zawartosc'></div>");


Metody wrap("element") i wrapAll("element") otaczają nasze elementy z zewnątrz. Gdy chcemy pogrubić czcionkę to wykorzystujemy metodę wrapInner("element"), która otoczy zawartość naszego elementu wewnątrz. Zaleca się bowiem, aby znaczniki formatujące tekst (kursywa, podkreślenie etc.) zamieszczać wewnątrz akapitu:

1
    $("p").wrapInner("<b></b>");

wynikiem działania tej metody będzie:

1
2
                
    <p><b>tekst w akapicie</b></p>

Warto omówić jeszcze metody do zastępowania jednych elementów drugimi. Przykładowo wszystkie akapity chcemy zamienić na kontenery. Pomoże nam w tym metoda replaceWith("zawartosc"):

1
    $("p").replaceWith("<div>kontener</div>"); 

Metoda replaceWith() ma swoją odmianę, przyjmującą jako argument selektor i działającą w drugą stronę. Tzn. zamiast zastępować element, na którym wywoływana jest metoda replaceWith, elementem podanym w argumencie tej metody, określamy czym chcemy zastąpić elementy podane w argumencie metody replaceAll. Wyniki działania przykładów użycia replaceAll i replaceWith, będą więc takie same.

1
    $("<div>kontener</div>").replaceAll("p");

Działanie operacji klonowania, usuwania i opróżniania znajdziemy w poniższych przykładach.

Klonowanie:

1
2
3
    $("b").clone().prependTo("p");
 
    <b>Hello</b><p>, how are you?</p>

Za pomocą tego kodu sklonujemy pogrubiony tekst Hello i dodamy na początku zawartości wewnątrz akapitu:

1
    <p><b>Hello</b>, how are you?</p>

Usuwanie

Poniższy przykład usunie nam wszystkie akapity na stronie www:

1
    $("p").remove();

Opróżnianie

Zawartość elementu opróżnimy metodą empty():

1
    $("p").empty();

Możemy także stworzyć element za pomocą jQuery, przypisać go do zmiennej i na nim wykonywać dalsze manipulacje. Posługujemy się takim elementem jak zwykłym selektorem:

1
2
3
    var element = $("<p>nowy paragraf</p>);
 
    $(element).wrapInner("<b></b>");
1
    <p><b>nowy paragraf</b></p>

Temat atrybutów i manipulacji możemy uznać za wyczerpany. Następny krok jesteś w stanie wykonać już samodzielnie. Na przykład możesz dowiedzieć się, czym są zdarzenia, jak je przechwytywać i jak wprowadzić interakcję z użytkownikiem Twojej strony www.

2
Twoja ocena: Brak Ocena: 2 (1 ocena)

Copyright © 2008-2010 Wrocławski Portal Informatyczny

design: rafalpolito.com