JQuery Part 2 : toggleClass() Method ~ JUON JUNIOR

Friday, January 19, 2018

A.PENDAHULUAN

Hallo Teman..!! Apa kabar?? Bertemulagi dengan blog saya kali ini saya akan berbagi tentang kegiatan prakerin di blc telkom klaten

B.PENGERTIAN

Fungsi CSS() pada JQuery adalah fungsi yang disediakan untuk menambahkan atau membuat css pada element HTML. Contohnya misalnya anda bisa menambahkan atau menyisipkan design css menggunakan fungsi css() milik JQuery. Dan cara penulisan fungsi css pada JQuery ini sangatlah mudah, caranya sama seperti penulisan fungsi jquery yang lain, yang membedakan hanya pada pengisian parameter fungsi css

C.LATAR BELAKANG

ingin memahami tentang toggleClass() Method

D.MAKSUD DAN TUJUAN

agar dapat mengimplementasikan ke sebuah web

E.ALAT DAN BAHAN

laptop/pc
koneksi internet

text editor

F.WAKTU YANG DIPERLUKAN

G.PEMBAHASAN

Berikut ini fomat penulisan fungsi css pada JQuery.

$('element html').css("property","value");

Pertama pada bagian element HTML di isikan dengan element HTML yang ingin ditambahkan syntax css. Sesuai dengan penandaan id dan classnya. Jika id dipanggil dengan tanda pagar (#),dan class di panggil dengan tanda titik (.)Kemudian di tambahkan fungsi css seperti contoh di atas, dan masukkan property yang di inginkan misalnya color , background dan lain - lain, kemudian pada bagian valuenya isikan value dari property yang kita buat. Silahkan perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
<script src="include/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").toggleClass("blue");
        $("h2").toggleClass("red");
        $("p").toggleClass("gren");
    });
});

</script>
<style>
.blue {
    color: blue;
}
.red {
color: red;
}
.gren{
color: green;
}
</style>
</head>
<body>

<center><h1>VISI SMK NEGERI 1 MEJAYAN</h1></center>
<p>RELIGIUS, PRODUKTIF, DAN BERBUDAYA LINGKUNGAN</p>
<center><h2>MISI SMK NEGERI 1 MEJAYAN</h2></center>
<p>
    1.Mengembangkan kepribadian akhlak mulia dengan melatih, membimbing, dan mendidik siswa dalam rangka pembentukan karakter .<br>
    2.Membina dan mengembangkan potensi peserta didik, sehingga mampu menggali keunggulan lokal peserta didik ( Local Value ).<br>
    3.Membina dan meningkatkan proses dan unit produksi sehingga mampu berperan produktif dalam menghasilkan produk.<br>
    4.Membina dan meningkatkan tenaga kependidikan yang berkualitas untuk memenuhi kebutuhan pelanggan.<br>
    5.Menjadikan sarana belajar yang memadai untuk mencapai bembelajaran yang maksimal.<br>
    6.Menciptakan lingkungan sekolah yang kondusif nyaman dan menyenangkan bagi warga sekolah dalam mendukung proses pembelajaran.<br>
    7.Mencitakan lingkungan hijau yang berbasis pada budaya lingkungan.<br>
    8.Menjalin kerjasama untuk meningkatkan kualiatas peran sekolah di masyarakat.<br>
</p>

<button>Toggle class</button>

</body>
</html>

dan hasilnya seperti ini

untuk yg belum di klik button nya

2. untuk yg sudah di klik buttonnya

H.HASIL YANG DIDAPAT

memahami sistem jquery toggleClass() Method

I.PENUTUP

sekian yang dapat saya sampaikan semoga bermanfaat..!!

J.REFERENSI

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_toggleclass

JQuery Part 2 : toggleClass() Method

Kategori