Tutorial jQuery #7 - Penggunaan Event CSS pada jQuery

Tutorial jQuery #7 - Penggunaan Event CSS pada jQuery

HobbyTekno - Pada Posingan sebelumnya kita telah membat Dropdown Sederhana, nah kali Admin akan menjelaskan bagaimana cara menggunakan Event CSS pada jQuery. Event CSS berfungsi untuk mengubah element yang Diseleksi sesuai kondisi. Kita akan membuat contoh sederhana nya yaitu mengubah warna tag H1 saat tombol di klik. Berikut langkah-langkahnya.

Tutorial jQuery #7 - Penggunaan Event CSS pada jQuery


1. Pastikan File jQuery ada dalam Folder Project anda atau gunakan CDN jQuery secara online.

2. Buat file .html, ketik kode seperti berikut.
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Link ke jQuery -->
    <script src="jquery.js"></script>
    <!-- Link ke Script.js -->
    <script src="script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial jQuery #7 - Penggunaan Event CSS pada jQuery</title>
</head>

<body>
    <h1>Saya belajar jQuery di HobbyTekno</h1>
    <button id="merah">Merah</button>
    <button id="kuning">Kuning</button>
    <button id="hijau">Hijau</button>
</body>

</html>
Penjelasan : Pada kode diatas terdapat h1 dan Button, yang akan kita buat adalah saat tombol merah di klik, ubah warna h1 jadi merah, tombol kuning di klik ubah warna h1 jadi kuning, dan begitulah seterusnya. 

3. Buat file dengan nama script.js, ketik kode seperti berikut
$(document).ready(function () {
    $('#merah').click(function () {
        $('h1').css('color', 'red')
    });
    $('#kuning').click(function () {
        $('h1').css('color', 'yellow')
    });
    $('#hijau').click(function () {
        $('h1').css('color', 'green')
    });
});
4. Lalu coba klik masing-masing tombol, apakah berjalan normal atau tidak.

5. Selanjutnya untuk mengubah lebih banyak elemen CSS, Formatnya seperti berikut sebagai contoh.
$('#merah').click(function () {
        $('h1').css({
            'color': 'red',
            'padding': '20px',
            'margin': '20px',
            'background': 'black'
        })
    });
6. Pada saat Tombol Merah di klik, maka h1 nya akan berubah menjadi seperti berikut sesuai dengan CSS yang diterapkan pada kode diatas.

Tutorial jQuery #7 - Penggunaan Event CSS pada jQuery


Penjelasan : Begitulah jika ingin mengubah lebih banyak Elemen CSS. Formatnya seperti diatas.

Sekian Tutorial jQuery #7 - Penggunaan Event CSS pada jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Tutorial jQuery #7 - Penggunaan Event CSS pada jQuery"