jQuery Academy · Pelajaran

Manipulasi DOM dengan jQuery - 1

Manipulasi DOM dengan jQuery

Pelajaran 1 dari 111 langkah

Manipulasi DOM dengan jQuery - 1 adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 1 pelajaran total.

Pendahuluan Metode

Halo,

Sejauh ini, kita telah melihat kegunaan JQuery dan cara menggunakan pemilih.

Sekarang mari kita lihat metode-metode yang memungkinkan kita memanipulasi DOM.

metode text

metode text()

Kita menggunakan metode text() untuk mengakses isi elemen HTML.

Gunakan $ (selector).text() untuk membaca isi suatu elemen.

Selain itu, metode text digunakan untuk memperbarui isi suatu elemen. Anda cukup meneruskan isi baru ke metode text sebagai argumen.

<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>

Pertanyaan

metode html

metode html()

Metode kita berikutnya adalah html(). 

Sesuai dengan namanya, metode ini memberikan seluruh elemen, bukan hanya isi elemen yang kita pilih.

Mari kita definisikan contoh elemen HTML di bawah ini.

Dua elemen HTML dengan id base dan target telah didefinisikan. Kemudian, segera setelah DOM dimuat. 

Seluruh konten HTML dari elemen base telah disalin dan ditambahkan ke elemen dengan id 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>

Pemilih Atribut

metode attr()

Kita menggunakan atribut untuk menentukan perilaku tambahan pada elemen HTML.

Sering kali, kita ingin mengakses nilai atribut tersebut saat menulis kode JavaScript.

Dalam kasus seperti ini, metode attr digunakan.

Mari kita pelajari metode ini dengan membuat contoh di bawah ini.

<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>

Atribut

Proses menetapkan atribut baru serupa dengan metode text() dan html() yang telah kita pelajari sebelumnya.

Dengan meneruskan argumen ke metode attr() yang kita gunakan saat membaca, kita dapat menetapkan atribut baru untuk elemen target.

/* 
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()

Kita telah mempelajari cara menambahkan atribut; 

sekarang, mari kita lihat cara menghapus atribut yang sudah ada.

Untuk itu, kita akan menggunakan metode removeAttr().

Mari kita lihat contohnya.

/*
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));

metode val

metode val()

Formulir sangat penting bagi aplikasi web modern. Kita akan menggunakan metode val() untuk membaca data yang dimasukkan pengguna ke dalam elemen formulir.


<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>

Peringatan

Dalam pelajaran pengelolaan peristiwa, kita akan mempelajari cara mendengarkan setiap data input dan menampilkannya pada elemen span.

Informasi tambahan

Untuk memperbarui nilai sebuah input, kita meneruskan argumen ke metode val, seperti yang mungkin Anda duga.

const $ = (selector) => ({
  val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')

Selamat

Selamat 🎉

Kita telah mulai mempelajari manipulasi DOM 

Di bagian berikutnya, kita akan melanjutkan mempelajari manipulasi DOM dalam jQuery.

Manipulasi DOM dengan jQuery - 1 — ilustrasi 11
Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
22
Pelajaran
48

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Manipulasi DOM dengan jQuery - 1” gratis?

Ya — teks lengkap “Manipulasi DOM dengan jQuery - 1” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 1 pelajaran total.

Apa yang akan aku pelajari di “Manipulasi DOM dengan jQuery - 1”?

Manipulasi DOM dengan jQuery Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.

Berapa lama pelajaran “Manipulasi DOM dengan jQuery - 1” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

← Kembali ke jQuery Academy