Efektywne techniki przemieszczania się po DOM
Proszę opanować metody takie jak .closest(), .siblings(), .find() i .parentsUntil(), aby efektywnie poruszać się po drzewie DOM i unikać wąskich gardeł wydajnościowych.
Efektywne techniki przemieszczania się po DOM to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.
Poruszanie się po drzewie DOM
Witamy! W tej lekcji opanuje Pan lub opanuje Pani wydajne techniki poruszania się po modelu obiektowym dokumentu (DOM).
DOM przypomina drzewo genealogiczne elementów strony internetowej. Zrozumienie sposobu jego przemierzania pozwala precyzyjnie wybierać elementy, nawet bez bezpośrednich identyfikatorów czy klas.
- Traverse: przemieszczać się lub przechodzić w poprzek albo przez coś.
- DOM: wewnętrzna reprezentacja struktury HTML strony w przeglądarce.
Wyszukiwanie elementów potomnych za pomocą .find()
Metoda .find() idealnie nadaje się do wyszukiwania elementów potomnych. Przeszukuje *wnętrze* aktualnie wybranych elementów w poszukiwaniu pasujących elementów.
Można wyobrazić ją sobie jako wyszukiwanie konkretnych przedmiotów w określonym pudełku. Jest bardzo przydatna do zawężania wyników wyszukiwania.
- Składnia:
$(selector).find(filterSelector) - Zwraca: nowy obiekt jQuery zawierający znalezione elementy potomne.
.find() w praktyce
Wyszukajmy wszystkie elementy listy (<li>) wewnątrz określonej listy nieuporządkowanej (<ul>).
Uruchom kod i zobacz, które elementy otrzymają zielone tło!
<div id="container">
<ul id="myList">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<p>Some other text</p>
<ul id="anotherList">
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all <li> elements within #myList
$('#myList').find('li').css('background-color', 'lightgreen');
// You can also chain with specific selectors
$('#myList').find('.active').css('font-weight', 'bold');
});
</script>Przechodzenie w górę za pomocą .closest()
Czasami trzeba znaleźć element nadrzędny (rodzica, dziadka itd.) danego elementu. Metoda .closest() służy właśnie do tego.
Rozpoczyna od bieżącego elementu i przechodzi *w górę* drzewa DOM, zwracając *pierwszy* element nadrzędny pasujący do podanego selektora.
- Składnia:
$(selector).closest(filterSelector) - Zwraca: obiekt jQuery zawierający jeden najbliższy element nadrzędny.
.closest() w praktyce
Wyobraźmy sobie, że klika Pan lub klika Pani przycisk głęboko zagnieżdżony w strukturze. Chce Pan lub chce Pani znaleźć jego główny kontener. .closest() idealnie się do tego nadaje.
Kliknij poniższy przycisk, aby wyróżnić jego najbliższy element nadrzędny <div>.
<div class="grandparent">
<div class="parent">
<p>Some text here</p>
<button id="myButton">Click Me</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
// Find the closest ancestor div and add a border
$(this).closest('div').css('border', '2px solid blue');
});
});
</script>Wyszukiwanie elementów rodzeństwa za pomocą .siblings()
Elementy znajdujące się na tym samym poziomie drzewa DOM nazywa się elementami „rodzeństwa”. Metoda .siblings() pomaga wybrać wszystkie takie elementy.
Wyszukuje wszystkie elementy mające tego samego rodzica co bieżący element, *z wyłączeniem* samego bieżącego elementu.
- Składnia:
$(selector).siblings(filterSelector) - Zwraca: nowy obiekt jQuery zawierający wszystkie elementy rodzeństwa.
.siblings() w praktyce
Wyróżnijmy wszystkie elementy rodzeństwa określonego elementu listy po jego kliknięciu. Jest to przydatne w przypadku interaktywnych list lub menu.
Kliknij dowolny element listy, aby zobaczyć, jak zmienia się kolor jego rodzeństwa!
<ul id="menu">
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#menu li').on('click', function() {
// Remove highlight from previously selected siblings
$('#menu li').css('background-color', '');
// Highlight the clicked item's siblings
$(this).siblings().css('background-color', 'lightyellow');
// Highlight the clicked item itself (optional)
$(this).css('background-color', 'lightblue');
});
});
</script>Przechodzenie w górę za pomocą .parentsUntil()
Co zrobić, jeśli chce Pan lub chce Pani wybrać *wiele* elementów nadrzędnych, ale zakończyć w określonym miejscu? Właśnie wtedy przydaje się .parentsUntil().
Ta metoda przechodzi w górę drzewa DOM, wybierając wszystkie elementy nadrzędne bieżącego elementu, *aż do* elementu wskazanego przez selektor. Sam element „zatrzymujący” nie jest uwzględniany.
- Składnia:
$(selector).parentsUntil(stopSelector, filterSelector) - Zwraca: obiekt jQuery z wybranymi elementami nadrzędnymi.
.parentsUntil() w praktyce
Mamy głęboko zagnieżdżoną strukturę. Wybierzmy wszystkie elementy nadrzędne elementu <span> aż do napotkania określonego elementu <div class="container">.
Uruchom ten przykład, aby zobaczyć, które elementy otrzymają obramowanie. Zwróć uwagę, że sam element div „container” zostanie pominięty!
<div class="body-wrapper">
<div class="container">
<div class="row">
<section>
<article>
<p>Hello <span>World!</span></p>
</article>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all parents of 'span' until the '.container' div
$('span').parentsUntil('.container').css('border', '1px dashed orange');
});
</script>Szybkie sprawdzenie
Element <img> jest zagnieżdżony w elemencie <div class="gallery-item">, który znajduje się wewnątrz elementu <div class="gallery-row">. Jeśli wybierze Pan lub wybierze Pani element <img>, której metody jQuery użyje Pan lub użyje Pani, aby uzyskać *tylko* element <div class="gallery-item">?
Podsumowanie: wydajne przemierzanie DOM
Świetna robota! Opanował Pan lub opanowała Pani najważniejsze metody jQuery do wydajnego przemierzania DOM:
.find(): wyszukuje elementy potomne *wewnątrz* elementów..closest(): znajduje *najbliższy element nadrzędny* pasujący do selektora, przechodząc *w górę* drzewa..siblings(): wybiera wszystkie elementy znajdujące się na *tym samym poziomie* co bieżący element (z wyłączeniem jego samego)..parentsUntil(): wybiera wiele elementów nadrzędnych *aż do* określonego elementu zatrzymującego (bez uwzględniania go).
Rozważne korzystanie z tych metod pomaga pisać precyzyjniejszy, wydajniejszy i czytelniejszy kod jQuery dla dynamicznych aplikacji internetowych!
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 22
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „Efektywne techniki przemieszczania się po DOM” jest bezpłatna?
Tak — pełny tekst „Efektywne techniki przemieszczania się po DOM” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Efektywne techniki przemieszczania się po DOM”?
Proszę opanować metody takie jak .closest(), .siblings(), .find() i .parentsUntil(), aby efektywnie poruszać się po drzewie DOM i unikać wąskich gardeł wydajnościowych. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?
Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Efektywne techniki przemieszczania się po DOM”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?
Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Zaawansowane selektory atrybutów
- Pseudoklasy i niestandardowe selektory
- Efektywne techniki przemieszczania się po DOM