Manipulacja DOM za pomocą jQuery

drzewo DOMten drzewo DOM to hierarchiczna organizacja treści naszego dokumentu HTMLJest to bardzo przydatne przy identyfikowaniu różnych elementów zawartych we wspomnianym dokumencie, ponieważ dzięki unikalnym identyfikatorom możemy przypisać różne nazwy strukturom, które pomimo podobnych etykiet mają inny cel.
W przeszłości problem polegał na tym, że nie można było łatwo przejść przez drzewo DOM w czasie rzeczywistym, ponieważ uciążliwe procedury i funkcje musiały być tworzone w JavaScript, jednak wszystko to zmieniło się wraz z pojawieniem się jQuery. Ramy te pomogły zapewnić podejście do korzystania z JavaScript dla nie-ekspertów sprawiło to, że jego popularność znów wzrosła.
Jedną z najciekawszych rzeczy, która może wydawać się bardzo skomplikowana, jest wybranie dzieci elementuMówiąc o strukturze hierarchicznej, możemy mówić o rodzinie, w której ojciec jest najwyższym elementem, a jego dzieci są elementami, które są pod jego płaszczem lub opieką.
Powiedzmy na przykład, że mamy nieuporządkowaną listę lub element , logiczne jest myślenie, że ich dzieci są żywiołami które może zawierać, jeśli chcemy wybrać element Konkretna lista może wydawać się bardzo złożonym zadaniem, ale z jQuery możemy to osiągnąć w bardzo prosty i czysty sposób.
MetodyAby to zrobić, musimy tylko nadać unikalny identyfikator naszemu elementowi nadrzędnemu, a następnie wywołać metodę na jego selektorze dzieci (), dzięki temu uzyskamy pozycję, na którą możemy iść metodą każdy () każde z jego dzieci.
Zobaczmy w poniższym kodzie mały przykład tego, o czym mówimy:

 Manipulacja DOM za pomocą JQuery

Syn 1
Syn 2
Syn 3

Spróbować 

Przede wszystkim zaczynamy od włączenia jQuery z CDN oficjalne, dzięki temu nie musimy przechowywać pliku z kodem źródłowym na naszym komputerze, a więc z przeglądarką i połączeniem z Internet możemy użyć tego przykładu.
Następnie tworzymy mały skrypt, w którym wskazujemy, że po kliknięciu w element o id Początek kod wewnątrz jest wykonywany.
Kod, który ma zostać wykonany, po prostu wyraża, że ​​element o identyfikatorze musi zostać przeszukany tata i do tego selektora stosujemy metodę dzieci () zlokalizować swoje dzieci i wreszcie za pomocą metody każdy () Przechodzimy przez każdy z nich, w przypadku kodu są trzy, które pozwolą nam odbyć podróż i to powinno nam pokazać tekst, który zawiera każdy z nich. Zobaczmy, jak powyższy kod działa w naszej przeglądarce:

Po kliknięciu przycisku spróbować widzimy pierwszy Alarm:

POWIĘKSZAĆ

Jeśli będziemy kontynuować zamykanie alertów, zobaczymy wszystkie elementy potomne zawarte w strukturze hierarchicznej:

POWIĘKSZAĆ

Jak widzieliśmy, obsługa elementów w strukturze naszej strony wcale nie jest skomplikowana, to tylko mały przykład, który daje nam otwarte usta na to, co będziemy nadal widzieć w tym samouczku.
Chociaż znajdowanie elementów potomnych jest całkiem przydatne, istnieje metoda, która pozwala nam na bardziej bezpośrednie przeszukiwanie elementów iść, fale Lekcje. Odwołujemy się do metody znajdować (), ta metoda znajdzie wszystkie dopasowania elementów podrzędnych selektora, który ją wywołuje.
Dzięki temu możemy mieć świetną i zadzwoń znajdować () na nim zlokalizować klasy lub w szczególności id, z którym przechodzimy do następnego punktu.
Style wstrzykiwaniaPo znalezieniu żądanej pozycji w SŁOŃCE, wiele razy nie chcemy drukować jego treści, jeśli nie podkreślimy go w jakiś sposób, ciekawym sposobem jest dodanie stylu do wspomnianego elementu, pozwoli nam to manipulować CSS naszej strony pośrednio i aby móc wyróżnić na niej ważne elementy, dzięki czemu możemy zobaczyć coś bardziej dynamicznego w naszym dokumencie HTML.
Zobaczmy w poniższym kodzie, jak zaimplementujemy użycie metody znajdować () a potem styl wtrysku na znalezionych elementach, w ten sposób możemy zbliżyć się do czegoś, co możemy dać przydatne w prawdziwym życiu:

 Manipulacja DOM za pomocą JQuery

Syn 1
Syn 2
Syn 3

Spróbować 

W tym kodzie, jeśli spojrzymy, mamy coś bardzo podobnego do poprzedniej sztuczki, zmieniliśmy to, że w pierwszej kolejności zawartość etykiety tutaj zamiast przechodzić przez dzieci elementu, używamy metody znajdować () zlokalizować element z klasą atrakcja i do tego elementu metodą CSS () Zamierzamy wstrzyknąć do niego style, w tym przypadku ustawimy go jako czerwony kolor tła.
Zobaczmy, jak to wygląda w naszej przeglądarce po kliknięciu przycisku spróbować:

Tak jak udało nam się zlokalizować dziecko elementu, tak możemy osiągnąć efekt w odwrotnym sensie hierarchii, czyli od synu, możemy zlokalizować ojca. Jest to bardzo przydatne w długich listach, które są generowane dynamicznie, ponieważ w ten sposób możemy wyróżnić lub wykorzystać rodziców zgodnie z naszymi potrzebami.
Metoda rodziców ()Do tego mamy metodę rodzice () w podobny sposób do dzieci () lokalizuje rodzica selektora, który jest wywoływany. Jeśli dodamy do tego metodę each(), wprowadzimy całe dziedziczenie elementu, na przykład jeśli jest to a przyniesiemy żywioł a jeśli pójdziemy dalej w hierarchii do elementu i tak dalej, aż dotrzemy do elementu, ponieważ według hierarchii wszystkie z nich są rodzicami przez sposób, w jaki są zawarte.
Zobaczmy w poniższym kodzie, jak możemy zrobić skrypt za pomocą jQuery co pozwala nam osiągnąć ten cel pokazania wszystkim rodzicom wybranego przez nas pierwiastka:

 Manipulacja DOM za pomocą JQuery

Syn 1
Syn 2
Syn 3

Spróbować 

Struktura jest bardzo podobna do poprzednich przykładów, jednak tutaj dokonujemy zmiany, tym razem używamy klasy atrakcja jako selektor i stosujemy metodę rodzice () a następnie za pomocą każdego () możemy przejść przez hierarchię od wewnątrz na zewnątrz.
Zobaczmy, jak wygląda powyższy kod, gdy uruchomimy go w naszej przeglądarce:

POWIĘKSZAĆ

Podobnie jak w poprzednim przykładzie, o ile zamykamy Alerty zobaczymy wszystkich rodziców elementu, dopóki nie dojdziemy do HTML.
Poprzednia sztuczka pomaga nam ustalić drzewo genealogiczne elementu, być może pomoże nam w debugowaniu naszego HTML, ale co się stanie, jeśli chcemy uzyskać konkretnego rodzica, na przykład, jeśli mamy kilka wpisów, ale chcemy, aby rodzic jednego z nich był podświetlony.
Nie powinniśmy się martwić, w tym przypadku mamy metodę rodziceDo (), dzięki temu możemy określić punkt przylotu i możemy wykonać Wstrzyknięcie HTML Aby wyróżnić cały blok, zobaczmy następujący kod, w którym zastosowaliśmy tę wiedzę:

 Manipulacja DOM za pomocą JQuery

Syn 1
Syn 2
Syn 3

Spróbować 

Jeśli zauważymy, że ten kod jest niewielką odmianą poprzedniego, główna zmiana następuje w wywołaniu metody, którą właśnie wyjaśniliśmy rodziceDo () do którego przeszliśmy div, w którym zakończy się wyszukiwanie elementów nadrzędnych selektora, na który wpływamy.
Aby pokazać, że wszystko działa, wstrzyknęliśmy trochę HTML Aby pokolorować zaznaczoną sekcję na czerwono, zobaczmy, jak to wygląda w naszej przeglądarce po kliknięciu spróbować:

Widzimy wtedy, że tylko sekcja z elementem div jest zaznaczona na czerwono, co pokazuje, że zatrzymaliśmy wyszukiwanie rodzica w określonym elemencie, nawet mając bezpośredniego rodzica, takiego jak element co pokazuje nam moc przeszukiwania drzewo DOM.
Na tym zakończyliśmy nasz samouczek, jest to tylko mała demonstracja całej mocy jQuery manipulować SŁOŃCE z naszego HTML, ważne jest to, że musimy dużo ćwiczyć i bardzo dobrze czytać dokumentację, ponieważ dzięki niej będziemy mogli pozyskać dodatkową wiedzę i zasoby, aby móc zwiększać nasz poziom rozwoju.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt