Cara Menggunakan Fungsi addClass Pada jQuery

Selamat datang di website tips dan trik Dumet School, berjumpa kembali dengan saya yang selalu memberikan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan share kepada teman – teman bagaimana Cara Menggunakan Fungsi addClass Pada jQuery dalam latihan yang akan kita praktekkan kali ini akan menggunakan fungsi addClass. Di dalam jQuery kita perlu tahu fungsi apa saja yang harus gunakan untuk membuat sebuah layout. Biasanya kita membuat sebuah css dengan menggunakan class,id ataupun selector nya, fungsi addClass berfungsi untuk menghubungkan antara css dengan jQuery. Dimana sebuah css dengan menggunakan class kita dapat memanggil dan memberikan fungsi lainnya di dalam nya.

Oke mari kita langsung saja implementasikan Cara Menggunakan Fungsi addClass Pada jQuery pertama – tama siapkan text editornya dan copy script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
  <title>Cara Menggunakan Fungsi addClass Pada jQuery</title>
</head>
<body>

<h1>Ini adalah tag h1</h1>
<h2>Ini adalah tag h2</h2>

<p>Ini adalah tag p</p>
<h3>Ini adalah tag h3</h3>

<button>klik</button>

</body>
</html>

Dan save dengan index.html, langkah berikutnya kita atur css nya terlebih dahulu

<style>
.font{color:red}
.fontSize{font-size:300%}
.background{background-color:orange}
.underline{text-decoration:underline}
</style>

Baru kita akan panggil dengan fungsi addClass jQuery nya, pertama load library jQuery nya terlebih dahulu

https://code.jquery.com/jquery-3.2.1.min.js

Atau teman – teman bisa dengan ofline nya, copy semua script yang ada di link di atas ini kemudian save dengan jquery-3.2.1.min.js di dalam satu folder dengan index.html nya

Baru selanjutnya panggil di dalam script index nya

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Untuk ofline nya

<script src="jquery.min.js"></script>

Kemudian kita ketikkan script jQuery nya dan menghubungkan css dengan addClass

<script>
$(document).ready(function(){
 $("button").click(function(){
 $("h1").addClass("font");
 $("h2").addClass("fontSize");
 $("p").addClass("background");
 $("h3").addClass("underline");
 });
});
</script>

Jika sudah save dan jalankan pada browsernya, dan klik button maka akan tampil seperti gambar di bawah ini

Cara Menggunakan Fungsi addClass Pada jQuery

Hasil di atas ini berdasar kan pemanggilan addClass nya dimana di dalam mempunyai 4 class css, dan kemudian di tampilkan pada setiap tag html nya dengan menggunakan addClass nya.

Mudah sekali bukan..??

Sekian pada artikel kali tentang Cara Menggunakan Fungsi addClass Pada jQuery kita jumpa kembali pada artikle yang akan datang. terimakasih dan sampai jumpa.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *