Manipulowanie DOM za pomocą jQuery — 1
Manipulowanie DOM za pomocą jQuery
Manipulowanie DOM za pomocą jQuery — 1 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.
Wprowadzenie do metod
Dzień dobry,
Do tej pory poznaliśmy zastosowania JQuery oraz sposób używania selektora.
Teraz poznajmy metody, które pozwalają manipulować DOM.
metoda text
metoda text()
Używamy metody text() do uzyskiwania dostępu do zawartości elementu HTML.
Aby odczytać zawartość elementu, użyj $ (selector).text().
Ponadto metoda text służy do aktualizowania zawartości elementu. Wystarczy przekazać nową zawartość do metody text jako argument.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Pytanie
metoda html
metoda html()
Naszą kolejną metodą jest html().
Jak można wywnioskować z jej nazwy, zwraca ona cały element, a nie tylko jego zawartość.
Zdefiniujmy poniżej przykładowy element HTML.
Zdefiniowano dwa elementy HTML z identyfikatorami base i target. Następnie, gdy tylko DOM zostanie załadowany,
cała zawartość HTML elementu base została skopiowana i dodana do elementu o identyfikatorze target
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Selektor atrybutu
metoda attr()
Używamy atrybutów do definiowania dodatkowych zachowań elementów HTML.
Podczas pisania kodu JavaScript często chcemy uzyskać dostęp do wartości tych atrybutów.
W takich przypadkach używa się metody attr.
Poznajmy tę metodę, wykonując poniższy przykład.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Atrybut
Proces ustawiania nowych atrybutów jest podobny do poznanych wcześniej metod text() i html().
Przekazując argument do używanej podczas odczytu metody attr(), możemy zdefiniować nowy atrybut dla wybranego elementu.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
Nauczyliśmy się dodawać atrybut;
teraz zobaczmy, jak usunąć istniejący atrybut.
W tym celu użyjemy metody removeAttr().
Przyjrzyjmy się naszemu przykładowi.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));metoda val
metoda val()
Formularze są nieodłącznym elementem nowoczesnych aplikacji internetowych. Metody val() użyjemy do odczytywania danych wprowadzonych przez użytkowników do elementów formularza.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Ostrzeżenie
W lekcji dotyczącej obsługi zdarzeń nauczymy się nasłuchiwać na każde wprowadzone dane i wyświetlać je w naszym elemencie span.
Dodatkowa informacja
Aby zaktualizować wartość pola input, jak można się domyślić, przekazujemy argumenty do metody val.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Gratulacje
Gratulacje 🎉
Rozpoczęliśmy naukę manipulowania elementami DOM
W następnej sekcji będziemy kontynuować naukę manipulowania elementami DOM w jQuery.

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 „Manipulowanie DOM za pomocą jQuery — 1” jest bezpłatna?
Tak — pełny tekst „Manipulowanie DOM za pomocą jQuery — 1” 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 — 1”?
Manipulowanie DOM za pomocą jQuery Ć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 — 1”?
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.