Cara Memanipulasi Class Attribut CSS dengan Jquery

Bicara soal Jquery, Jquery adalah sebuah sebuah library dari javascript. Sedangkan library adalah sebuah sebuah kumpulan guna yang “ready” (siap digunakan) bagi mempermudah pada membangun sebuah program. Jquery ini sifatnya tak jauh berbeda dengan javascript dan tujuan agar membangun tampilan blog menjadi lebih hidup dan lebih interaktif.



Dikesempatan kali ini saya akan membahas mengenai basic basic mengenai jquery yaitu Cara Memanipulasi Class Attribut CSS dengan Jquery.  Diketahui bersama bahwa memanipulasi class attribute css dengan jquery betul-betul urgen. Didalam memanipulasi class ada banyak cara yang dapat digunakan. Selaku contoh, kita akan membahas diantara dari banyak cara/event jquery. Teman-teman dapat lihat seperti di gambar dibawah ini :



Jquery



Oke tanpa basa-basi mari kita bahas mengenai addClass() jquery / menambah class css dengan jquery. Pertama-tama-tama jalankan/run text-editornya, kemudian ketiklah script HTML dan CSS nya seperti dibawah ini :



<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Manipulasi addClass Jquery</title>
<link href=style.css rel=stylesheet>
</head>
<body>

<p>Hallo!</p>
<p>Source Code Aplikasi</p>
<p>Terbail dan Nomor Satu</p>

</body>
</html>


p { margin: 8px; font-size: 16px; } .warnaText { color: lightblue; } .warnaBg { background: black; }


Apabila telah, simpan. Penjelasan dari script diatas kita telah membangun sebuah struktur html dan juga element dan class didalamnya namun ketika kita run di browser masih tak terlihat efek dari CSS tsb. Lalu bagaimana caranya agar efek css yang telah kita bikin dapat berjalan ?, oke lanjut ke langkah berikutnya, teman-teman tambahkan script Jquerynya dan jangan lupa librarynya seperti dibawah ini :



$( p:last ).addClass( warnaText warnaBg );


Script diatas menjelaskan bahwa hanya tag p yang terakhirlah yang akan terkena efek dari style CSS yang tadi kita bikin. Coba silahkan teman-teman jalankan, hasilnya akan sama seperti di gambar dibawah ini :



Jquery



Jadi seperti demikianlah contoh basic mengenai Cara Memanipulasi Class Attribut CSS dengan Jquery. Dan bagi lebih jelasnya silahkan teman-teman pelajari di blog resmi nya jquery.com.



Oke kalua semacam itu lumayan sekianlah pembahasan kali ini mengenai Cara Memanipulasi Class Attribut CSS dengan Jquery. Semoga dapat bermanfaat dan hingga bertemu dipembahasan berikutnya.



Terimakasih




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS