Penataan Gaya dengan jQuery
Penataan Gaya dengan jQuery
Penataan Gaya dengan jQuery 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.
Pengantar
Halo,
Dalam semua contoh sebelumnya, kita telah mengerjakan objek DOM HTML.
Dengan jQuery, kita juga dapat memanipulasi gaya elemen HTML.
jQuery menyediakan beberapa metode untuk melakukannya.
kelas
Pada contoh-contoh pertama yang akan kita buat, kita akan melihat penggunaan kelas dengan jQuery.
Pada contoh di bawah ini, kita menyertakan pustaka jQuery ke dalam HTML dan mendefinisikan dua kelas bernama pink dan yellow yang membuat teks menjadi merah muda dan kuning.
Mari kita mulai 🚀
contoh
Kita menambahkan elemen <p> di antara tag <body>.
Saat ini, elemen tersebut belum memiliki kelas.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>contoh 2
Sekarang mari kita tambahkan kelas pink ke elemen paragraf menggunakan metode addClass().
Pada layar pratinjau, kita akan melihat bahwa warna teks Lorem ipsum berubah menjadi merah muda.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
metode removeClass()
Jika kita ingin menghapus kelas dari elemen HTML, metode removeClass() digunakan.
Kita mengubah contoh di bawah ini dan sebelumnya mendefinisikan kelas pink pada elemen HTML. Segera setelah DOM dimuat, kelas pink pada elemen p kita akan dihapus.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>toggleClass
metode toggleClass()
Sesuai dengan namanya, melalui metode ini,
jika sebuah kelas terdapat pada elemen target, kelas tersebut akan dihapus; jika tidak, kelas tersebut akan ditambahkan.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Metode CSS
metode css()
Kita telah melihat metode untuk menambahkan dan menghapus kelas.
Sekarang mari kita pelajari metode CSS yang digunakan untuk menentukan gaya sebaris bagi simpul HTML kita.
Metode CSS menerima dua parameter.
- Parameter pertama adalah nama properti yang akan ditetapkan.
- Parameter kedua adalah nilai properti yang akan ditetapkan.
Contoh berikut menunjukkan berbagai penggunaan metode CSS.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
API jQuery
Kita telah mempelajari banyak operasi manipulasi DOM dengan jQuery.
Selain metode yang telah kita pelajari, jQuery memiliki banyak metode manipulasi lainnya.
Anda dapat menelusuri seluruh antarmuka pemrograman aplikasi dengan mengeklik tautan di bawah ini.
Selamat
Selamat 🎉
Kita telah mempelajari Penataan gaya dengan jQuery.
Pada bagian berikutnya, kita akan mempelajari Pengelolaan Peristiwa dalam jQuery.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penataan Gaya dengan jQuery” gratis?
Ya — teks lengkap “Penataan Gaya dengan jQuery” 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 “Penataan Gaya dengan jQuery”?
Penataan Gaya 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 “Penataan Gaya dengan jQuery” 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.