jQuery Academy · Lekcja

Manipulowanie DOM za pomocą jQuery — 1

Manipulowanie DOM za pomocą jQuery

Lekcja 1 z 111 kroki

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.

Manipulowanie DOM za pomocą jQuery — 1 — ilustracja 11
Bezpłatny start

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.

← Powrót do jQuery Academy