Cara Memanipulasi Class Attribut CSS dengan Jquery

Bicara soal Jquery, Jquery merupakan sebuah library dari javascript. Sedangkan library merupakan sebuah kumpulan fungsi yang “ready” (siap digunakan) untuk mempermudah dalam membuat sebuah aplikasi. Jquery ini sifatnya tidak jauh berbeda dengan javascript dan tujuan agar membuat tampilan website menjadi lebih hidup dan lebih interaktif.

Dikesempatan kali ini saya akan membahas tentang basic dasar tentang jquery yaitu Cara Memanipulasi Class Attribut CSS dengan Jquery. Diketahui bahwa memanipulasi class attribute css dengan jquery sangat penting. Didalam memanipulasi class ada banyak metode yang dapat digunakan. Sebagai contoh, kita akan membahas salah satu dari banyak metode/event jquery. Teman-teman bisa lihat seperti pada gambar dibawah ini :

Oke tanpa basa-basi mari kita bahas tentang addClass() jquery / menambah class css dengan jquery. Pertama-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>Dumetschool</p>
<p>Terbail dan Nomor Satu</p>
 
</body>
</html>

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

Jika sudah, simpan. Penjelasan dari script diatas kita sudah membuat sebuah struktur html beserta element dan class didalamnya namun saat kita run di browser masih tidak terlihat efek dari CSS tsb. Lalu bagaimana caranya agar efek css yang sudah kita buat dapat berjalan ?, oke lanjut ke langkah selanjutnya, 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 buat. Coba silahkan teman-teman jalankan, hasilnya akan sama seperti pada gambar dibawah ini :

Jadi seperti itulah contoh dasar tentang Cara Memanipulasi Class Attribut CSS dengan Jquery. Dan untuk lebih jelasnya silahkan teman-teman pelajari di website resmi nya jquery.com.

Oke kalua begitu cukup sekian pembahasan kali ini tentang Cara Memanipulasi Class Attribut CSS dengan Jquery. Semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Memanipulasi Class Attribut CSS dengan Jquery

Kategori