Manipulacja DOM-em

Manipulacja DOM-em w jQuery to proces wykorzystujący wiele metod, które umożliwiają dodawanie, usuwanie i modyfikowanie elementów HTML na stronie internetowej. Metody te są wywoływane na obiektach jQuery, które reprezentują elementy HTML.

Oto kilka przykładów użycia metod jQuery:

Dodawanie elementu HTML

Aby dodać nowy element HTML na stronie, użyjemy metody append() . Na przykład, aby dodać nowy paragraf na końcu diva z id "moj_div", użyjemy:

										
$( "#moj_div" ).append( "<p> to paragraf </p>" );

Usuwanie elementu HTML

Aby usunąć element HTML ze strony, użyjemy metody remove() . Na przykład, aby usunąć div z id "moj_div", użyjemy:

										
$( "#moj_div" ).remove();

Zmiana stylu elementu HTML

Aby zmienić styl elementu HTML, użyjemy metody css() . Na przykład, aby zmienić kolor tła diva z id "moj_div" na czerwony, użyjemy:

										
$( "#moj_div" ).css( "background-color", "red" );

Zmiana tekstu elementu HTML

Aby zmienić tekst elementu HTML, użyjemy metody text() . Na przykład, aby zmienić tekst paragrafu z id "moj_paragraf" na "Nowy tekst", użyjemy:

										
$( "#moj_paragraf" ).text( "Nowy tekst" );

Wyszukiwanie elementów HTML

Aby wyszukać elementy HTML na stronie, użyjemy metody find() . Na przykład, aby wyszukać wszystkie linki w divie z id "moj_div", użyjemy:

										
$( "#moj_div" ).find( "a" );

Modyfikacja zawartości elementu

Aby zmienić zawartość elementu HTML, użyjemy metody html() . Na przykład, aby zmienić tekst w elemencie z id "moj_div" na "Nowy tekst", użyjemy:

										
$( "#moj_div" ).html( "Nowy tekst" );

Dodawanie klasy CSS do elementu

Aby dodać klasę CSS do elementu HTML, użyjemy metody addClass() . Na przykład, aby dodać klasę "kolorowy" do diva z id "moj_div", użyjemy:

										
$( "#moj_div" ).addClass( "kolorowy" );

Usuwanie klasy CSS z elementu

Aby usunąć klasę CSS z elementu HTML, użyjemy metody removeClass() . Na przykład, aby usunąć klasę "kolorowy" z diva z id "moj_div", użyjemy:

										
$( "#moj_div" ).removeClass( "kolorowy" );

Modyfikacja atrybutu HTML

Aby zmienić wartość atrybutu HTML elementu, użyjemy metody attr() . Na przykład, aby zmienić wartość atrybutu "href" w linku z id "moj_link" na "https://www.google.com", użyjemy:

										
$( "#moj_link" ).attr(

"href", "https://www.google.com" );

Obsługa zdarzeń

Aby dodać funkcję obsługi zdarzeń do elementu HTML, użyjemy metody on() . Na przykład, aby wywołać funkcję po kliknięciu przycisku z id "moj_przycisk", użyjemy:

										
$( "#moj_przycisk" ).on( "click", function() {
  alert( "Kliknięto przycisk" );
});

Notatka

To tylko kilka przykładów użycia metod jQuery. Biblioteka ta oferuje wiele innych metod i funkcji, które pozwalają na dokładniejszą kontrolę nad elementami HTML na stronie.