Manipulowanie DOM za pomocą jQuery — 2
Manipulowanie DOM za pomocą jQuery — 2
Manipulowanie DOM za pomocą jQuery — 2 to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 1. 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 1 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Wprowadzenie i append
Dzień dobry,
W dotychczasowych przykładach wykonywaliśmy operacje aktualizacji lub odczytu obiektów HTML DOM.
Poznamy operację wstawiania za pomocą metody append().
Spójrzmy na przykład.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
Po uruchomieniu powyższego kodu metoda append doda kod HTML (przekazany jako argument) na końcu elementu #test.
prepend
Metoda prepend()
Przeciwieństwem metody append() jest metoda prepend() . Metoda append() dodaje element na końcu zawartości elementu docelowego, natomiast prepend dodaje go na początku.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>Pytanie
Za pomocą metod append i prepend mogliśmy dodawać nowe elementy HTML na końcu i początku elementu docelowego.
Co zrobić, jeśli chcemy dodać element jako rodzeństwo elementu docelowego?
Przykład
Kontynuujmy poprzedni przykład.
W pierwszym przypadku nasz węzeł HTML wygląda następująco.
<div id="test">
<p>initial paragraph</p>
</div>metody after i before
metody after() i before()
Za pomocą metod after() i before() możemy dodawać elementy HTML przed elementem docelowym i za nim.
W poniższym kodzie przykładowym nowy element został dodany do elementu o identyfikatorze #test bezpośrednio przed nim oraz bezpośrednio po nim w hierarchii elementów rodzeństwa.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
Wielokrotne wstawianie
Do tej pory poznaliśmy metody prepend(), append(), before() i after(). Nie wyjaśniłem pewnej kwestii. Przepraszam, czasami zdarza mi się o czymś zapomnieć 😇.
Co więc zrobić, jeśli chcemy dodać więcej niż jeden węzeł jednocześnie?
Tak jak w poniższym przykładzie,
możemy dodać więcej niż jeden węzeł jednocześnie, przekazując więcej niż jeden argument do odpowiednich metod.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>Przykład łączenia metod
W powyższym przykładzie jednocześnie dodano więcej niż jeden węzeł. Jak widać, składnia pozostaje taka sama, nawet jeśli używamy różnych metod.
Możemy również pisać kod w JQuery, łącząc metody.
W ten sposób możemy tworzyć krótszy i bardziej efektywny kod.
Spójrzmy na przykład i nauczmy się pisać łączony kod w jQuery.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>metoda wrap
metoda wrap()
Jakiej metody użyjemy, jeśli chcemy umieścić element HTML w innym kontenerze?
Oczywiście metody wrap() .
Poniższy przykład pokazuje proste zastosowanie metody wrap.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
metoda unwrap
metoda unwrap()
Jest to metoda odwrotna do metody wrap(). Za pomocą metody unwrap() możemy usunąć element nadrzędny elementu docelowego.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();metoda empty
metoda empty()
Przyjrzyjmy się usuwaniu zawartości elementów HTML.
Za pomocą metody empty() możemy usunąć wszystkie elementy potomne i elementy zagnieżdżone elementu docelowego.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();metoda remove()
metoda remove()
Metoda remove() usuwa z DOM nie tylko elementy potomne danego elementu, ale także sam ten element.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Gratulacje
Gratulacje 🎉
Nauczyliśmy się manipulować DOM.
W następnej sekcji poznamy stylowanie za pomocą JQuery.
Często zadawane pytania
Czy lekcja „Manipulowanie DOM za pomocą jQuery — 2” jest bezpłatna?
Tak — pełny tekst „Manipulowanie DOM za pomocą jQuery — 2” 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 1 lekcji w sumie.
Co nauczysz się w „Manipulowanie DOM za pomocą jQuery — 2”?
Manipulowanie DOM za pomocą jQuery — 2 Ć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 1 z 1.
Ile czasu zajmuje lekcja „Manipulowanie DOM za pomocą jQuery — 2”?
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.